141 lines
7.4 KiB
Vue
141 lines
7.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, watch } from 'vue'
|
|
import { useRoute, RouterLink, useRouter } from 'vue-router'
|
|
import {
|
|
Dialog,
|
|
DialogPanel,
|
|
TransitionChild,
|
|
TransitionRoot,
|
|
} from '@headlessui/vue'
|
|
import { XMarkIcon } from '@heroicons/vue/24/outline'
|
|
import { useMenuStore } from '@/stores/menu'
|
|
import { IconApp } 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'
|
|
import { splitRoutePath } from '@/utils/texts'
|
|
|
|
const menu = useMenuStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
watch(route, (to, _) => {
|
|
menu.menuSelected = to.fullPath
|
|
closeSideBar()
|
|
})
|
|
|
|
// onMounted(() => {
|
|
// menu.menuSelected = router.currentRoute.value.fullPath
|
|
|
|
// if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
|
|
// const result = splitRoutePath(menu.menuSelected)
|
|
|
|
// for (const route of result) {
|
|
// if (route !== '/home') {
|
|
// menu.toggleSidebarMenu(route, true)
|
|
// }
|
|
// }
|
|
// }
|
|
// })
|
|
|
|
const isMenu = (name: string) => {
|
|
return menu.menuSelected === name
|
|
}
|
|
|
|
const closeSideBar = () => menu.toggleSidebar()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<TransitionRoot as="template" :show="menu.sidebarOpen">
|
|
<Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
|
|
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
|
|
enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
|
|
leave-to="opacity-0">
|
|
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 z-40 flex">
|
|
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
|
|
enter-from="-translate-x-full" enter-to="translate-x-0"
|
|
leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
|
|
leave-to="-translate-x-full">
|
|
<DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
|
|
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
|
|
enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
|
|
leave-to="opacity-0">
|
|
<div class="absolute top-0 right-0 pt-2 -mr-12">
|
|
<button type="button"
|
|
class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
@click="closeSideBar">
|
|
<span class="sr-only">Close sidebar</span>
|
|
<XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</TransitionChild>
|
|
<div class="flex items-center flex-shrink-0 px-4">
|
|
<RouterLink to="/">
|
|
<img class="w-auto h-16" :src="IconApp" alt="PLN" />
|
|
</RouterLink>
|
|
</div>
|
|
<div class="flex-1 h-0 mt-5 overflow-y-auto">
|
|
<nav class="px-2 space-y-1">
|
|
<template v-for="item in menu.navigation" :key="item.name">
|
|
<!-- Single-level item -->
|
|
<AsideMenuSingle v-if="item.children.length === 0" :item="item"
|
|
:selected="isMenu(item.path)" />
|
|
|
|
<!-- Nested item with children -->
|
|
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
<div class="flex-shrink-0 w-14" aria-hidden="true">
|
|
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
<!-- Static sidebar for desktop -->
|
|
<div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
|
|
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
|
<div class="flex flex-row items-center flex-shrink-0 h-16 px-2 bg-primary-50">
|
|
<button type="button"
|
|
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>
|
|
|
|
</button>
|
|
<RouterLink to="/">
|
|
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
|
|
</RouterLink>
|
|
</div>
|
|
<span v-if="menu.sidebarShowed" class="px-4 mt-4 text-sm font-semibold text-primary-800">
|
|
Menu
|
|
</span>
|
|
<div :class="[menu.sidebarShowed ? 'flex flex-col flex-grow overflow-y-auto' : 'hidden', '']">
|
|
<div class="flex flex-col flex-grow mt-3">
|
|
<nav class="flex-1 px-2 pb-4 space-y-1">
|
|
<template v-for="item in menu.navigation" :key="item.name">
|
|
<!-- Single-level item -->
|
|
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />
|
|
|
|
<!-- Nested item with children -->
|
|
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
@/utils/text@/utils/texts |