defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update toggle header when mobile ui

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-27 08:59:01 +07:00
parent 8384a35832
commit dca8a81670
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Navigation/Aside/Aside.vue
View File

@ -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>

9
src/components/Navigation/Header.vue
View File

@ -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"

6
src/components/icons/IconBars3.vue Normal file
View File

@ -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>

1
src/utils/icons.ts
View File

@ -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'