const items = [
  { label: 'Главная', icon: 'i-lucide-house', active: true },
  { label: 'Входящие', icon: 'i-lucide-inbox', badge: 4 },
  {
    label: 'Настройки',
    icon: 'i-lucide-settings',
    children: [
      { label: 'Общие' },
      { label: 'Участники' },
      { label: 'Уведомления' }
    ]
  }
]

<CSDashboardGroup :persistent="false" class="h-[560px]">
  <CSDashboardSidebar :default-size="34" :resizable :collapsible>
    <template #header>
      <div class="flex w-full items-center gap-2">
            <span class="font-semibold">CS Platform</span>
        <CSDashboardSidebarCollapse class="ms-auto" />
      </div>
    </template>
    <template #default>
      <CSInput icon="i-lucide-search" placeholder="Поиск..." />
      <CSNavigationMenu :items="items" orientation="vertical" highlight />
    </template>
    <template #footer>
      <CSUser name="Benjamin Carter" description="Администратор" />
    </template>
  </CSDashboardSidebar>
  <CSDashboardPanel>
    <CSDashboardNavbar title="Обзор" :toggle="false" />
    <CSDashboardToolbar>
      <template #left>Показатели команды</template>
      <template #right><CSButton label="Последние 30 дней" /></template>
    </CSDashboardToolbar>
    <div class="grid grid-cols-3 gap-3 p-4">
      <CSCard class="p-4">Активные проекты · 12</CSCard>
      <CSCard class="p-4">Задачи в работе · 28</CSCard>
      <CSCard class="p-4">Завершено · 86%</CSCard>
    </div>
  </CSDashboardPanel>
</CSDashboardGroup>