<template>
  <v-app id="inspire">
    <SideBar
      :items="navItemsStore.navItems"
      v-model:drawer="drawer"
      :rail="rail"
      @toggle-rail="rail = !rail"
    />

    <v-main app>
      <slot />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SideBar from "../components/SideBar.vue";
// Ensure this path matches your store location
import { useNavItemsStore } from '~/stores/navItems1'; 

definePageMeta({
  middleware: 'auth'
})

// State for controlling the sidebar
const drawer = ref(true);
const rail = ref(true);

const navItemsStore = useNavItemsStore();
</script>

<style scoped>
/* Global styles for layout */
</style>