100 lines
3.8 KiB
Vue
100 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref, shallowRef, watch } from 'vue';
|
|
import { useDisplay } from "vuetify";
|
|
//import sidebarItems from "full/vertical-sidebar/sidebarItem";
|
|
import { Menu2Icon,HelpIcon,ChevronDownIcon } from "vue-tabler-icons";
|
|
//import { LayoutFullVerticalHeaderNavigations } from '#components';
|
|
//import { LayoutFullVerticalHeaderRightMobileSidebar } from '~/.nuxt/components';
|
|
|
|
|
|
const props = defineProps({ items: { type: Object } })
|
|
const sidebarMenu = ref('');
|
|
|
|
|
|
const { mdAndDown } = useDisplay();
|
|
const sDrawer = ref(true);
|
|
onMounted(() => {
|
|
sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
|
|
});
|
|
watch([mdAndDown, () => props.items], ([mdVal, items]) => {
|
|
sDrawer.value = !mdVal;
|
|
sidebarMenu.value = items;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!------Sidebar-------->
|
|
<v-navigation-drawer left elevation="0" app v-model="sDrawer">
|
|
<!---Logo part -->
|
|
<div class="pa-5">
|
|
<LayoutFullLogo />
|
|
</div>
|
|
<!-- ---------------------------------------------- -->
|
|
<!---Navigation -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div>
|
|
<perfect-scrollbar class="scrollnavbar">
|
|
<v-list class="pa-6 pt-0">
|
|
<!---Menu Loop -->
|
|
<template v-for="(item, i) in sidebarMenu">
|
|
<!---Item Sub Header -->
|
|
<LayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
|
|
|
|
<!---If Has Child -->
|
|
<LayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="item" :level="0"
|
|
v-else-if="item.children" />
|
|
|
|
<!---Single Item-->
|
|
<LayoutFullVerticalSidebarNavItem :item="item" v-else class="leftPadding" />
|
|
<!---End Single Item-->
|
|
</template>
|
|
</v-list>
|
|
</perfect-scrollbar>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
<!------Header-------->
|
|
<v-app-bar elevation="0" height="70" class="top-header">
|
|
<div class="d-flex align-center justify-space-between w-100">
|
|
<div>
|
|
<v-btn class="hidden-lg-and-up ms-md-3 text-muted" @click="sDrawer = !sDrawer" icon variant="flat"
|
|
size="small">
|
|
<Menu2Icon size="20" stroke-width="1.5" />
|
|
</v-btn>
|
|
<!-- Notification -->
|
|
<LayoutFullVerticalHeaderNotificationDD />
|
|
</div>
|
|
<div>
|
|
<!-- <v-menu :close-on-content-click="true" class="mobile_popup">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn icon class="hidden-md-and-up custom-hover-primary" color="primary" variant="text" v-bind="props" size="small">
|
|
<Icon icon="solar:menu-dots-bold-duotone" height="22" />
|
|
</v-btn>
|
|
</template>
|
|
<v-sheet rounded="lg" elevation="10" class="mt-4 dropdown-box px-4 py-3">
|
|
<div class="d-flex justify-space-between align-center">
|
|
|
|
<LayoutFullVerticalHeaderRightMobileSidebar />
|
|
<LayoutFullVerticalHeaderNotificationDD />
|
|
<v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
|
|
<v-badge color="primary" content="0" offset-x="-4" offset-y="-6">
|
|
<Icon icon="solar:cart-large-2-outline" height="22" />
|
|
</v-badge>
|
|
</v-btn>
|
|
|
|
</div>
|
|
</v-sheet>
|
|
</v-menu> -->
|
|
</div>
|
|
<div>
|
|
<LayoutFullVerticalHeaderRightMobileSidebar />
|
|
<LayoutFullVerticalHeaderThemeToggler />
|
|
<!-- <LayoutFullVerticalHeaderNavigations /> -->
|
|
<LayoutFullVerticalHeaderProfileDD />
|
|
</div>
|
|
|
|
</div>
|
|
</v-app-bar>
|
|
|
|
<
|
|
</template>
|