Sidebar

"use client";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { HomeIcon, SettingsIcon } from "lucide-react";

export function Demo() {
  return (
    <div className="h-64 w-full max-w-lg overflow-hidden rounded-md border border-border">
      <SidebarProvider className="min-h-0! h-full">
        <Sidebar collapsible="icon" className="border-r border-sidebar-border">
          <SidebarHeader className="fe-label px-fe-3 py-fe-2">
            Demo
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Menu</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton isActive>
                      <HomeIcon />
                      <span>Início</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <SettingsIcon />
                      <span>Ajustes</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset className="min-h-0 bg-background">
          <div className="flex items-center gap-fe-2 border-b border-border p-fe-3">
            <SidebarTrigger />
            <p className="fe-caption text-muted-foreground">Conteúdo</p>
          </div>
          <div className="p-fe-4 fe-body text-muted-foreground">
            Sidebar compacta em frame.
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}