<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const nav : NavigationMenuItem[][] = [[
  {
  label: 'Home',
  icon: 'i-lucide-house',
  to: "/dashboard"
}, {
  label: 'Notifications',
  icon: 'solar:chat-round-unread-outline',
  badge: '4',
  to: "/events"
}, {
  label: 'Settings',
  icon: 'i-lucide-settings',
  //to: '/settings',
  children: [
    {
      label: "General",
      icon: "solar:settings-minimalistic-broken",
      to: "/settings",
    },
    {
      label: "Profile",
      icon: "solar:user-broken",
      to: "/settings/profile"
    },
    {
      label: "Theme",
      icon: "solar:pallete-2-broken",
      to: "/settings/theme"
    },
  ],
  }]
];
/*[
  {
    label: "Feedback"
  }
]];*/

// set color
/*useHead({
  bodyAttrs: {
    class: "ui-blue"
  }
})*/
onMounted(() => {
  ui_color_cookie();
})
// pass the x and y of the container
const { x, y } = useScroll(useTemplateRef("layout_root_wrap"))

// onMounted makes sure the page is loaded, window and document exists
onMounted(() => {
  const Ystate = useState("root_y", () => 0);
// create a global state with the div's Y. 
// I can't use window Y due to dashboard.
// So I need to do this way
watch(y, (newY) => {
  Ystate.value = newY;
})
})


</script>
<template>
  <UDashboardGroup >
    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
    
    <UDashboardSidebarCollapse />

    <UContainer class="max-w-full h-screen overflow-y-scroll" ref="layout_root_wrap">
      <!-- in my case I want the button to be the same everywhere.
      if you wanna customize it per page, place it per page inside UContainer -->
      <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->
      <slot />
    </UContainer>
  </UDashboardGroup>
</template>
