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

update aside

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-18 14:14:16 +07:00
parent 36945917b0
commit a7ead70332
4 changed files with 569 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Aside/Aside.vue
View File

@ -19,8 +19,6 @@ import type { MenuItemModel } from '@/utils/interfaces'
const menu = useMenuStore()
const route = useRoute()
const navigation = ref<MenuItemModel[]>(menu.navigation)
watch(route, (to, _) => {
menu.menuSelected = to.fullPath
closeSideBar()
@ -68,7 +66,7 @@ const closeSideBar = () => menu.toggleSidebar()
</div>
<div class="flex-1 h-0 mt-5 overflow-y-auto">
<nav class="px-2 space-y-1">
<template v-for="item in navigation" :key="item.name">
<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.href)" />
@ -97,7 +95,7 @@ const closeSideBar = () => menu.toggleSidebar()
<div class="flex flex-col flex-grow overflow-y-auto">
<div class="flex flex-col flex-grow mt-5">
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in navigation" :key="item.name">
<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.href)" />

35
src/components/Aside/AsideMenuMultiple.vue
View File

@ -32,17 +32,17 @@ const isMenuSelected = computed(() => {
</script>
<template>
<div :class="[isChildren ? 'ml-4 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-slot="{ open }" v-bind:default-open="isMenuSelected ? true : false" as="div">
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children -->
<DisclosureButton
:class="[(isMenuSelected || open || isChildren) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<DisclosureButton @click="menu.toggleExpandedByHref(item.href, !item.expanded)"
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<embed :src="isChildren ? DotOutline : item.icon"
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
<svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
<svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
@ -55,17 +55,20 @@ const isMenuSelected = computed(() => {
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']">
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>
<div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>
</div>
</transition>
</Disclosure>