@trackany-device/components 1.1.0 → 1.2.0

package/src/layouts/app/NavbarSidebarLayout.tsx

@@ -11,12 +11,11 @@ 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';
+import { Menu, X } 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[];
@@ -32,7 +31,8 @@ export function NavbarSidebarLayout({
     defaultSidebarCollapsed = false,
 }: NavbarSidebarLayoutProps) {
     const [collapsed, setCollapsed] = useState(defaultSidebarCollapsed);
-    const effectiveSidebarItems = sidebarItems.length > 0 ? sidebarItems : [];
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const effectiveSidebarItems = sidebarItems.length > 0 ? sidebarItems : navItems;
 
     return (
         <div className="flex flex-col min-h-screen">
@@ -40,6 +40,15 @@ export function NavbarSidebarLayout({
             <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 */}
+                        <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>
@@ -52,33 +61,69 @@ export function NavbarSidebarLayout({
 
             {/* 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>
+                {/* Desktop sidebar */}
+                <aside className={cn(
+                    'shrink-0 border-e border-sidebar-border bg-sidebar transition-all hidden lg:block',
+                    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>
+
+                {/* 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>
+                                        {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} />

package/src/layouts/app/SidebarDualMenuLayout.tsx

@@ -10,12 +10,11 @@ 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';
+import { Menu, X } 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[];
@@ -33,12 +32,13 @@ export function SidebarDualMenuLayout({
 }: SidebarDualMenuLayoutProps) {
     const [collapsed, setCollapsed] = useState(defaultSidebarCollapsed);
     const [activeSection, setActiveSection] = useState(primaryNavItems[0]?.title ?? '');
+    const [mobileOpen, setMobileOpen] = useState(false);
     const sectionItems = primaryNavItems.find((p) => p.title === activeSection)?.items ?? navItems;
 
     return (
         <div className="flex min-h-screen">
-            {/* Sidebar */}
-            <aside className="flex shrink-0">
+            {/* Desktop sidebar — always in-flow, hidden on mobile */}
+            <div className="hidden lg: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">
@@ -83,11 +83,54 @@ export function SidebarDualMenuLayout({
                     </ScrollArea>
                     {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
                 </div>
-            </aside>
+            </div>
+
+            {/* Mobile sidebar overlay — only rendered when open */}
+            {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-[280px] flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                        <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>}
+                            <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-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>}
+                    </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">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden mr-2"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
                     <div className="flex-1" />
                     <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
                 </header>

package/src/layouts/app/SidebarFixedLayout.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, type ReactNode } from 'react';
 import { cn } from '../../lib/utils';
-import type { BaseAppLayoutProps, AppLayoutUser } from './layout-types';
+import type { BaseAppLayoutProps } from './layout-types';
 import type { NavItem } from '../../types/navigation';
 import { Toolbar } from './partials/Toolbar';
 import { Footer } from './partials/Footer';
@@ -11,6 +11,7 @@ import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub,
 import { ScrollArea } from '../../components/ui/scroll-area';
 import { Menu, X } from 'lucide-react';
 import { Button } from '../../controls/Button';
+import '../../styles/layouts/sidebar-fixed.css';
 
 interface SidebarFixedLayoutProps extends BaseAppLayoutProps {
     showToolbar?: boolean;
@@ -95,12 +96,16 @@ export function SidebarFixedLayout({
                 '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 area — same height as the fixed header */}
+                <div className="sidebar-header h-[70px] flex items-center gap-3 px-4 shrink-0 border-b border-sidebar-border overflow-hidden">
                     {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 href={logoHref} className="default-logo flex items-center gap-2 min-w-0">
+                            <span className="shrink-0">{logo}</span>
+                            {appName && (
+                                <span className="sidebar-app-name text-sm font-semibold text-sidebar-foreground whitespace-nowrap">
+                                    {appName}
+                                </span>
+                            )}
                         </a>
                     )}
                 </div>
@@ -116,9 +121,9 @@ export function SidebarFixedLayout({
             )}
 
             {/* 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">
+            <div className="layout-wrapper flex flex-col flex-1 min-h-screen">
+                {/* Fixed header — h-[70px] is the Tailwind fallback; CSS var overrides at breakpoints */}
+                <header className="layout-header h-[70px] 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"
@@ -147,7 +152,7 @@ export function SidebarFixedLayout({
                 </header>
 
                 {/* Main content */}
-                <main className="grow pt-5" role="content">
+                <main className="grow" role="content">
                     {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
                         <Toolbar
                             title={title}

package/src/layouts/app/SidebarMinimalLayout.tsx

@@ -1,19 +1,21 @@
 'use client';
 
-import { cn } from '../../lib/utils';
+import { useState, type ReactNode } from 'react';
 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 { Menu, X } from 'lucide-react';
+import { Button } from '../../controls/Button';
 
 /**
  * SidebarMinimalLayout (demo8)
  * Clean single sidebar with no secondary panel. Sidebar has header + menu + footer area.
  */
 interface SidebarMinimalLayoutProps extends BaseAppLayoutProps {
-    sidebarFooter?: React.ReactNode;
+    sidebarFooter?: ReactNode;
     showToolbar?: boolean;
 }
 
@@ -24,9 +26,12 @@ export function SidebarMinimalLayout({
     onLogout, settingsUrl, logoutUrl, unreadCount = 0,
     footerLinks = [], copyright, showToolbar = true,
 }: SidebarMinimalLayoutProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
     return (
         <div className="flex min-h-screen">
-            <aside className="w-64 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+            {/* Desktop sidebar — always in-flow, hidden on mobile */}
+            <aside className="hidden lg:flex lg:w-64 flex-col border-e border-sidebar-border bg-sidebar shrink-0">
                 <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>}
@@ -52,8 +57,51 @@ export function SidebarMinimalLayout({
                 {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
             </aside>
 
+            {/* Mobile sidebar overlay — only rendered when open */}
+            {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-[280px] flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                        <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>}
+                            <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>
+                                    {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">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden mr-2"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
                     <div className="flex-1" />
                     <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
                 </header>

package/src/layouts/app/SidebarTabsLayout.tsx

@@ -9,6 +9,8 @@ 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 { Menu, X } from 'lucide-react';
+import { Button } from '../../controls/Button';
 
 /**
  * SidebarTabsLayout (demo6)
@@ -28,12 +30,14 @@ export function SidebarTabsLayout({
     footerLinks = [], copyright, showToolbar = true,
 }: SidebarTabsLayoutProps) {
     const [activeTab, setActiveTab] = useState(primaryNavItems[0]?.title ?? '');
+    const [mobileOpen, setMobileOpen] = useState(false);
     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">
+            {/* Desktop sidebar — always in-flow, hidden on mobile */}
+            <div className="hidden lg: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">
@@ -78,10 +82,52 @@ export function SidebarTabsLayout({
                         </AccordionMenu>
                     </ScrollArea>
                 </div>
-            </aside>
+            </div>
+
+            {/* Mobile sidebar overlay — only rendered when open */}
+            {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-[280px] flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                        <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">{appName}</span>}
+                            <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>
+                                    {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>
+                    </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">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden mr-2"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
                     <div className="flex-1" />
                     <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
                 </header>

package/src/layouts/app/SplitSidebarLayout.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';
@@ -9,6 +9,8 @@ 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 { Menu, X } from 'lucide-react';
+import { Button } from '../../controls/Button';
 
 /**
  * SplitSidebarLayout (demo4)
@@ -31,58 +33,104 @@ export function SplitSidebarLayout({
     onLogout, settingsUrl, logoutUrl, unreadCount = 0,
     footerLinks = [], copyright, showToolbar = true,
 }: SplitSidebarLayoutProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
     const sideItems = secondaryItems.length > 0 ? secondaryItems : navItems;
 
     return (
         <div className="flex min-h-screen">
-            {/* Primary sidebar (icon strip) */}
-            {primaryItems.length > 0 && (
-                <aside className="w-16 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col items-center py-3 gap-1">
-                    {logo && <a href={logoHref} className="mb-3">{logo}</a>}
-                    {primaryItems.map((item, i) => (
-                        <button
-                            key={i}
-                            onClick={() => {}}
-                            className={cn('w-10 h-10 flex items-center justify-center rounded-lg text-sidebar-foreground hover:bg-sidebar-accent transition-colors text-xs', activePrimary === item.title && 'bg-sidebar-accent')}
-                            title={item.title}
-                        >
-                            {item.title.slice(0, 2)}
-                        </button>
-                    ))}
+            {/* Desktop sidebar — always in-flow, hidden on mobile */}
+            <div className="hidden lg:flex shrink-0">
+                {/* Primary sidebar (icon strip) */}
+                {primaryItems.length > 0 && (
+                    <aside className="w-16 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col items-center py-3 gap-1">
+                        {logo && <a href={logoHref} className="mb-3">{logo}</a>}
+                        {primaryItems.map((item, i) => (
+                            <button
+                                key={i}
+                                onClick={() => {}}
+                                className={cn('w-10 h-10 flex items-center justify-center rounded-lg text-sidebar-foreground hover:bg-sidebar-accent transition-colors text-xs', activePrimary === item.title && 'bg-sidebar-accent')}
+                                title={item.title}
+                            >
+                                {item.title.slice(0, 2)}
+                            </button>
+                        ))}
+                    </aside>
+                )}
+
+                {/* Secondary sidebar (full nav) */}
+                <aside className="w-56 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col">
+                    {!primaryItems.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>
+                    )}
+                    <ScrollArea className="flex-1 py-3 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>
                 </aside>
-            )}
+            </div>
 
-            {/* Secondary sidebar (full nav) */}
-            <aside className="w-56 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col">
-                {!primaryItems.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>
-                )}
-                <ScrollArea className="flex-1 py-3 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>
-            </aside>
+            {/* Mobile sidebar overlay — only rendered when open */}
+            {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-[280px] flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                        <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">{appName}</span>}
+                            <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>
+                                    {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>
+                    </aside>
+                </>
+            )}
 
             {/* Main area */}
             <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">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden mr-2"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
                     <div className="flex-1" />
                     <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
                 </header>