"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cva, type VariantProps } from "class-variance-authority"; import { PanelLeftIcon } from "lucide-react"; import * as React from "react"; import { useMediaQuery } from "@/registry/default/hooks/use-media-query"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { Input } from "@/registry/default/ui/input"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; import { Separator } from "@/registry/default/ui/separator"; import { Sheet, SheetDescription, SheetHeader, SheetPopup, SheetTitle, } from "@/registry/default/ui/sheet"; import { Skeleton } from "@/registry/default/ui/skeleton"; import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const SIDEBAR_COOKIE_NAME: string = "sidebar_state"; const SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH: string = "16rem"; const SIDEBAR_WIDTH_MOBILE: string = "18rem"; const SIDEBAR_WIDTH_ICON: string = "3rem"; const SIDEBAR_KEYBOARD_SHORTCUT: string = "b"; const sidebarMenuButtonVariants = cva( "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", { defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "h-8 text-sm", lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!", sm: "h-7 text-xs", }, variant: { default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", }, }, }, ); export type SidebarContextProps = { state: "expanded" | "collapsed"; open: boolean; setOpen: (open: boolean) => void; openMobile: boolean; setOpenMobile: (open: boolean) => void; isMobile: boolean; toggleSidebar: () => void; }; export const SidebarContext: React.Context = React.createContext(null); export function useSidebar(): SidebarContextProps { const context = React.useContext(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider."); } return context; } export function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; }): React.ReactElement { const isMobile = useMediaQuery("max-md"); const [openMobile, setOpenMobile] = React.useState(false); // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen); const open = openProp ?? _open; const setOpen = React.useCallback( async (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value; if (setOpenProp) { setOpenProp(openState); } else { _setOpen(openState); } // This sets the cookie to keep the sidebar state. await cookieStore.set({ expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000, name: SIDEBAR_COOKIE_NAME, path: "/", value: String(openState), }); }, [setOpenProp, open], ); // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); }, [isMobile, setOpen]); // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent): void => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { event.preventDefault(); toggleSidebar(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [toggleSidebar]); // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed"; const contextValue = React.useMemo( () => ({ isMobile, open, openMobile, setOpen, setOpenMobile, state, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, toggleSidebar], ); return (

{children}

); } export function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: React.ComponentProps<"div"> & { side?: "left" | "right"; variant?: "sidebar" | "floating" | "inset"; collapsible?: "offcanvas" | "icon" | "none"; }): React.ReactElement { const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); if (collapsible === "none") { return (

{children}

); } if (isMobile) { return ( Sidebar Displays the mobile sidebar.

{children}

); } return (

{/* This is what handles the sidebar gap on desktop */}

); } export function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps): React.ReactElement { const { toggleSidebar } = useSidebar(); return ( ); } export function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.ReactElement { const { toggleSidebar } = useSidebar(); return (

Sidebar

Instalação

Registry dependencies