69 lines
2.1 KiB
Vue
Executable File
69 lines
2.1 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { onMounted, ref, shallowRef, watch } from "vue";
|
|
import { useDisplay } from "vuetify";
|
|
import sidebarItems from "~/components/layout/full/vertical-sidebar/sidebarItem";
|
|
import { Menu2Icon } from "vue-tabler-icons";
|
|
import { useCustomizerStore } from "~/stores/customizer";
|
|
const sidebarMenu = shallowRef(sidebarItems);
|
|
const customizer = useCustomizerStore();
|
|
const { mdAndDown } = useDisplay();
|
|
const sDrawer = ref(true);
|
|
onMounted(() => {
|
|
sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
|
|
});
|
|
watch(mdAndDown, (val) => {
|
|
sDrawer.value = !val;
|
|
});
|
|
|
|
// console.log("sidebarMenu", sidebarMenu.value);
|
|
// console.log("sidebarMenu", sidebarItems.map((item) => item.children));
|
|
</script>
|
|
|
|
<template>
|
|
<!------Sidebar-------->
|
|
<v-locale-provider>
|
|
<v-app
|
|
:theme="customizer.actTheme"
|
|
class="bg-containerBg"
|
|
:class="[
|
|
customizer.actTheme,
|
|
customizer.mini_sidebar ? 'mini-sidebar' : '',
|
|
customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
|
|
customizer.setBorderCard ? 'cardBordered' : '',
|
|
]"
|
|
>
|
|
<!---Customizer location left side--->
|
|
<v-navigation-drawer
|
|
app
|
|
temporary
|
|
elevation="10"
|
|
location="left"
|
|
v-model="customizer.Customizer_drawer"
|
|
width="320"
|
|
class="left-customizer"
|
|
>
|
|
<Customizer />
|
|
</v-navigation-drawer>
|
|
<LazyLayoutFullVerticalSidebar v-if="!customizer.setHorizontalLayout" />
|
|
<div :class="customizer.boxed ? 'maxWidth' : 'full-header'">
|
|
<LazyLayoutFullVerticalHeader v-if="!customizer.setHorizontalLayout" />
|
|
</div>
|
|
|
|
<v-main class="ml-md-4">
|
|
<div class="rtl-lyt mb-3 hr-layout bg-containerBg">
|
|
<v-container
|
|
fluid
|
|
class="page-wrapper bg-background pt-md-8 rounded-xl"
|
|
>
|
|
<div>
|
|
<div class="">
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
</div>
|
|
</v-main>
|
|
</v-app>
|
|
</v-locale-provider>
|
|
</template>
|