App Shell 1

Installation

Usage

import {
  AppShell1,
  AppShell1PageHeader,
  AppShell1Search,
} from '@/components/odysseyui/app-shell-1';
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppShell1 user={{ name: 'John Doe', email: 'john@acme.com' }} />
      <SidebarInset>
        <AppShell1PageHeader
          pageName="Dashboard"
          breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]}
          user={{ name: 'John Doe', email: 'john@acme.com' }}
        />
        {children}
      </SidebarInset>
    </SidebarProvider>
  );
}

How It Works

• Uses shadcn Sidebar with collapsible="icon" and variant="inset" for a polished inset layout that collapses to icon-only on toggle.
• A custom search command palette opens via ⌘ K (or click), filtering sidebar nav items with keyboard-friendly list navigation inside a Dialog.
• AppShell1PageHeader renders a breadcrumb trail with a SidebarTrigger, vertical separator, and an avatar dropdown menu for profile actions.
• Sidebar sections support optional collapsing via the collapsibleSubsections prop, animated with a CSS grid-template-rows trick for smooth height transitions.
• Scroll fading masks (bg-linear-to-b / bg-linear-to-t) are layered above and below the nav content to hint at overflowable content.
• The user footer uses OdysseyAvatar as a fallback when no avatar image is available, deterministically picking a color from the user's name.

API Reference

AppShell1

AppShell1PageHeader

AppShell1Config