Sidebar

'use client'

import * as React from 'react'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'

const platform = [
  { title: 'Dashboard', icon: HomeIcon },
  { title: 'Projects', icon: FolderIcon, badge: '12' },
  { title: 'Inbox', icon: InboxIcon, badge: '3' },
  { title: 'Settings', icon: SettingsIcon },
]

/**
 * Collapses to an icon rail with the trigger or ⌘/Ctrl + B; the state is remembered in a cookie. On a phone
 * it opens as an off-canvas sheet. The frame below only keeps this preview inside the docs page.
 */
export default function SidebarDemo() {
  const [active, setActive] = React.useState('Dashboard')

  return (
    <div className="relative h-[440px] w-full overflow-hidden rounded-lg border border-border bg-background">
      <SidebarProvider className="h-full min-h-0" storageKey="kagadmodyaa_sidebar_demo">
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton size="lg" tooltip="Kagadmodyaa">
                  <span data-slot="mark" className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-semibold text-primary-foreground">
                    K
                  </span>
                  <span className="grid text-left leading-tight">
                    <span className="truncate text-sm font-medium">Kagadmodyaa</span>
                    <span className="truncate text-xs text-muted-foreground">Studio plan</span>
                  </span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarHeader>

          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Platform</SidebarGroupLabel>
              <SidebarMenu>
                {platform.map(item => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title} isActive={active === item.title} onClick={() => setActive(item.title)}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
                    {item.title === 'Projects' && (
                      <SidebarMenuSub>
                        <li>
                          <SidebarMenuSubButton href="#website">Website</SidebarMenuSubButton>
                        </li>
                        <li>
                          <SidebarMenuSubButton href="#mobile">Mobile app</SidebarMenuSubButton>
                        </li>
                      </SidebarMenuSub>
                    )}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroup>
          </SidebarContent>

          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Ada Lovelace">
                  <span data-slot="mark" className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium">AL</span>
                  <span className="truncate">Ada Lovelace</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
        </Sidebar>

        <SidebarInset>
          <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-3">
            <SidebarTrigger />
            <span className="text-sm font-medium">{active}</span>
          </header>
          <div className="grid flex-1 content-start gap-3 overflow-auto p-4">
            <div className="h-20 rounded-lg bg-muted/60" />
            <div className="grid grid-cols-2 gap-3">
              <div className="h-24 rounded-lg bg-muted/60" />
              <div className="h-24 rounded-lg bg-muted/60" />
            </div>
            <p className="text-xs text-muted-foreground">Press ⌘B or Ctrl+B to toggle.</p>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  )
}

function Icon({ children }: { children: React.ReactNode }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
      {children}
    </svg>
  )
}
function HomeIcon() {
  return (
    <Icon>
      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <path d="M9 22V12h6v10" />
    </Icon>
  )
}
function FolderIcon() {
  return (
    <Icon>
      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
    </Icon>
  )
}
function InboxIcon() {
  return (
    <Icon>
      <path d="M22 12h-6l-2 3h-4l-2-3H2" />
      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
    </Icon>
  )
}
function SettingsIcon() {
  return (
    <Icon>
      <circle cx="12" cy="12" r="3" />
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
    </Icon>
  )
}