60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T68cc,'use client' // Dual-rail sidebar with master/detail behavior. The thin rail picks the // section; the main panel renders the rows for the active section. One // contains rail + panel as inline flex siblings. // // Desktop: when collapsed (toggle clicked), the kit shrinks the sidebar to // --sidebar-width-icon. We set that to 3.5rem so only the rail stays. // The panel is hidden via group-data-[collapsible=icon] which only fires // on the desktop branch of (the mobile has no `group` // ancestor with that attr, so mobile sheet always shows rail+panel). // // IMPORTANT: the parent must set BOTH custom widths, // e.g. // The vars set on itself are too deep -- the layout-allocating // wrapper sits above it and reads the provider's vars. // // To wire to your router, replace the state-based switch with route matches // (e.g. set active = 'projects' on /projects/*). import * as React from 'react' import { Bell, Briefcase, Calendar, ChartLine, ChevronsUpDown, ClipboardList, CreditCard, FileText, Folder, Gauge, Headphones, HelpCircle, Home, Inbox, LayoutDashboard, Lock, Mail, MessageSquare, Moon, Search, Send, Settings as SettingsIcon, Star, Sun, Users, } from 'lucide-react' import { useTheme } from 'next-themes' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar' type RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings' const rail = [ { id: 'home' as const, icon: Home, label: 'Home' }, { id: 'projects' as const, icon: Folder, label: 'Projects' }, { id: 'inbox' as const, icon: Bell, label: 'Inbox' }, { id: 'messages' as const, icon: MessageSquare, label: 'Messages' }, ] const railLower = [ { id: 'support' as const, icon: Headphones, label: 'Support' }, { id: 'settings' as const, icon: SettingsIcon, label: 'Settings' }, ] const titles: Record = { home: 'Workspace', projects: 'Projects', inbox: 'Inbox', messages: 'Messages', support: 'Support', settings: 'Settings', } export function Sidebar05() { const { isMobile, state, setOpen } = useSidebar() const { theme, setTheme } = useTheme() // `mounted` stays false during SSR + the client's first synchronous // render, so isDark is also false on both sides -- no hydration // mismatch on the Sun/Moon icon. Once hydration settles the effect // flips the flag and the computed re-runs against the real // matchMedia/system signal. The transition reads as a fast icon // swap instead of a React hydration warning. const [mounted, setMounted] = React.useState(false) React.useEffect(() => setMounted(true), []) const isDark = mounted && (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) const [active, setActive] = React.useState('home') // Slack-style rail click: expand the panel if collapsed, or collapse if // the user clicks the already-active icon while expanded. On mobile the // sheet open/close is owned by the inset trigger, so we just swap active. function selectRail(id: RailId) { if (isMobile) { setActive(id) return } if (state === 'expanded' && active === id) { setOpen(false) return } setActive(id) setOpen(true) } return ( // Single Sidebar primitive containing BOTH rails inline. On desktop the // rail (56px) stays visible when the sidebar is collapsed thanks to // collapsible="icon" + --sidebar-width-icon: 3.5rem; the panel is // hidden only when state=collapsed. On mobile the kit's // renders the entire dual rail inside a single sheet pane.

{/* Thin icon rail -- 56px wide. Clicking an icon updates `active` which swaps the main panel content below. */}

{rail.map((item) => ( ))}

{railLower.map((item) => ( ))}

James Carter Admin

Invite teammates Workspace settings

{/* Main panel -- header is the same for every section; the content area swaps based on `active`. Each section's rows are spelled out inline so consumers can edit them in place. Hidden on desktop when state=collapsed (rail stays). The mobile branch in has no data-collapsible group, so this rule never applies on mobile -- the sheet always shows rail + panel. */}

uipkge {titles[active]}

} suffix={ ⌘F } />

{/* HOME: full workspace nav */} {active === 'home' && ( <> Dashboard Employees Clients Projects Workforce Calendar Attendance Mail Analytics )} {/* PROJECTS: pinned and recent projects */} {active === 'projects' && ( <> Pinned

Shift Planner

Training Portal

Performance Hub

Expense Claims Recent Onboarding 2026 Q1 hiring plan Compliance refresh )} {/* INBOX: notifications list */} {active === 'inbox' && ( <> Today 3 PTO requests pending Payroll cycle closes today This week 5 contracts awaiting sign-off 2 new hires start Monday )} {/* MESSAGES: conversations */} {active === 'messages' && ( <> Direct messages OB Olivia Bennett DM Daniel Morgan ER Ethan Reynolds Channels # announcements # hiring )} {/* SUPPORT: help links */} {active === 'support' && ( Help center Getting started Onboarding guide Contact support )} {/* SETTINGS: workspace settings */} {active === 'settings' && ( <> Workspace General Members Billing Limits Account Security Notifications )}

) } 63:T57b,// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-05.json`. // The dual-rail layout needs both width vars on SidebarProvider (see // Sidebar05.tsx for the why) -- they're inlined here so the route just // works after install. import type { CSSProperties } from 'react' import { Sidebar05 } from '@/components/blocks/Sidebar05' import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar' const sidebarWidths = { '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem', } as CSSProperties export default function Page() { return (

sidebar-05 demo

) } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/sidebar.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/sidebar-05/Sidebar05.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/Sidebar05.tsx"},{"path":"packages/registry-react/blocks/sidebar-05/page.tsx","content":"$63","type":"registry:block","target":"~/app/sidebar-05-demo/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]