"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { ChevronLeftIcon } from "@kineticui/icons"; type SidebarContextValue = { collapsed: boolean }; const SidebarContext = React.createContext({ collapsed: false }); export type SidebarProps = React.HTMLAttributes & { /** Icon-only mode. */ collapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; /** Top slot, e.g. a workspace switcher. */ header?: React.ReactNode; /** Bottom slot, e.g. a user card or upgrade prompt. */ footer?: React.ReactNode; }; /** App sidebar with sections, badges, and a collapse-to-icons mode. */ export function Sidebar({ collapsed = false, onCollapsedChange, header, footer, className, children, ...props }: SidebarProps) { return ( ); } export function SidebarSection({ title, children }: { title?: string; children: React.ReactNode }) { const { collapsed } = React.useContext(SidebarContext); return (

{title && !collapsed ? {title} : null} {title && collapsed ? : null} {children}

); } export type SidebarItemProps = { icon?: React.ReactNode; label: string; href?: string; active?: boolean; badge?: React.ReactNode; onClick?: () => void; }; export function SidebarItem({ icon, label, href, active, badge, onClick }: SidebarItemProps) { const { collapsed } = React.useContext(SidebarContext); const className = cn( "group relative flex h-10 w-full items-center gap-3 rounded-[10px] px-3 text-left text-sm transition-colors [&_svg]:size-[18px] [&_svg]:shrink-0", active ? "bg-surface-overlay font-medium text-foreground [&_svg]:text-accent" : "text-muted hover:bg-surface-raised hover:text-foreground", collapsed && "justify-center px-0", ); const inner = ( <> {icon} {collapsed ? null : {label}} {!collapsed && badge !== undefined ? {badge} : null} {collapsed ? ( {label} ) : null} ); return href ? ( {inner} ) : ( ); }

Sidebar

Installation

Exports