Yusron alamsyah
107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, shallowRef } from "vue";
|
|
import { useCustomizerStore } from "~/store/customizer";
|
|
import sidebarItems from "./sidebarItem";
|
|
import Logo from "../logo/Logo.vue";
|
|
import { Icon } from "@iconify/vue";
|
|
import { useRoute } from "vue-router";
|
|
// MiniSidebar Icons
|
|
import MiniSideIcons from "./MinIconItems";
|
|
|
|
const route = useRoute();
|
|
|
|
const findTitleByPath = (items: any, path: any) => {
|
|
let title = "";
|
|
|
|
for (const item of items) {
|
|
if (item.to === path) {
|
|
title = item.id;
|
|
break;
|
|
} else if (item.children) {
|
|
for (const child of item.children) {
|
|
if (child.to === path) {
|
|
title = item.id;
|
|
break;
|
|
} else if (child.children) {
|
|
for (const grandChild of child.children) {
|
|
if (grandChild.to === path) {
|
|
title = item.id;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return title;
|
|
};
|
|
const foundId = findTitleByPath(sidebarItems, route.path);
|
|
const getCurrent = foundId ? foundId : 1;
|
|
const currentMenu = ref<any>(getCurrent);
|
|
function showData(data: any) {
|
|
currentMenu.value = data;
|
|
//customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
|
|
}
|
|
|
|
// MiniSidebar Icons End
|
|
const customizer = useCustomizerStore();
|
|
const sidebarMenu = shallowRef(sidebarItems);
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Minisidebar Icons -->
|
|
|
|
|
|
<!-- LeftSidebar Items -->
|
|
<v-navigation-drawer
|
|
v-model="customizer.Sidebar_drawer"
|
|
elevation="0"
|
|
rail-width="1"
|
|
app
|
|
top="0"
|
|
class="leftSidebar"
|
|
:rail="customizer.mini_sidebar"
|
|
width="240"
|
|
>
|
|
<!---Logo part -->
|
|
<div class="pa-4 pb-0">
|
|
<Logo />
|
|
</div>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!---Navigation -->
|
|
<!-- ---------------------------------------------- -->
|
|
<perfect-scrollbar class="scrollnavbar">
|
|
<div class="px-4 py-0 sidebar-menus">
|
|
<v-list class="py-1">
|
|
<template v-for="(item, i) in sidebarMenu">
|
|
<template v-if="currentMenu == item.id">
|
|
<!---Item Sub Header -->
|
|
<LazyLayoutFullVerticalSidebarNavGroup
|
|
:item="item"
|
|
v-if="item.header"
|
|
:key="item.title"
|
|
/>
|
|
<!---If Has Child -->
|
|
<template v-for="sItem in item.children">
|
|
<LazyLayoutFullVerticalSidebarNavCollapse
|
|
class="leftPadding"
|
|
:item="sItem"
|
|
:level="0"
|
|
v-if="sItem.children"
|
|
/>
|
|
<LazyLayoutFullVerticalSidebarNavItem
|
|
:item="sItem"
|
|
class="leftPadding"
|
|
v-else
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</perfect-scrollbar>
|
|
</v-navigation-drawer>
|
|
</template>
|