@trackany-device/components 1.0.0

package/src/layouts/app/SidebarContentLayout.tsx

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

package/src/layouts/app/SidebarDualMenuLayout.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState, 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 { 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';
+
+/**
+ * SidebarDualMenuLayout (demo10)
+ * Sidebar with primary icon-strip + secondary full-label panel.
+ * Same dual structure as SidebarTabsLayout but toolbar is in the sidebar header.
+ */
+interface SidebarDualMenuLayoutProps extends BaseAppLayoutProps {
+    primaryNavItems?: NavItem[];
+    sidebarFooter?: ReactNode;
+    showToolbar?: boolean;
+}
+
+export function SidebarDualMenuLayout({
+    children, navItems = [], primaryNavItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user, sidebarFooter,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+    defaultSidebarCollapsed = false,
+}: SidebarDualMenuLayoutProps) {
+    const [collapsed, setCollapsed] = useState(defaultSidebarCollapsed);
+    const [activeSection, setActiveSection] = useState(primaryNavItems[0]?.title ?? '');
+    const sectionItems = primaryNavItems.find((p) => p.title === activeSection)?.items ?? navItems;
+
+    return (
+        <div className="flex min-h-screen">
+            {/* Sidebar */}
+            <aside className="flex shrink-0">
+                {/* Primary icon strip */}
+                {primaryNavItems.length > 0 && (
+                    <div className="w-[70px] flex flex-col items-center py-4 gap-1 border-e border-sidebar-border bg-sidebar">
+                        {logo && <a href={logoHref} className="mb-4 shrink-0">{logo}</a>}
+                        {primaryNavItems.map((item, i) => (
+                            <button key={i} onClick={() => setActiveSection(item.title)}
+                                className={cn('w-10 h-10 rounded-lg flex items-center justify-center text-xs font-semibold transition-colors', activeSection === item.title ? 'bg-sidebar-primary text-sidebar-primary-foreground' : 'text-sidebar-foreground hover:bg-sidebar-accent/70')}
+                                title={item.title}
+                            >
+                                {item.title.slice(0, 2)}
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                {/* Secondary full nav */}
+                <div className={cn('flex flex-col border-e border-sidebar-border bg-sidebar transition-all', collapsed ? 'w-0 overflow-hidden' : 'w-56')}>
+                    <div className="flex items-center justify-between px-3 h-[70px] border-b border-sidebar-border shrink-0">
+                        {!primaryNavItems.length && logo && <a href={logoHref}>{logo}</a>}
+                        {activeSection && <span className="text-sm font-semibold text-sidebar-foreground truncate">{activeSection || appName}</span>}
+                        <Button variant="ghost" size="sm" className="size-8 p-0 ml-auto" onClick={() => setCollapsed((c) => !c)}>
+                            <Menu className="size-4" />
+                        </Button>
+                    </div>
+                    <ScrollArea className="flex-1 py-2 px-2">
+                        <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                            <AccordionMenuGroup>
+                                {sectionItems.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>
+                    {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+                </div>
+            </aside>
+
+            {/* 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" 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>
+        </div>
+    );
+}

package/src/layouts/app/SidebarFixedLayout.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps, AppLayoutUser } 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 { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger, AccordionMenuIndicator } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+import { Menu, X } from 'lucide-react';
+import { Button } from '../../controls/Button';
+
+interface SidebarFixedLayoutProps extends BaseAppLayoutProps {
+    showToolbar?: boolean;
+    headerRightSlot?: ReactNode;
+}
+
+function SidebarNav({ navItems, currentUrl }: { navItems: NavItem[]; currentUrl: string }) {
+    function isActive(url: string): boolean {
+        return !!url && url !== '#' && currentUrl.startsWith(url);
+    }
+    function hasActive(items: NavItem[]): boolean {
+        return items.some((i) => isActive(i.href ?? '') || (i.items ? hasActive(i.items) : false));
+    }
+
+    return (
+        <AccordionMenu type="single" collapsible matchPath={(href) => isActive(href)} selectedValue={currentUrl}>
+            <AccordionMenuGroup>
+                {navItems.map((item, i) => {
+                    if (item.items && item.items.length > 0) {
+                        return (
+                            <AccordionMenuSub key={i} value={item.title}>
+                                <AccordionMenuSubTrigger>
+                                    {item.title}
+                                    {hasActive(item.items) && <AccordionMenuIndicator className="size-1.5 rounded-full bg-primary" />}
+                                </AccordionMenuSubTrigger>
+                                <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                    {item.items.map((child, ci) => (
+                                        <AccordionMenuItem key={ci} value={child.href ?? child.title} asChild>
+                                            <a href={child.href}>{child.title}</a>
+                                        </AccordionMenuItem>
+                                    ))}
+                                </AccordionMenuSubContent>
+                            </AccordionMenuSub>
+                        );
+                    }
+                    return (
+                        <AccordionMenuItem key={i} value={item.href ?? item.title} asChild>
+                            <a href={item.href}>{item.title}</a>
+                        </AccordionMenuItem>
+                    );
+                })}
+            </AccordionMenuGroup>
+        </AccordionMenu>
+    );
+}
+
+export function SidebarFixedLayout({
+    children,
+    navItems = [],
+    currentUrl = '',
+    logo,
+    logoHref = '/',
+    appName,
+    user,
+    title,
+    breadcrumbs = [],
+    toolbarActions,
+    defaultSidebarCollapsed = false,
+    onLogout,
+    settingsUrl,
+    logoutUrl,
+    unreadCount = 0,
+    footerLinks = [],
+    copyright,
+    showToolbar = true,
+    headerRightSlot,
+}: SidebarFixedLayoutProps) {
+    const [collapsed, setCollapsed] = useState(defaultSidebarCollapsed);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [initialized, setInitialized] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setInitialized(true), 100);
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <div className={cn('sidebar-fixed-layout header-fixed flex min-h-screen', collapsed && 'sidebar-collapse', initialized && 'layout-initialized')}>
+            {/* Sidebar */}
+            <aside className={cn(
+                'layout-sidebar fixed inset-y-0 start-0 z-40 flex flex-col bg-sidebar border-e border-sidebar-border',
+                'transition-transform lg:translate-x-0',
+                mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+            )}>
+                {/* Sidebar header / logo */}
+                <div className="sidebar-header flex items-center gap-3 px-4 shrink-0 border-b border-sidebar-border">
+                    {logo && (
+                        <a href={logoHref} className="default-logo flex items-center gap-2 overflow-hidden">
+                            {logo}
+                            {appName && <span className="text-sm font-semibold text-sidebar-foreground whitespace-nowrap">{appName}</span>}
+                        </a>
+                    )}
+                </div>
+                {/* Nav */}
+                <ScrollArea className="flex-1 py-3 px-2">
+                    <SidebarNav navItems={navItems} currentUrl={currentUrl} />
+                </ScrollArea>
+            </aside>
+
+            {/* Mobile overlay */}
+            {mobileOpen && (
+                <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setMobileOpen(false)} />
+            )}
+
+            {/* Wrapper (header + content + footer) */}
+            <div className={cn('layout-wrapper flex flex-col flex-1 min-h-screen')}>
+                {/* Fixed header */}
+                <header className="layout-header fixed top-0 inset-x-0 z-20 flex items-center border-b border-border bg-background/95 backdrop-blur-sm px-4 gap-4">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full hidden lg:flex"
+                        onClick={() => setCollapsed((c) => !c)}
+                        aria-label="Collapse sidebar"
+                    >
+                        <Menu className="size-4" />
+                    </Button>
+                    <div className="flex-1" />
+                    <HeaderTopbar
+                        user={user}
+                        unreadCount={unreadCount}
+                        settingsUrl={settingsUrl}
+                        logoutUrl={logoutUrl}
+                        onLogout={onLogout}
+                        extraSlot={headerRightSlot}
+                    />
+                </header>
+
+                {/* Main content */}
+                <main className="grow pt-5" 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>
+        </div>
+    );
+}

package/src/layouts/app/SidebarFooterNavbarLayout.tsx

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

package/src/layouts/app/SidebarHeaderMenuLayout.tsx

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

package/src/layouts/app/SidebarMegaMenuLayout.tsx

@@ -0,0 +1,4 @@
+'use client';
+// layout-1: sidebar with mega-menu navigation in header
+// Structurally same as SidebarFixedLayout — the mega-menu is optional navigation within the header
+export { SidebarFixedLayout as SidebarMegaMenuLayout } from './SidebarFixedLayout';

package/src/layouts/app/SidebarMinimalLayout.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+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';
+
+/**
+ * SidebarMinimalLayout (demo8)
+ * Clean single sidebar with no secondary panel. Sidebar has header + menu + footer area.
+ */
+interface SidebarMinimalLayoutProps extends BaseAppLayoutProps {
+    sidebarFooter?: React.ReactNode;
+    showToolbar?: boolean;
+}
+
+export function SidebarMinimalLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions, sidebarFooter,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+}: SidebarMinimalLayoutProps) {
+    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 py-3 px-2">
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {navItems.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>
+                {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">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+                <Footer links={footerLinks} copyright={copyright} />
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/SidebarMobileSearchLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Sidebar with search - variant of SidebarSearchHeaderLayout
+export { SidebarSearchHeaderLayout as SidebarMobileSearchLayout } from './SidebarSearchHeaderLayout';

package/src/layouts/app/SidebarMultiPanelLayout.tsx

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

package/src/layouts/app/SidebarPrimarySecondaryLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-10: sidebar with primary/secondary dual menus (same as SidebarDualMenuLayout)
+export { SidebarDualMenuLayout as SidebarPrimarySecondaryLayout } from './SidebarDualMenuLayout';

package/src/layouts/app/SidebarSearchHeaderLayout.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+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 { Search } from 'lucide-react';
+import { Input } from './../../controls/Input';
+import { useState } from 'react';
+
+/**
+ * SidebarSearchHeaderLayout (layout-11)
+ * Sidebar with inline search + header with horizontal menu.
+ */
+interface SidebarSearchHeaderLayoutProps extends BaseAppLayoutProps {
+    headerMenuItems?: Array<{ label: string; href: string }>;
+    showToolbar?: boolean;
+    sidebarSearchPlaceholder?: string;
+    headerActions?: ReactNode;
+}
+
+export function SidebarSearchHeaderLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+    headerMenuItems = [], sidebarSearchPlaceholder = 'Search…', headerActions,
+}: SidebarSearchHeaderLayoutProps) {
+    const [query, setQuery] = useState('');
+    const filtered = query
+        ? navItems.filter((i) => i.title.toLowerCase().includes(query.toLowerCase()))
+        : navItems;
+
+    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>
+                <div className="px-3 py-2 border-b border-sidebar-border">
+                    <div className="relative">
+                        <Search className="absolute start-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                        <Input
+                            type="search"
+                            placeholder={sidebarSearchPlaceholder}
+                            className="ps-8 h-8 text-sm"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                        />
+                    </div>
+                </div>
+                <ScrollArea className="flex-1 py-2 px-2">
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {filtered.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>
+
+            <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 gap-4">
+                    {headerMenuItems.length > 0 && (
+                        <nav className="flex items-center gap-1 flex-1">
+                            {headerMenuItems.map((item, i) => (
+                                <a key={i} href={item.href} className={cn('px-3 py-2 text-sm rounded-md transition-colors hover:bg-accent', currentUrl.startsWith(item.href) && 'bg-accent text-accent-foreground')}>
+                                    {item.label}
+                                </a>
+                            ))}
+                        </nav>
+                    )}
+                    <div className="flex-1" />
+                    {headerActions}
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </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>
+        </div>
+    );
+}

package/src/layouts/app/SidebarSearchToolbarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Sidebar with search - variant of SidebarSearchHeaderLayout
+export { SidebarSearchHeaderLayout as SidebarSearchToolbarLayout } from './SidebarSearchHeaderLayout';

package/src/layouts/app/SidebarTabsDualLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-6: sidebar with primary tabs + dual menus (same as SidebarTabsLayout)
+export { SidebarTabsLayout as SidebarTabsDualLayout } from './SidebarTabsLayout';

package/src/layouts/app/SidebarTabsLayout.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } 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 { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+
+/**
+ * SidebarTabsLayout (demo6)
+ * Sidebar with primary tabs (section switcher) and secondary menu per tab.
+ * No top horizontal navbar.
+ */
+interface SidebarTabsLayoutProps extends BaseAppLayoutProps {
+    primaryNavItems?: NavItem[];
+    showToolbar?: boolean;
+}
+
+export function SidebarTabsLayout({
+    children, navItems = [], primaryNavItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+}: SidebarTabsLayoutProps) {
+    const [activeTab, setActiveTab] = useState(primaryNavItems[0]?.title ?? '');
+    const activeSection = primaryNavItems.find((p) => p.title === activeTab);
+    const sideItems = activeSection?.items ?? navItems;
+
+    return (
+        <div className="flex min-h-screen">
+            <aside className="flex shrink-0">
+                {/* Tab strip */}
+                {primaryNavItems.length > 0 && (
+                    <div className="w-16 flex flex-col items-center py-3 gap-1 border-e border-sidebar-border bg-sidebar">
+                        {logo && <a href={logoHref} className="mb-3 shrink-0">{logo}</a>}
+                        {primaryNavItems.map((item, i) => (
+                            <button
+                                key={i}
+                                onClick={() => setActiveTab(item.title)}
+                                className={cn('w-10 h-10 rounded-lg flex items-center justify-center text-xs font-medium transition-colors', activeTab === item.title ? 'bg-sidebar-accent text-sidebar-primary' : 'text-sidebar-foreground hover:bg-sidebar-accent/60')}
+                                title={item.title}
+                            >
+                                {item.title.slice(0, 2)}
+                            </button>
+                        ))}
+                    </div>
+                )}
+                {/* Secondary nav */}
+                <div className="w-52 flex flex-col border-e border-sidebar-border bg-sidebar">
+                    {!primaryNavItems.length && logo && (
+                        <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                            <a href={logoHref}>{logo}</a>
+                            {appName && <span className="text-sm font-semibold">{appName}</span>}
+                        </div>
+                    )}
+                    {activeTab && <div className="px-4 py-2 text-xs font-semibold text-sidebar-foreground border-b border-sidebar-border">{activeTab}</div>}
+                    <ScrollArea className="flex-1 py-2 px-2">
+                        <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                            <AccordionMenuGroup>
+                                {sideItems.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>
+                </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">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+                <Footer links={footerLinks} copyright={copyright} />
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/SidebarTreeLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Sidebar with search - variant of SidebarSearchHeaderLayout
+export { SidebarSearchHeaderLayout as SidebarTreeLayout } from './SidebarSearchHeaderLayout';

package/src/layouts/app/SplitNavbarLayout.tsx

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

package/src/layouts/app/SplitSidebarDashboardLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-4: split sidebar with dashboard/default menu variants (same structure as SplitSidebarLayout)
+export { SplitSidebarLayout as SplitSidebarDashboardLayout } from './SplitSidebarLayout';