<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 "~/store/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;
});
</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>
