App Sidebar

Install it

Source

1"use client";
2 
3import { PanelLeft, PanelLeftClose } from "lucide-react";
4import {
5  useCallback,
6  useEffect,
7  useId,
8  useImperativeHandle,
9  useMemo,
10  useRef,
11} from "react";
12import { cn } from "@/lib/utils";
13import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
14import { useActiveDetection } from "./hooks/use-active-detection";
15import { useMatchMedia, resolveBreakpointQuery } from "./hooks/use-match-media";
16import { useSidebarReducer } from "./hooks/use-sidebar-reducer";
17import { useStorageSync } from "./hooks/use-storage-sync";
18import {
19  AppSidebarContext,
20  type AppSidebarContextValue,
21} from "./contexts/sidebar-nav-context";
22import { buildHandle } from "./lib/build-handle";
23import { deriveCssVars } from "./lib/derive-css-vars";
24import { flattenEntriesForKeyboard } from "./lib/flatten-entries";
25import { handleSidebarKeydown } from "./lib/keyboard-handler";
26import { DefaultLink } from "./parts/default-link";
27import { NavBrand } from "./parts/nav-brand";
28import { NavPrimaryAction } from "./parts/nav-primary-action";
29import { NavUser } from "./parts/nav-user";
30import { SidebarEmptyState } from "./parts/sidebar-empty-state";
31import { SidebarLoadingSkeleton } from "./parts/sidebar-loading-skeleton";
32import { SidebarNavList } from "./parts/sidebar-nav-list";
33import { SidebarSkipLink } from "./parts/sidebar-skip-link";
34import type {
35  NavUserMenuItemSelectEvent,
36  AppSidebarEmptyReason,
37  AppSidebarHandle,
38  AppSidebarMobileOpenReason,
39  AppSidebarProps,
40} from "./types";
41 
42/** Breakpoint → CSS class lookup (L44 — CSS-gated, not JS-gated rendering). */
43const BREAKPOINT_DESKTOP_VISIBLE: Record<string, string> = {
44  sm: "sm:flex",
45  md: "md:flex",
46  lg: "lg:flex",
47  xl: "xl:flex",
48  "2xl": "2xl:flex",
49};
50const BREAKPOINT_MOBILE_VISIBLE: Record<string, string> = {
51  sm: "sm:hidden",
52  md: "md:hidden",
53  lg: "lg:hidden",
54  xl: "xl:hidden",
55  "2xl": "2xl:hidden",
56};
57 
58/**
59 * C3 — items rendering + active detection.
60 *
61 * Items now actually render. Active item highlighted (full-fill paint;
62 * activeVariant matrix lands C5). Sections render their items inline
63 * (full section UI with header lands C4). Click sequence per L28 wired.
64 */
65export function AppSidebar(props: AppSidebarProps) {
66  const {
67    items,
68    currentPath,
69    isActive,
70    defaultMatch = "exact",
71    linkComponent = DefaultLink,
72    className,
73    id: idProp,
74    "aria-label": ariaLabel = "Main navigation",
75    defaultCollapsed,
76    defaultMobileOpen,
77// … truncated

What it pulls in

npm packages

• lucide-react

Other registry items

• avatar
• button
• dropdown-menu
• sheet

Files it writes

• src/registry/components/navigation/app-sidebar/app-sidebar.tsx
• src/registry/components/navigation/app-sidebar/index.ts
• src/registry/components/navigation/app-sidebar/types.ts
• src/registry/components/navigation/app-sidebar/contexts/sidebar-nav-context.tsx
• src/registry/components/navigation/app-sidebar/hooks/use-active-detection.ts
• src/registry/components/navigation/app-sidebar/hooks/use-match-media.ts
• src/registry/components/navigation/app-sidebar/hooks/use-sidebar-nav-state.ts
• src/registry/components/navigation/app-sidebar/hooks/use-sidebar-reducer.ts
• src/registry/components/navigation/app-sidebar/hooks/use-storage-sync.ts
• src/registry/components/navigation/app-sidebar/hooks/use-filtered-nav-sections.ts
• src/registry/components/navigation/app-sidebar/lib/active-variant-classes.ts
• src/registry/components/navigation/app-sidebar/lib/badge-format.ts
• src/registry/components/navigation/app-sidebar/lib/build-handle.ts
• src/registry/components/navigation/app-sidebar/lib/compute-active-item.ts
• src/registry/components/navigation/app-sidebar/lib/derive-avatar-fallback.ts
• src/registry/components/navigation/app-sidebar/lib/derive-css-vars.ts
• src/registry/components/navigation/app-sidebar/lib/derive-visible-entries.ts
• src/registry/components/navigation/app-sidebar/lib/flatten-entries.ts
• src/registry/components/navigation/app-sidebar/lib/href-resolver.ts
• src/registry/components/navigation/app-sidebar/lib/keyboard-handler.ts
• src/registry/components/navigation/app-sidebar/lib/sidebar-reducer.ts
• src/registry/components/navigation/app-sidebar/lib/storage-schema.ts
• src/registry/components/navigation/app-sidebar/parts/default-link.tsx
• src/registry/components/navigation/app-sidebar/parts/icon.tsx
• src/registry/components/navigation/app-sidebar/parts/nav-badge.tsx
• src/registry/components/navigation/app-sidebar/parts/nav-brand.tsx
• src/registry/components/navigation/app-sidebar/parts/nav-primary-action.tsx
• src/registry/components/navigation/app-sidebar/parts/nav-user.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-empty-state.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-loading-skeleton.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-nav-list.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-nav-row.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-nav-section.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-nav-separator.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-nav-trigger.tsx
• src/registry/components/navigation/app-sidebar/parts/sidebar-skip-link.tsx
• src/registry/components/navigation/app-sidebar/parts/tooltip-wrapper.tsx