<script lang="ts" setup>
import type { SidebarNavGroup } from "./Sidebar.vue";

const props = defineProps<{
  sidebarNav: SidebarNavGroup[];
}>();

defineExpose({
  props,
});
</script>

<template>
  <SidebarProvider style="--sidebar-width: 200px">
    <slot name="sidebar" :sidebar-nav="sidebarNav">
      <AppSidebar :nav="sidebarNav" />
    </slot>
    <SidebarInset>
      <slot name="topbar">
        <AppTopbar />
      </slot>
      <div class="flex flex-1 flex-col gap-4 p-4">
        <slot />
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>

<style scoped></style>
