<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>
