@trackany-device/components 1.0.0

package/src/layouts/app/CalendarSidebarLayout.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { Toolbar } from './partials/Toolbar';
+
+/**
+ * CalendarSidebarLayout (layout-36)
+ * Sidebar with mini calendar + category list + main calendar area.
+ */
+interface CalendarSidebarLayoutProps extends BaseAppLayoutProps {
+    miniCalendar?: ReactNode;
+    categories?: Array<{ name: string; color: string; visible?: boolean }>;
+    showToolbar?: boolean;
+    sidebarFooter?: ReactNode;
+}
+
+export function CalendarSidebarLayout({
+    children, currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    settingsUrl, logoutUrl, onLogout, unreadCount = 0,
+    miniCalendar, categories = [], sidebarFooter,
+    showToolbar = true,
+}: CalendarSidebarLayoutProps) {
+    return (
+        <div className="flex min-h-screen">
+            <aside className="w-64 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+                <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                    {logo && <a href={logoHref}>{logo}</a>}
+                    {appName && <span className="text-sm font-semibold text-sidebar-foreground">{appName}</span>}
+                </div>
+                <ScrollArea className="flex-1">
+                    {miniCalendar && <div className="p-3 border-b border-sidebar-border">{miniCalendar}</div>}
+                    {categories.length > 0 && (
+                        <div className="p-3">
+                            <p className="text-xs font-medium text-muted-foreground mb-2 px-1">Calendars</p>
+                            <div className="space-y-1">
+                                {categories.map((cat, i) => (
+                                    <label key={i} className="flex items-center gap-2 px-1 py-1 rounded text-sm cursor-pointer hover:bg-sidebar-accent">
+                                        <span className="size-3 rounded-full shrink-0" style={{ backgroundColor: cat.color }} />
+                                        <span className="text-sidebar-foreground">{cat.name}</span>
+                                    </label>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </ScrollArea>
+                {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+            </aside>
+
+            <div className="flex flex-col flex-1 min-w-0">
+                <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <div className="flex-1" />
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </header>
+                <main className="flex-1 overflow-hidden flex flex-col" role="content">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/CommunitiesNavbarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as CommunitiesNavbarLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/DualNavbarSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as DualNavbarSidebarLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/FocusSidebarLayout.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem } from '../../components/ui/accordion-menu';
+import { Button } from '../../controls/Button';
+import { Search } from 'lucide-react';
+
+/**
+ * FocusSidebarLayout (layout-39)
+ * Todo/task-focused sidebar: focus card + tag list + task groups + toolbar search.
+ */
+interface FocusSidebarLayoutProps extends BaseAppLayoutProps {
+    focusCard?: ReactNode;
+    tags?: Array<{ name: string; count?: number; href: string }>;
+    headerSearchPlaceholder?: string;
+    sidebarFooter?: ReactNode;
+}
+
+export function FocusSidebarLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', user,
+    settingsUrl, logoutUrl, onLogout, unreadCount = 0,
+    focusCard, tags = [], sidebarFooter,
+}: FocusSidebarLayoutProps) {
+    return (
+        <div className="flex min-h-screen">
+            <aside className="w-64 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+                <div className="flex items-center justify-between px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                    {logo && <a href={logoHref}>{logo}</a>}
+                    <Button variant="ghost" size="sm" className="size-8 p-0 ms-auto">
+                        <Search className="size-4" />
+                    </Button>
+                </div>
+                <ScrollArea className="flex-1 py-2 px-2">
+                    {focusCard && <div className="mb-3 p-2 rounded-lg bg-primary/10 border border-primary/20">{focusCard}</div>}
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {navItems.map((item, i) => (
+                                <AccordionMenuItem key={i} value={item.href ?? item.title} asChild>
+                                    <a href={item.href}>{item.title}</a>
+                                </AccordionMenuItem>
+                            ))}
+                        </AccordionMenuGroup>
+                        {tags.length > 0 && (
+                            <AccordionMenuGroup>
+                                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Tags</div>
+                                {tags.map((tag, i) => (
+                                    <AccordionMenuItem key={i} value={tag.href} asChild>
+                                        <a href={tag.href} className="flex justify-between">
+                                            <span>{tag.name}</span>
+                                            {tag.count !== undefined && <span className="text-muted-foreground text-xs">{tag.count}</span>}
+                                        </a>
+                                    </AccordionMenuItem>
+                                ))}
+                            </AccordionMenuGroup>
+                        )}
+                    </AccordionMenu>
+                </ScrollArea>
+                {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+            </aside>
+
+            <div className="flex flex-col flex-1 min-w-0">
+                <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <div className="flex-1" />
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </header>
+                <main className="flex-1" role="content">{children}</main>
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/MailLayout.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem } from '../../components/ui/accordion-menu';
+
+/**
+ * MailLayout (layout-37)
+ * Three-column layout: sidebar nav + mail list panel + mail view panel.
+ * Used for email clients, CRM inbox, notification centre.
+ */
+interface MailLayoutProps extends BaseAppLayoutProps {
+    listPanel?: ReactNode;
+    viewPanel?: ReactNode;
+    sidebarFooter?: ReactNode;
+    listPanelWidth?: string;
+}
+
+export function MailLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', user,
+    settingsUrl, logoutUrl, onLogout, unreadCount = 0,
+    listPanel, viewPanel, sidebarFooter,
+    listPanelWidth = 'w-80',
+}: MailLayoutProps) {
+    return (
+        <div className="flex min-h-screen">
+            {/* Sidebar */}
+            <aside className="w-60 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+                <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                    {logo && <a href={logoHref}>{logo}</a>}
+                </div>
+                <ScrollArea className="flex-1 py-2 px-2">
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {navItems.map((item, i) => (
+                                <AccordionMenuItem key={i} value={item.href ?? item.title} asChild>
+                                    <a href={item.href}>{item.title}</a>
+                                </AccordionMenuItem>
+                            ))}
+                        </AccordionMenuGroup>
+                    </AccordionMenu>
+                </ScrollArea>
+                {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+            </aside>
+
+            {/* List panel */}
+            {listPanel && (
+                <aside className={cn('shrink-0 border-e border-border flex flex-col', listPanelWidth)}>
+                    {listPanel}
+                </aside>
+            )}
+
+            {/* View panel / main */}
+            <div className="flex flex-col flex-1 min-w-0">
+                <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <div className="flex-1" />
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </header>
+                <main className="flex-1 overflow-auto" role="content">
+                    {viewPanel ?? children}
+                </main>
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/MegaMenuHeaderLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-7: header with mega-menu, no sidebar (same as MegaMenuLayout)
+export { MegaMenuLayout as MegaMenuHeaderLayout } from './MegaMenuLayout';

package/src/layouts/app/MegaMenuLayout.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import type { NavItem } from '../../types/navigation';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../components/ui/dropdown-menu';
+import { ChevronDown } from 'lucide-react';
+
+/**
+ * MegaMenuLayout (demo7)
+ * Fixed header with integrated horizontal mega menu. No sidebar.
+ */
+interface MegaMenuLayoutProps extends BaseAppLayoutProps {
+    showToolbar?: boolean;
+}
+
+export function MegaMenuLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+}: MegaMenuLayoutProps) {
+    function isActive(url: string) { return !!url && url !== '#' && currentUrl.startsWith(url); }
+    function hasActiveChild(items: NavItem[]): boolean { return items.some((i) => isActive(i.href ?? '') || (i.items ? hasActiveChild(i.items) : false)); }
+
+    return (
+        <div className="flex flex-col min-h-screen">
+            <header className="sticky top-0 z-20 flex items-center h-[70px] border-b border-border bg-background/95 backdrop-blur-sm px-4 shrink-0">
+                <div className="container mx-auto flex items-center gap-6">
+                    {logo && <a href={logoHref} className="shrink-0">{logo}</a>}
+                    {appName && <span className="text-sm font-medium hidden md:inline">{appName}</span>}
+
+                    {/* Mega menu inline */}
+                    <nav className="flex items-stretch flex-1 overflow-x-auto">
+                        {navItems.map((item, i) => {
+                            const active = isActive(item.href ?? '') || (item.items ? hasActiveChild(item.items) : false);
+                            if (item.items && item.items.length > 0) {
+                                return (
+                                    <DropdownMenu key={i}>
+                                        <DropdownMenuTrigger asChild>
+                                            <button className={cn('flex items-center gap-1.5 px-3 py-3.5 text-sm text-nowrap border-b-2 transition-colors hover:text-mono bg-transparent', active ? 'text-mono border-mono' : 'text-secondary-foreground border-transparent')}>
+                                                {item.title} <ChevronDown className="size-3.5" />
+                                            </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent className="min-w-[200px]">
+                                            {item.items.map((child, ci) => (
+                                                <DropdownMenuItem key={ci} asChild>
+                                                    <a href={child.href} className={cn(isActive(child.href ?? '') && 'bg-accent')}>{child.title}</a>
+                                                </DropdownMenuItem>
+                                            ))}
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                );
+                            }
+                            return (
+                                <a key={i} href={item.href} className={cn('flex items-center px-3 py-3.5 text-sm text-nowrap border-b-2 transition-colors hover:text-mono', active ? 'text-mono border-mono' : 'text-secondary-foreground border-transparent')}>
+                                    {item.title}
+                                </a>
+                            );
+                        })}
+                    </nav>
+
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </div>
+            </header>
+
+            <main className="flex-1" role="content">
+                {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                    <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                )}
+                {children}
+            </main>
+            <Footer links={footerLinks} copyright={copyright} />
+        </div>
+    );
+}

package/src/layouts/app/MegaMenuNavbarLayout.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import type { BaseAppLayoutProps } from './layout-types';
+import type { NavItem } from '../../types/navigation';
+import { Navbar } from './partials/Navbar';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../components/ui/dropdown-menu';
+import { ChevronDown, Search } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '../../controls/Button';
+
+/**
+ * MegaMenuNavbarLayout (demo9)
+ * Header with logo, search, and mega-menu dropdown nav + horizontal navbar below.
+ */
+interface MegaMenuNavbarLayoutProps extends BaseAppLayoutProps {
+    showToolbar?: boolean;
+    onSearchOpen?: () => void;
+}
+
+export function MegaMenuNavbarLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true, onSearchOpen,
+}: MegaMenuNavbarLayoutProps) {
+    function isActive(url: string) { return !!url && url !== '#' && currentUrl.startsWith(url); }
+    function hasActiveChild(items: NavItem[]): boolean { return items.some((i) => isActive(i.href ?? '') || (i.items ? hasActiveChild(i.items) : false)); }
+
+    // Split navItems: top-level as mega menu triggers, sub-items go in dropdown
+    const megaItems = navItems;
+
+    return (
+        <div className="flex flex-col min-h-screen">
+            {/* Header with mega menu */}
+            <header className="sticky top-0 z-20 flex items-center h-[70px] border-b border-border bg-background/95 backdrop-blur-sm px-4 shrink-0">
+                <div className="container mx-auto flex items-center gap-4">
+                    {logo && <a href={logoHref} className="shrink-0">{logo}</a>}
+                    {appName && <span className="text-sm font-medium hidden md:inline">{appName}</span>}
+
+                    {/* Mega menu */}
+                    <nav className="flex items-stretch flex-1 overflow-x-auto">
+                        {megaItems.map((item, i) => {
+                            const active = isActive(item.href ?? '') || (item.items ? hasActiveChild(item.items) : false);
+                            if (item.items && item.items.length > 0) {
+                                return (
+                                    <DropdownMenu key={i}>
+                                        <DropdownMenuTrigger asChild>
+                                            <button className={cn('flex items-center gap-1 px-3 py-3.5 text-sm border-b-2 transition-colors hover:text-mono bg-transparent text-nowrap', active ? 'text-mono border-mono' : 'text-secondary-foreground border-transparent')}>
+                                                {item.title} <ChevronDown className="size-3" />
+                                            </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent className="min-w-[180px]">
+                                            {item.items.map((c, ci) => <DropdownMenuItem key={ci} asChild><a href={c.href}>{c.title}</a></DropdownMenuItem>)}
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                );
+                            }
+                            return (
+                                <a key={i} href={item.href} className={cn('flex items-center px-3 py-3.5 text-sm border-b-2 transition-colors hover:text-mono text-nowrap', active ? 'text-mono border-mono' : 'text-secondary-foreground border-transparent')}>
+                                    {item.title}
+                                </a>
+                            );
+                        })}
+                    </nav>
+
+                    {onSearchOpen && (
+                        <Button variant="ghost" size="sm" className="size-9 p-0 rounded-full" onClick={onSearchOpen}>
+                            <Search className="size-4" />
+                        </Button>
+                    )}
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </div>
+            </header>
+
+            <main className="flex-1" role="content">
+                {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                    <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                )}
+                {children}
+            </main>
+            <Footer links={footerLinks} copyright={copyright} />
+        </div>
+    );
+}

package/src/layouts/app/MegaMenuSearchNavbarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-9: mega-menu header with search + navbar (same as MegaMenuNavbarLayout)
+export { MegaMenuNavbarLayout as MegaMenuSearchNavbarLayout } from './MegaMenuNavbarLayout';

package/src/layouts/app/NavbarCollapsibleLayout.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { Navbar } from './partials/Navbar';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { Button } from '../../controls/Button';
+import { Menu, X } from 'lucide-react';
+import type { NavItem } from '../../types/navigation';
+
+/**
+ * NavbarCollapsibleLayout (demo3)
+ * Header (logo + topbar) + horizontal navbar + optional collapsible sidebar.
+ * Sidebar contains section-specific sub-navigation driven by the active navbar item.
+ */
+interface NavbarCollapsibleLayoutProps extends BaseAppLayoutProps {
+    sidebarItems?: NavItem[];
+    showToolbar?: boolean;
+}
+
+export function NavbarCollapsibleLayout({
+    children, navItems = [], sidebarItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+    defaultSidebarCollapsed = false,
+}: NavbarCollapsibleLayoutProps) {
+    const [sidebarOpen, setSidebarOpen] = useState(!defaultSidebarCollapsed);
+
+    return (
+        <div className="flex flex-col min-h-screen">
+            {/* Header */}
+            <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                <div className="container mx-auto flex justify-between items-center gap-4">
+                    <div className="flex items-center gap-3">
+                        {logo && <a href={logoHref}>{logo}</a>}
+                        {appName && <span className="text-sm font-medium hidden md:inline">{appName}</span>}
+                    </div>
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </div>
+            </header>
+
+            {/* Navbar */}
+            <Navbar navItems={navItems} currentUrl={currentUrl} />
+
+            {/* Body: optional sidebar + content */}
+            <div className="flex flex-1">
+                {sidebarItems.length > 0 && (
+                    <>
+                        <aside className={cn('w-64 shrink-0 border-e border-border bg-sidebar hidden lg:block', !sidebarOpen && 'hidden')}>
+                            <ScrollArea className="h-full py-3 px-2">
+                                <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                                    <AccordionMenuGroup>
+                                        {sidebarItems.map((item, i) => (
+                                            item.items ? (
+                                                <AccordionMenuSub key={i} value={item.title}>
+                                                    <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                                    <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                                        {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                                    </AccordionMenuSubContent>
+                                                </AccordionMenuSub>
+                                            ) : (
+                                                <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                            )
+                                        ))}
+                                    </AccordionMenuGroup>
+                                </AccordionMenu>
+                            </ScrollArea>
+                        </aside>
+                    </>
+                )}
+                <main className="flex-1 min-w-0" role="content">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+            </div>
+            <Footer links={footerLinks} copyright={copyright} />
+        </div>
+    );
+}

package/src/layouts/app/NavbarCollapsibleLinksLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-3: same as NavbarCollapsibleLayout with navbar links
+export { NavbarCollapsibleLayout as NavbarCollapsibleLinksLayout } from './NavbarCollapsibleLayout';

package/src/layouts/app/NavbarMinimalLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Navbar + sidebar variant
+export { NavbarSidebarLayout as NavbarMinimalLayout } from './NavbarSidebarLayout';

package/src/layouts/app/NavbarMinimalSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as NavbarMinimalSidebarLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/NavbarSidebarDashboardLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-5: navbar + sidebar with dashboard/default tabs (same structure as NavbarSidebarLayout)
+export { NavbarSidebarLayout as NavbarSidebarDashboardLayout } from './NavbarSidebarLayout';

package/src/layouts/app/NavbarSidebarLayout.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import type { NavItem } from '../../types/navigation';
+import { Navbar } from './partials/Navbar';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { Button } from '../../controls/Button';
+import { Menu } from 'lucide-react';
+
+/**
+ * NavbarSidebarLayout (demo5)
+ * Header (logo + topbar) + horizontal navbar + collapsible sidebar.
+ * Sidebar nav changes based on the active navbar section.
+ */
+interface NavbarSidebarLayoutProps extends BaseAppLayoutProps {
+    sidebarItems?: NavItem[];
+    showToolbar?: boolean;
+}
+
+export function NavbarSidebarLayout({
+    children, navItems = [], sidebarItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+    defaultSidebarCollapsed = false,
+}: NavbarSidebarLayoutProps) {
+    const [collapsed, setCollapsed] = useState(defaultSidebarCollapsed);
+    const effectiveSidebarItems = sidebarItems.length > 0 ? sidebarItems : [];
+
+    return (
+        <div className="flex flex-col min-h-screen">
+            {/* Header */}
+            <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                <div className="container mx-auto flex justify-between items-center gap-4">
+                    <div className="flex items-center gap-3">
+                        {logo && <a href={logoHref}>{logo}</a>}
+                        {appName && <span className="text-sm font-medium hidden md:inline">{appName}</span>}
+                    </div>
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </div>
+            </header>
+
+            {/* Navbar */}
+            <Navbar navItems={navItems} currentUrl={currentUrl} />
+
+            {/* Body */}
+            <div className="flex flex-1">
+                {effectiveSidebarItems.length > 0 && (
+                    <aside className={cn('shrink-0 border-e border-sidebar-border bg-sidebar transition-all', collapsed ? 'w-0 overflow-hidden' : 'w-60')}>
+                        <div className="flex items-center justify-between px-3 py-2 border-b border-sidebar-border">
+                            <Button variant="ghost" size="sm" className="size-8 p-0" onClick={() => setCollapsed((c) => !c)}>
+                                <Menu className="size-4" />
+                            </Button>
+                        </div>
+                        <ScrollArea className="py-2 px-2">
+                            <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                                <AccordionMenuGroup>
+                                    {effectiveSidebarItems.map((item, i) => (
+                                        item.items ? (
+                                            <AccordionMenuSub key={i} value={item.title}>
+                                                <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                                <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                                    {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                                </AccordionMenuSubContent>
+                                            </AccordionMenuSub>
+                                        ) : (
+                                            <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                        )
+                                    ))}
+                                </AccordionMenuGroup>
+                            </AccordionMenu>
+                        </ScrollArea>
+                    </aside>
+                )}
+                <main className="flex-1 min-w-0" role="content">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+            </div>
+            <Footer links={footerLinks} copyright={copyright} />
+        </div>
+    );
+}

package/src/layouts/app/NavbarSimpleSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Navbar + sidebar variant
+export { NavbarSidebarLayout as NavbarSimpleSidebarLayout } from './NavbarSidebarLayout';

package/src/layouts/app/NavbarTitledSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Navbar + sidebar variant
+export { NavbarSidebarLayout as NavbarTitledSidebarLayout } from './NavbarSidebarLayout';

package/src/layouts/app/PanelSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Panel sidebar variant
+export { SidebarMinimalLayout as PanelSidebarLayout } from './SidebarMinimalLayout';

package/src/layouts/app/SearchNavbarSidebarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as SearchNavbarSidebarLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/SidebarBreadcrumbLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Panel sidebar variant
+export { SidebarMinimalLayout as SidebarBreadcrumbLayout } from './SidebarMinimalLayout';

package/src/layouts/app/SidebarCleanLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-8: clean single sidebar with header/footer (same as SidebarMinimalLayout)
+export { SidebarMinimalLayout as SidebarCleanLayout } from './SidebarMinimalLayout';

package/src/layouts/app/SidebarCommunitiesLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace-community sidebar variant — wraps WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as SidebarCommunitiesLayout } from './WorkspaceSidebarLayout';