@trackany-device/components 1.0.0 → 1.2.0

package/src/layouts/LayoutSwitcher.tsx

@@ -0,0 +1,220 @@
+/**
+ * Shared layout switcher for app stories.
+ *
+ * App layouts:  add `args: { layout: 'SidebarFixed' }` + `argTypes: LAYOUT_ARG_TYPE`,
+ *               then wrap content with <LayoutResolved {...args}>.
+ *
+ * Auth layouts: add `args: { authLayout: 'split' }` + `argTypes: AUTH_LAYOUT_ARG_TYPE`,
+ *               then wrap content with <AuthLayoutResolved variant={args.authLayout} ...>.
+ */
+import React from 'react';
+import logoUrl from '../assets/logo.png';
+import { AuthLayout } from '@trackany-device/components';
+import type { AuthLayoutVariant } from '@trackany-device/components';
+import {
+    TopNavLayout,
+    SidebarFixedLayout,
+    NavbarCollapsibleLayout,
+    SplitSidebarLayout,
+    NavbarSidebarLayout,
+    SidebarTabsLayout,
+    MegaMenuLayout,
+    SidebarMinimalLayout,
+    MegaMenuNavbarLayout,
+    SidebarDualMenuLayout,
+    WorkspaceSidebarLayout,
+} from '@trackany-device/components';
+import type { NavItem } from '@trackany-device/components';
+
+export type LayoutName =
+    | 'SidebarFixed'
+    | 'TopNav'
+    | 'NavbarCollapsible'
+    | 'SplitSidebar'
+    | 'NavbarSidebar'
+    | 'SidebarTabs'
+    | 'MegaMenu'
+    | 'SidebarMinimal'
+    | 'MegaMenuNavbar'
+    | 'SidebarDualMenu'
+    | 'WorkspaceSidebar';
+
+export const LAYOUT_OPTIONS: LayoutName[] = [
+    'SidebarFixed',
+    'TopNav',
+    'NavbarCollapsible',
+    'SplitSidebar',
+    'NavbarSidebar',
+    'SidebarTabs',
+    'MegaMenu',
+    'SidebarMinimal',
+    'MegaMenuNavbar',
+    'SidebarDualMenu',
+    'WorkspaceSidebar',
+];
+
+export const LAYOUT_ARG_TYPE = {
+    layout: {
+        control: 'select' as const,
+        options: LAYOUT_OPTIONS,
+        description: 'Swap the surrounding app layout',
+        table: { category: 'Layout' },
+    },
+};
+
+const DEFAULT_NAV: NavItem[] = [
+    { title: 'Dashboard',  href: '/dashboard' },
+    { title: 'Vehicles',   href: '/vehicles', items: [{ title: 'All Vehicles', href: '/vehicles' }, { title: 'Live Map', href: '/vehicles/map' }] },
+    { title: 'Drivers',    href: '/drivers' },
+    { title: 'Trips',      href: '/trips' },
+    { title: 'Incidents',  href: '/incidents' },
+    { title: 'Alerts',     href: '/alerts' },
+    { title: 'Reports',    href: '/reports' },
+    { title: 'Settings',   href: '/settings' },
+];
+
+const DEFAULT_USER = { name: 'Ahmad Faryab', email: 'ahmad@tad.io', avatar: '' };
+
+const DEFAULT_LOGO = <img src={logoUrl} alt="Logo" className="h-8 w-auto" />;
+
+type LayoutResolvedProps = {
+    layout?: LayoutName;
+    navItems?: NavItem[];
+    user?: typeof DEFAULT_USER;
+    title?: string;
+    currentUrl?: string;
+    logo?: React.ReactNode;
+    children: React.ReactNode;
+};
+
+export function LayoutResolved({
+    layout = 'SidebarFixed',
+    navItems = DEFAULT_NAV,
+    user = DEFAULT_USER,
+    title = 'Dashboard',
+    currentUrl = '/dashboard',
+    logo = DEFAULT_LOGO,
+    children,
+}: LayoutResolvedProps) {
+    const shared = { navItems, user, title, currentUrl, appName: 'Track Any Device', logo };
+
+    switch (layout) {
+        case 'TopNav':
+            return (
+                <TopNavLayout {...shared} logoHref="/" copyright="© 2026 Track Any Device" footerLinks={[{ label: 'Support', href: '#' }]}>
+                    {children}
+                </TopNavLayout>
+            );
+        case 'NavbarCollapsible':
+            return <NavbarCollapsibleLayout {...shared}>{children}</NavbarCollapsibleLayout>;
+        case 'SplitSidebar':
+            return <SplitSidebarLayout {...shared}>{children}</SplitSidebarLayout>;
+        case 'NavbarSidebar':
+            return <NavbarSidebarLayout {...shared}>{children}</NavbarSidebarLayout>;
+        case 'SidebarTabs':
+            return (
+                <SidebarTabsLayout
+                    {...shared}
+                    primaryNavItems={[
+                        { title: 'Fleet', href: '/fleet', items: navItems.slice(0, 4) },
+                        { title: 'Admin', href: '/admin', items: navItems.slice(4) },
+                    ]}
+                >
+                    {children}
+                </SidebarTabsLayout>
+            );
+        case 'MegaMenu':
+            return <MegaMenuLayout {...shared}>{children}</MegaMenuLayout>;
+        case 'SidebarMinimal':
+            return <SidebarMinimalLayout {...shared}>{children}</SidebarMinimalLayout>;
+        case 'MegaMenuNavbar':
+            return <MegaMenuNavbarLayout {...shared}>{children}</MegaMenuNavbarLayout>;
+        case 'SidebarDualMenu':
+            return (
+                <SidebarDualMenuLayout
+                    {...shared}
+                    primaryNavItems={[
+                        { title: 'Fleet', href: '/fleet', items: navItems.slice(0, 4) },
+                        { title: 'Admin', href: '/admin', items: navItems.slice(4) },
+                    ]}
+                >
+                    {children}
+                </SidebarDualMenuLayout>
+            );
+        case 'WorkspaceSidebar':
+            return (
+                <WorkspaceSidebarLayout
+                    {...shared}
+                    workspaces={[{ id: 'fleet', name: 'Track Any Device', href: '/' }, { id: 'admin', name: 'Admin', href: '/admin' }]}
+                    activeWorkspace="fleet"
+                >
+                    {children}
+                </WorkspaceSidebarLayout>
+            );
+        default:
+            return <SidebarFixedLayout {...shared}>{children}</SidebarFixedLayout>;
+    }
+}
+
+/** @deprecated Use LayoutResolved */
+export const StoryLayout = LayoutResolved;
+
+// ── Auth layout switcher ──────────────────────────────────────────────────────
+
+export const AUTH_LAYOUT_OPTIONS: AuthLayoutVariant[] = [
+    'split', 'branded', 'classic', 'centered', 'simple', 'card',
+];
+
+export const AUTH_LAYOUT_ARG_TYPE = {
+    authLayout: {
+        control: 'select' as const,
+        options: AUTH_LAYOUT_OPTIONS,
+        description: 'Swap the surrounding auth layout',
+        table: { category: 'Layout' },
+    },
+};
+
+type AuthLayoutResolvedProps = {
+    variant?: AuthLayoutVariant;
+    title?: string;
+    description?: string;
+    logo?: React.ReactNode;
+    appName?: string;
+    backgroundImage?: string;
+    backgroundImageDark?: string;
+    brandImage?: string;
+    brandImageDark?: string;
+    children: React.ReactNode;
+};
+
+export function AuthLayoutResolved({
+    variant = 'split',
+    title,
+    description,
+    logo = DEFAULT_LOGO,
+    appName = 'Track Any Device',
+    backgroundImage,
+    backgroundImageDark,
+    brandImage,
+    brandImageDark,
+    children,
+}: AuthLayoutResolvedProps) {
+    return (
+        <AuthLayout
+            variant={variant}
+            title={title}
+            description={description}
+            logo={logo}
+            appName={appName}
+            backgroundImage={backgroundImage}
+            backgroundImageDark={backgroundImageDark}
+            brandImage={brandImage}
+            brandImageDark={brandImageDark}
+        >
+            {children}
+        </AuthLayout>
+    );
+}
+
+/** @deprecated Use AuthLayoutResolved */
+export const AuthStoryLayout = AuthLayoutResolved;

package/src/layouts/app/MegaMenuLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { cn } from '../../lib/utils';
 import type { BaseAppLayoutProps } from './layout-types';
 import type { NavItem } from '../../types/navigation';
@@ -8,7 +8,7 @@ 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';
+import { ChevronDown, Menu, X } from 'lucide-react';
 
 /**
  * MegaMenuLayout (demo7)
@@ -25,48 +25,83 @@ export function MegaMenuLayout({
     onLogout, settingsUrl, logoutUrl, unreadCount = 0,
     footerLinks = [], copyright, showToolbar = true,
 }: MegaMenuLayoutProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
     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>}
+            <header className="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur-sm shrink-0 relative">
+                <div className="flex items-center h-[70px] px-4">
+                    <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) {
+                        {/* Desktop mega menu */}
+                        <nav className="hidden lg: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 (
-                                    <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>
+                                    <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>
                                 );
-                            }
-                            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>
+                            })}
+                        </nav>
+
+                        {/* Mobile hamburger */}
+                        <button
+                            className="lg:hidden flex items-center justify-center size-9 rounded-md hover:bg-accent transition-colors ml-auto mr-2"
+                            onClick={() => setMobileOpen((o) => !o)}
+                            aria-label="Toggle navigation"
+                        >
+                            {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                        </button>
 
-                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                        <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                    </div>
                 </div>
+
+                {/* Mobile menu dropdown — absolute so it overlays content without shifting layout */}
+                {mobileOpen && (
+                    <div className="lg:hidden absolute top-full left-0 right-0 z-50 border-b border-border bg-background shadow-md pb-2">
+                        {navItems.map((item, i) =>
+                            item.items && item.items.length > 0 ? (
+                                <div key={i}>
+                                    <div className="px-4 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">{item.title}</div>
+                                    {item.items.map((child, ci) => (
+                                        <a key={ci} href={child.href} className={cn('block px-6 py-2 text-sm hover:bg-accent transition-colors', isActive(child.href ?? '') && 'text-primary font-medium')} onClick={() => setMobileOpen(false)}>
+                                            {child.title}
+                                        </a>
+                                    ))}
+                                </div>
+                            ) : (
+                                <a key={i} href={item.href} className={cn('block px-4 py-2.5 text-sm hover:bg-accent transition-colors', isActive(item.href ?? '') && 'text-primary font-medium')} onClick={() => setMobileOpen(false)}>
+                                    {item.title}
+                                </a>
+                            ),
+                        )}
+                    </div>
+                )}
             </header>
 
             <main className="flex-1" role="content">

package/src/layouts/app/MegaMenuNavbarLayout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import type { BaseAppLayoutProps } from './layout-types';
 import type { NavItem } from '../../types/navigation';
 import { Navbar } from './partials/Navbar';
@@ -7,7 +8,7 @@ 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 { ChevronDown, Menu, Search, X } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../../controls/Button';
 
@@ -27,55 +28,90 @@ export function MegaMenuNavbarLayout({
     onLogout, settingsUrl, logoutUrl, unreadCount = 0,
     footerLinks = [], copyright, showToolbar = true, onSearchOpen,
 }: MegaMenuNavbarLayoutProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
     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>}
+            <header className="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur-sm shrink-0 relative">
+                <div className="flex items-center h-[70px] px-4">
+                    <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) {
+                        {/* Desktop mega menu */}
+                        <nav className="hidden lg: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 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 (
-                                    <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>
+                                    <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>
                                 );
-                            }
-                            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>
+                            })}
+                        </nav>
+
+                        {/* Mobile hamburger */}
+                        <button
+                            className="lg:hidden flex items-center justify-center size-9 rounded-md hover:bg-accent transition-colors ml-auto mr-1"
+                            onClick={() => setMobileOpen((o) => !o)}
+                            aria-label="Toggle navigation"
+                        >
+                            {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                        </button>
 
-                    {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} />
+                        {onSearchOpen && (
+                            <Button variant="ghost" size="sm" className="size-9 p-0 rounded-full hidden lg:flex" onClick={onSearchOpen}>
+                                <Search className="size-4" />
+                            </Button>
+                        )}
+                        <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                    </div>
                 </div>
+
+                {/* Mobile menu dropdown — absolute so it overlays content without shifting layout */}
+                {mobileOpen && (
+                    <div className="lg:hidden absolute top-full left-0 right-0 z-50 border-b border-border bg-background shadow-md pb-2">
+                        {navItems.map((item, i) =>
+                            item.items && item.items.length > 0 ? (
+                                <div key={i}>
+                                    <div className="px-4 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">{item.title}</div>
+                                    {item.items.map((child, ci) => (
+                                        <a key={ci} href={child.href} className={cn('block px-6 py-2 text-sm hover:bg-accent transition-colors', isActive(child.href ?? '') && 'text-primary font-medium')} onClick={() => setMobileOpen(false)}>
+                                            {child.title}
+                                        </a>
+                                    ))}
+                                </div>
+                            ) : (
+                                <a key={i} href={item.href} className={cn('block px-4 py-2.5 text-sm hover:bg-accent transition-colors', isActive(item.href ?? '') && 'text-primary font-medium')} onClick={() => setMobileOpen(false)}>
+                                    {item.title}
+                                </a>
+                            ),
+                        )}
+                    </div>
+                )}
             </header>
 
+            {/* Secondary navbar (desktop only — already hidden on mobile via Navbar itself) */}
+            <Navbar navItems={navItems} currentUrl={currentUrl} className="hidden lg:block" />
+
             <main className="flex-1" role="content">
                 {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
                     <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />

package/src/layouts/app/NavbarCollapsibleLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { cn } from '../../lib/utils';
 import type { BaseAppLayoutProps } from './layout-types';
 import { Navbar } from './partials/Navbar';
@@ -16,7 +16,6 @@ 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[];
@@ -32,6 +31,8 @@ export function NavbarCollapsibleLayout({
     defaultSidebarCollapsed = false,
 }: NavbarCollapsibleLayoutProps) {
     const [sidebarOpen, setSidebarOpen] = useState(!defaultSidebarCollapsed);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const hasSidebar = sidebarItems.length > 0;
 
     return (
         <div className="flex flex-col min-h-screen">
@@ -39,6 +40,17 @@ export function NavbarCollapsibleLayout({
             <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">
+                        {/* Mobile hamburger — only when sidebar is present */}
+                        {hasSidebar && (
+                            <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>
+                        )}
                         {logo && <a href={logoHref}>{logo}</a>}
                         {appName && <span className="text-sm font-medium hidden md:inline">{appName}</span>}
                     </div>
@@ -51,9 +63,13 @@ export function NavbarCollapsibleLayout({
 
             {/* Body: optional sidebar + content */}
             <div className="flex flex-1">
-                {sidebarItems.length > 0 && (
+                {hasSidebar && (
                     <>
-                        <aside className={cn('w-64 shrink-0 border-e border-border bg-sidebar hidden lg:block', !sidebarOpen && 'hidden')}>
+                        {/* Desktop sidebar */}
+                        <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>
@@ -73,6 +89,39 @@ export function NavbarCollapsibleLayout({
                                 </AccordionMenu>
                             </ScrollArea>
                         </aside>
+
+                        {/* Mobile sidebar overlay */}
+                        {mobileOpen && (
+                            <>
+                                <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setMobileOpen(false)} />
+                                <aside className="fixed inset-y-0 start-0 z-40 w-72 flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                                    <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 ml-auto" onClick={() => setMobileOpen(false)}>
+                                            <X className="size-4" />
+                                        </Button>
+                                    </div>
+                                    <ScrollArea className="flex-1 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">