160 lines
4.3 KiB
Vue
Executable File
160 lines
4.3 KiB
Vue
Executable File
<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 -->
|
|
<v-navigation-drawer
|
|
class="bg-light"
|
|
v-model="customizer.Sidebar_drawer"
|
|
top="0"
|
|
rail
|
|
rail-width="80"
|
|
>
|
|
<!-- <perfect-scrollbar class="miniscrollnavbar"> -->
|
|
<v-list-item class="px-0">
|
|
<!-- Toggle Sidebar Button -->
|
|
<div class="px-4 mb-3">
|
|
<v-btn
|
|
class="hidden-md-and-down my-2"
|
|
icon
|
|
rounded="md"
|
|
variant="plain"
|
|
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
|
|
>
|
|
<Icon icon="solar:hamburger-menu-line-duotone" height="25" />
|
|
</v-btn>
|
|
</div>
|
|
|
|
<div class="miniicons mt-lg-0 mt-4">
|
|
<!-- MiniSidebar Icons -->
|
|
<div class="d-flex flex-column gap-2">
|
|
<div
|
|
class="miniicons-list px-4"
|
|
v-for="menu in MiniSideIcons"
|
|
:key="menu.icon"
|
|
>
|
|
<v-btn
|
|
rounded="md"
|
|
flat
|
|
icon
|
|
variant="plain"
|
|
@click="showData(menu.id)"
|
|
:class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
|
|
>
|
|
<Icon :icon="'solar:' + menu.icon" width="25" />
|
|
<!-- Tooltip on Hover -->
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="end"
|
|
class="custom-tooltip"
|
|
>{{ menu.tooltip }}</v-tooltip
|
|
>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-list-item>
|
|
|
|
<!-- </perfect-scrollbar> -->
|
|
</v-navigation-drawer>
|
|
|
|
<!-- 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>
|