50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T5ac5,'use client'; import React, { useState, useCallback, useEffect, useMemo } from 'react'; import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, useSidebar, } from '@/components/ui/sidebar'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Avatar as UIAvatar, AvatarFallback, AvatarImage, } from '@/components/ui/avatar'; import { Separator } from '@/components/ui/separator'; import { HugeiconsIcon } from '@hugeicons/react'; import { SearchIcon, CommandLineIcon, RobotIcon, BookOpen01Icon, Settings02Icon, FramerIcon, PieChartIcon, MapsIcon, ArrowRight01Icon, Logout01Icon, User02Icon, UnfoldMoreIcon, KeyboardIcon, } from '@hugeicons/core-free-icons'; import OdysseyAvatar, { type AvatarColor, } from '@/components/odyssey/components/primitives/avatar'; import { cn } from '@/lib/utils'; import type { AppShell2Config, SidebarSection } from './app-shell-2.config'; import { appShell2Config as defaultConfig } from './app-shell-2.config'; // ─── Kbd ────────────────────────────────────────────────────────────────────── function Kbd({ children, className, }: { children: React.ReactNode; className?: string; }) { return ( {children} ); } // ─── Icon map ───────────────────────────────────────────────────────────────── const iconMap: Record = { SquareTerminal: CommandLineIcon, Bot: RobotIcon, BookOpen: BookOpen01Icon, Settings2: Settings02Icon, Frame: FramerIcon, PieChart: PieChartIcon, Map: MapsIcon, }; // ─── Avatar color helper ────────────────────────────────────────────────────── const AVATAR_COLORS: AvatarColor[] = [ 'blue', 'orange', 'red', 'green', 'purple', 'yellow', 'cyan', 'pink', 'indigo', 'lime', 'turquoise', 'violet', ]; function getAvatarColor(seed: string): AvatarColor { const n = seed.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0); return AVATAR_COLORS[n % AVATAR_COLORS.length]; } // ─── Shortcuts Modal ────────────────────────────────────────────────────────── const SHORTCUTS = [ { label: 'Open search', keys: ['⌘', 'K'] }, { label: 'Toggle sidebar', keys: ['⌘', 'B'] }, ] as const; function ShortcutsModal({ open, onOpenChange, }: { open: boolean; onOpenChange: (open: boolean) => void; }) { return ( ); } // ─── Shared user avatar + menu ──────────────────────────────────────────────── function UserAvatar({ src, name, color, }: { src: string; name: string; color: AvatarColor; }) { return ( ); } function UserMenuContent({ src, name, email, color, profileHref, onLogout, onShortcuts, }: { src: string; name: string; email: string; color: AvatarColor; profileHref: string; onLogout?: () => void; onShortcuts: () => void; }) { return ( <>

{name} {email}

Profile Shortcuts Log out ); } // ─── Types ──────────────────────────────────────────────────────────────────── export interface SidebarUserInfo { name?: string; email?: string; avatar?: string; } export interface AppShell2SearchProps { config: AppShell2Config; open: boolean; onOpenChange: (open: boolean) => void; } export interface AppShell2PageHeaderProps { pageName: string; breadcrumbs?: Array<{ label: string; href?: string }>; actions?: React.ReactNode; user?: SidebarUserInfo; profileHref?: string; onLogout?: () => void; } export interface AppShell2Props { config?: AppShell2Config; collapsibleSubsections?: boolean; user?: SidebarUserInfo; profileHref?: string; onLogout?: () => void; } // ─── Search Modal ───────────────────────────────────────────────────────────── export function AppShell2Search({ config, open, onOpenChange, }: AppShell2SearchProps) { const router = useRouter(); const [query, setQuery] = useState(''); const filtered = useMemo(() => { if (!query.trim()) return config.sections; const q = query.toLowerCase(); return config.sections .map((section) => ({ ...section, items: section.items.filter( (item) => item.title.toLowerCase().includes(q) || item.keywords?.some((kw) => kw.toLowerCase().includes(q)) || section.label.toLowerCase().includes(q), ), })) .filter((section) => section.items.length > 0); }, [config.sections, query]); const runCommand = useCallback( (command: () => unknown) => { onOpenChange(false); setQuery(''); command(); }, [onOpenChange], ); useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { if ( (e.target instanceof HTMLElement && e.target.isContentEditable) || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement ) return; e.preventDefault(); onOpenChange(!open); } }; document.addEventListener('keydown', down); return () => document.removeEventListener('keydown', down); }, [open, onOpenChange]); useEffect(() => { if (!open) setQuery(''); }, [open]); return ( ); } // ─── Page Header ────────────────────────────────────────────────────────────── export function AppShell2PageHeader({ pageName, breadcrumbs, actions, user, profileHref = '/profile', onLogout, }: AppShell2PageHeaderProps) { const userName = user?.name || 'User'; const userEmail = user?.email || 'user@example.com'; const avatarSrc = user?.avatar || ''; const avatarColor = getAvatarColor(userName); const [shortcutsOpen, setShortcutsOpen] = useState(false); return ( <>

{breadcrumbs && breadcrumbs.length > 0 ? ( breadcrumbs.map((crumb, index) => { const isLast = index === breadcrumbs.length - 1; return ( {!isLast && crumb.href ? ( {crumb.label} ) : ( {crumb.label} )} {!isLast && } ); }) ) : ( {pageName} )}

{actions} setShortcutsOpen(true)} />

); } // ─── Nav User (sidebar footer) ──────────────────────────────────────────────── function SidebarNavUser({ user, profileHref = '/profile', onLogout, }: { user?: SidebarUserInfo; profileHref?: string; onLogout?: () => void; }) { const { isMobile } = useSidebar(); const userName = user?.name || 'User'; const userEmail = user?.email || 'user@example.com'; const avatarSrc = user?.avatar || ''; const avatarColor = getAvatarColor(userName); const [shortcutsOpen, setShortcutsOpen] = useState(false); return ( <>

{userName} {userEmail}

setShortcutsOpen(true)} /> ); } // ─── Section Group ──────────────────────────────────────────────────────────── function SidebarSectionGroup({ section, pathname, collapsible, }: { section: SidebarSection; pathname: string; collapsible: boolean; }) { const [open, setOpen] = useState(true); return ( setOpen((v) => !v) : undefined} > {section.label} {collapsible && ( )}

{section.items.map((item) => { const isActive = pathname === item.href; const Icon = iconMap[item.icon]; return ( {Icon && ( )} {item.title} ); })}

); } // ─── Main Sidebar ───────────────────────────────────────────────────────────── export function AppShell2({ config = defaultConfig, collapsibleSubsections = false, user, profileHref = '/profile', onLogout, }: AppShell2Props) { const pathname = usePathname(); const [searchOpen, setSearchOpen] = useState(false); const { state } = useSidebar(); const isCollapsed = state === 'collapsed'; return ( <>

{config.company.logo}

{config.company.name} {config.company.subtitle}

setSearchOpen(true)} variant="outline" tooltip="Search" className="border text-muted-foreground" > Search {!isCollapsed && ( ⌘ K )}

{config.sections.map((section) => ( ))}

); } export default AppShell2; 54:T11b1,export interface SidebarMenuItem { title: string; href: string; icon: string; keywords?: string[]; } export interface SidebarSection { label: string; items: SidebarMenuItem[]; } export interface SidebarCompany { name: string; subtitle: string; logo?: string; } export interface AppShell2Config { company: SidebarCompany; sections: SidebarSection[]; } export const appShell2Config: AppShell2Config = { company: { name: 'Acme Inc', subtitle: 'Enterprise', logo: '', }, sections: [ { label: 'Platform', items: [ { title: 'Playground', href: '/playground', icon: 'SquareTerminal', keywords: ['playground', 'terminal', 'code'], }, { title: 'Models', href: '/models', icon: 'Bot', keywords: ['models', 'ai', 'machine learning'], }, { title: 'Documentation', href: '/documentation', icon: 'BookOpen', keywords: ['docs', 'documentation', 'guides'], }, { title: 'Settings', href: '/settings', icon: 'Settings2', keywords: ['settings', 'preferences', 'config'], }, ], }, { label: 'Projects', items: [ { title: 'Design Engineering', href: '/projects/design-engineering', icon: 'Frame', keywords: ['design', 'engineering', 'ui'], }, { title: 'Sales & Marketing', href: '/projects/sales-marketing', icon: 'PieChart', keywords: ['sales', 'marketing', 'analytics'], }, { title: 'Travel', href: '/projects/travel', icon: 'Map', keywords: ['travel', 'trips', 'locations'], }, ], }, { label: 'Platform 2', items: [ { title: 'Playground', href: '/playground', icon: 'SquareTerminal', keywords: ['playground', 'terminal', 'code'], }, { title: 'Models', href: '/models', icon: 'Bot', keywords: ['models', 'ai', 'machine learning'], }, { title: 'Documentation', href: '/documentation', icon: 'BookOpen', keywords: ['docs', 'documentation', 'guides'], }, { title: 'Settings', href: '/settings', icon: 'Settings2', keywords: ['settings', 'preferences', 'config'], }, ], }, { label: 'Projects 2', items: [ { title: 'Design Engineering', href: '/projects/design-engineering', icon: 'Frame', keywords: ['design', 'engineering', 'ui'], }, { title: 'Sales & Marketing', href: '/projects/sales-marketing', icon: 'PieChart', keywords: ['sales', 'marketing', 'analytics'], }, { title: 'Travel', href: '/projects/travel', icon: 'Map', keywords: ['travel', 'trips', 'locations'], }, ], }, { label: 'Platform 3', items: [ { title: 'Playground', href: '/playground', icon: 'SquareTerminal', keywords: ['playground', 'terminal', 'code'], }, { title: 'Models', href: '/models', icon: 'Bot', keywords: ['models', 'ai', 'machine learning'], }, { title: 'Documentation', href: '/documentation', icon: 'BookOpen', keywords: ['docs', 'documentation', 'guides'], }, { title: 'Settings', href: '/settings', icon: 'Settings2', keywords: ['settings', 'preferences', 'config'], }, ], }, { label: 'Projects 3', items: [ { title: 'Design Engineering', href: '/projects/design-engineering', icon: 'Frame', keywords: ['design', 'engineering', 'ui'], }, { title: 'Sales & Marketing', href: '/projects/sales-marketing', icon: 'PieChart', keywords: ['sales', 'marketing', 'analytics'], }, { title: 'Travel', href: '/projects/travel', icon: 'Map', keywords: ['travel', 'trips', 'locations'], }, ], }, ], }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@hugeicons/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["sidebar","breadcrumb","dropdown-menu","separator","dialog","avatar","@odysseyui/components-primitives-avatar"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.odysseyui.com/r/components-app-shells-app-shell-2.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-app-shells-app-shell-2","itemId":"@odysseyui/components-app-shells-app-shell-2"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/components/app-shells/app-shell-2/index.tsx","content":"$53","type":"registry:component","target":"components/odysseyui/app-shell-2/index.tsx"},{"path":"registry/components/app-shells/app-shell-2/app-shell-2.config.ts","content":"$54","type":"registry:component","target":"components/odysseyui/app-shell-2/app-shell-2.config.ts"}]}]]}],"$L55"]}]

App Shell 2

Installation

Files

components

Styles