From dca8a81670996a9a0a5ffbf533d836055a6f4fa6 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 27 Oct 2023 08:59:01 +0700
Subject: [PATCH] update toggle header when mobile ui

---
 src/components/Navigation/Aside/Aside.vue | 12 +++---------
 src/components/Navigation/Header.vue      |  9 +++++----
 src/components/icons/IconBars3.vue        |  6 ++++++
 src/utils/icons.ts                        |  1 +
 4 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 src/components/icons/IconBars3.vue

diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index cfc9d8b..284124c 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -9,7 +9,7 @@ import {
 } from '@headlessui/vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { useMenuStore } from '@/stores/menu'
-import { IconApp } from '@/utils/icons'
+import { IconApp, IconBars3 } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
 import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
@@ -106,16 +106,10 @@ const closeSideBar = () => menu.toggleSidebar()
                 class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 focus:outline-none focus:ring-0"
                 @click="menu.toggleSidebarDesktop()">
                 <span class="sr-only">Open sidebar</span>
-                <!-- <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" /> -->
-                <svg class="w-6 h-6" width="32" height="32" viewBox="0 0 32 32" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z"
-                        fill="#343330" />
-                </svg>
+                <IconBars3 class="w-6 h-6 fill-gray-600" />
 
             </button>
-            <RouterLink to="/">
+            <RouterLink to="/home">
                 <img class="w-auto h-11" :src="IconApp" alt="PLN" />
             </RouterLink>
         </div>
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index 9277c78..d8796ab 100644
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -16,7 +16,8 @@ import {
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
 import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
-import { IconApp } from '@/utils/icons'
+import { IconApp, IconBars3 } from '@/utils/icons'
+import { RouterLink } from 'vue-router'
 
 const auth = useAuthStore()
 const user = useUserStore()
@@ -46,11 +47,11 @@ const showDialogLogout = () => {
     <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
         <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
             <span class="sr-only">Open sidebar</span>
-            <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
+            <IconBars3 class="w-6 h-6 fill-gray-600" />
         </button>
-        <div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
+        <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
             <img class="w-auto h-11" :src="IconApp" alt="PLN" />
-        </div>
+        </RouterLink>
         <div class="flex justify-end w-full px-4">
             <div class="flex items-center ml-4 md:ml-6">
                 <button @click="command.showCommandPalettes" type="button"
diff --git a/src/components/icons/IconBars3.vue b/src/components/icons/IconBars3.vue
new file mode 100644
index 0000000..de9ec23
--- /dev/null
+++ b/src/components/icons/IconBars3.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index 7409a00..b2c5aa8 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -11,3 +11,4 @@ export { default as IconGauge } from '@/components/icons/IconGauge.vue'
 export { default as IconBox } from '@/components/icons/IconBox.vue'
 export { default as IconFileSearch } from '@/components/icons/IconFileSearch.vue'
 export { default as IconWallet } from '@/components/icons/IconWallet.vue'
+export { default as IconBars3 } from '@/components/icons/IconBars3.vue'