@djangocfg/layouts 2.1.254 → 2.1.256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.254",
+  "version": "2.1.256",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.254",
-    "@djangocfg/centrifugo": "^2.1.254",
-    "@djangocfg/i18n": "^2.1.254",
-    "@djangocfg/monitor": "^2.1.254",
-    "@djangocfg/debuger": "^2.1.254",
-    "@djangocfg/ui-core": "^2.1.254",
-    "@djangocfg/ui-nextjs": "^2.1.254",
-    "@djangocfg/ui-tools": "^2.1.254",
+    "@djangocfg/api": "^2.1.256",
+    "@djangocfg/centrifugo": "^2.1.256",
+    "@djangocfg/i18n": "^2.1.256",
+    "@djangocfg/monitor": "^2.1.256",
+    "@djangocfg/debuger": "^2.1.256",
+    "@djangocfg/ui-core": "^2.1.256",
+    "@djangocfg/ui-nextjs": "^2.1.256",
+    "@djangocfg/ui-tools": "^2.1.256",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -109,15 +109,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.254",
-    "@djangocfg/i18n": "^2.1.254",
-    "@djangocfg/centrifugo": "^2.1.254",
-    "@djangocfg/monitor": "^2.1.254",
-    "@djangocfg/debuger": "^2.1.254",
-    "@djangocfg/typescript-config": "^2.1.254",
-    "@djangocfg/ui-core": "^2.1.254",
-    "@djangocfg/ui-nextjs": "^2.1.254",
-    "@djangocfg/ui-tools": "^2.1.254",
+    "@djangocfg/api": "^2.1.256",
+    "@djangocfg/i18n": "^2.1.256",
+    "@djangocfg/centrifugo": "^2.1.256",
+    "@djangocfg/monitor": "^2.1.256",
+    "@djangocfg/debuger": "^2.1.256",
+    "@djangocfg/typescript-config": "^2.1.256",
+    "@djangocfg/ui-core": "^2.1.256",
+    "@djangocfg/ui-nextjs": "^2.1.256",
+    "@djangocfg/ui-tools": "^2.1.256",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/components/PrivateContent.tsx

@@ -1,6 +1,6 @@
 /**
- * Private layout main column — optional mobile menu strip (`SidebarTrigger`) + scrollable area.
- * On viewports below `md`, the desktop sidebar is off-canvas; the trigger opens the `Sheet` from ui-nextjs sidebar.
+ * Private layout main column — on narrow viewports a fixed menu FAB (`SidebarTrigger`) + scrollable area.
+ * On viewports below `md`, the desktop sidebar is off-canvas; the trigger opens the `Drawer` from ui-nextjs sidebar.
  */
 
 'use client';
@@ -22,24 +22,34 @@ export function PrivateContent({
   padding = 'default',
   hasSidebar = true,
 }: PrivateContentProps) {
-  const mobileToolbarClass = cn(
-    'sticky top-0 z-40 flex shrink-0 items-center gap-2 border-b border-border/50 bg-background/95 py-2 pl-2 pr-3 backdrop-blur-md supports-[backdrop-filter]:bg-background/80',
-    'md:hidden',
-  );
+  /** Space for fixed FAB + safe area so content does not sit under the button. */
+  const mobileFabClearance =
+    hasSidebar &&
+    'max-md:pt-[max(4.75rem,calc(3.25rem+env(safe-area-inset-top,0px)))]';
+
   const scrollAreaClass = cn(
     'min-h-0 flex-1 overflow-y-auto',
     padding === 'default' && 'p-4 sm:p-6 lg:p-8',
+    mobileFabClearance,
   );
 
-  const mobileToolbar = hasSidebar ? (
-    <div className={mobileToolbarClass}>
-      <SidebarTrigger className="shrink-0" aria-label="Open menu" />
-    </div>
+  const mobileMenuFab = hasSidebar ? (
+    <SidebarTrigger
+      variant="secondary"
+      className={cn(
+        'fixed z-40 md:hidden',
+        'left-3 top-[max(0.75rem,env(safe-area-inset-top,0px))]',
+        'h-12 w-12 rounded-xl',
+        'border border-border shadow-md',
+        '[&_svg]:!h-6 [&_svg]:!w-6',
+        'touch-manipulation',
+      )}
+    />
   ) : null;
 
   return (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-      {mobileToolbar}
+      {mobileMenuFab}
       <div className={scrollAreaClass}>{children}</div>
     </div>
   );

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -1,6 +1,6 @@
 /**
  * Private sidebar: header (brand only when expanded; icon mode shows expand trigger only),
- * nav groups, account footer. Nav: muted inactive rows, pill active; density scales with item count.
+ * nav groups, account footer. Item-count density when **expanded**; collapsed rail always uses `default` metrics so icons match.
  */
 
 'use client';
@@ -32,11 +32,15 @@ import { LucideIcon } from '../../../components';
 import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
 import type { HeaderConfig, SidebarItem, SidebarConfig } from '../PrivateLayout';
 
+/** Few items → roomier rows; many items → tighter. Same breakpoints for demo, CarAPIS, etc. */
+const DENSITY_COMFORTABLE_MAX = 6;
+const DENSITY_DEFAULT_MAX = 14;
+
 type NavDensity = 'comfortable' | 'default' | 'compact';
 
 function navDensityFromCount(n: number): NavDensity {
-  if (n <= 6) return 'comfortable';
-  if (n <= 14) return 'default';
+  if (n <= DENSITY_COMFORTABLE_MAX) return 'comfortable';
+  if (n <= DENSITY_DEFAULT_MAX) return 'default';
   return 'compact';
 }
 
@@ -57,15 +61,13 @@ const DENSITY = {
   comfortable: {
     menu: 'gap-1.5',
     group: 'gap-2',
-    /** Tighter than default SidebarGroup `p-2` (doubles Y between groups). */
     groupPad: 'px-2 py-1',
     label:
       'h-7 uppercase text-[10px] font-light leading-none tracking-[0.14em] text-sidebar-foreground/40',
     buttonSize: 'lg' as const,
     iconClass: 'h-5 w-5',
     extraButton: 'rounded-lg !px-3',
-    /** Extra left inset so brand aligns with nav icons (group p-2 + button px). */
-    headerRowInset: 'pl-3',
+    headerRowInset: 'pl-2',
   },
   default: {
     menu: 'gap-1',
@@ -76,7 +78,7 @@ const DENSITY = {
     buttonSize: 'default' as const,
     iconClass: 'h-4 w-4',
     extraButton: 'rounded-lg',
-    headerRowInset: 'pl-2',
+    headerRowInset: 'pl-1.5',
   },
   compact: {
     menu: 'gap-0.5',
@@ -87,10 +89,13 @@ const DENSITY = {
     buttonSize: 'sm' as const,
     iconClass: 'h-3.5 w-3.5',
     extraButton: 'rounded-md !px-2',
-    headerRowInset: 'pl-2',
+    headerRowInset: 'pl-1.5',
   },
 } as const;
 
+/** Icon rail: always the same geometry — ignore comfortable/compact (larger/smaller rows only when expanded). */
+const RAIL_NAV = DENSITY.default;
+
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
   header?: HeaderConfig;
@@ -116,7 +121,9 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
   );
 
   const density = React.useMemo(() => navDensityFromCount(allItems.length), [allItems.length]);
-  const d = DENSITY[density];
+  const tierNav = DENSITY[density];
+  /** Expanded: follow item-count tier; collapsed rail: fixed `default` sizing so icons stay uniform. */
+  const menuNav = state === 'collapsed' ? RAIL_NAV : tierNav;
 
   const isActive = React.useCallback(
     (href: string) => {
@@ -134,7 +141,7 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
 
   const expanded = state === 'expanded';
 
-  const headerRowClass = cn('flex items-center gap-2', d.headerRowInset);
+  const headerRowClass = cn('flex items-center gap-2', tierNav.headerRowInset);
   const brandMark = header?.brandIcon ? (
     <LucideIcon icon={header.brandIcon} className="h-4 w-4 text-sidebar-primary-foreground" />
   ) : (
@@ -152,12 +159,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
     <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuEnd}</div>
   ) : null;
 
-  const sidebarContentClass = cn('gap-2', d.group);
+  const sidebarContentClass = cn('gap-2', menuNav.group);
 
   const renderedGroups = React.useMemo(() => {
-    const navButtonClass = cn(navItemClass, d.extraButton);
-    const groupLabelClass = cn('px-2', d.label);
-    const sidebarGroupClass = cn('gap-0', d.groupPad);
+    const navButtonClass = cn(navItemClass, menuNav.extraButton);
+    const groupLabelClass = cn('px-2', menuNav.label);
+    const sidebarGroupClass = cn('gap-0', menuNav.groupPad);
 
     return sidebar.groups.map((group) => {
       if (group.dynamic && group.items.length === 0) return null;
@@ -169,12 +176,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
             <SidebarMenuButton
               asChild
               isActive={isActive(item.href)}
-              size={d.buttonSize}
+              size={menuNav.buttonSize}
               tooltip={tooltipText}
               className={navButtonClass}
             >
               <Link href={item.href}>
-                {item.icon ? <LucideIcon icon={iconProp} className={d.iconClass} /> : null}
+                {item.icon ? <LucideIcon icon={iconProp} className={menuNav.iconClass} /> : null}
                 <span>{item.label}</span>
                 {item.badge ? <SidebarMenuBadge>{item.badge}</SidebarMenuBadge> : null}
               </Link>
@@ -187,12 +194,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
         <SidebarGroup key={group.label} className={sidebarGroupClass}>
           <SidebarGroupLabel className={groupLabelClass}>{group.label}</SidebarGroupLabel>
           <SidebarGroupContent>
-            <SidebarMenu className={d.menu}>{items}</SidebarMenu>
+            <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
       );
     });
-  }, [sidebar.groups, isActive, d]);
+  }, [sidebar.groups, isActive, menuNav]);
 
   const expandedHeader = (
     <div className={headerRowClass}>
@@ -203,7 +210,7 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
         <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">{brandMark}</div>
         <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{brandTitle}</span>
       </Link>
-      <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />
+      {!isMobile && <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />}
     </div>
   );
 
@@ -213,12 +220,32 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
     </div>
   );
 
-  const sidebarHeaderContent = expanded ? expandedHeader : collapsedHeader;
+  /** Mobile drawer: menu open/close only from the main column trigger — no duplicate toggle in the sheet. */
+  const mobileHeader = (
+    <div className="flex items-center gap-3">
+      <Link
+        href={homeHref}
+        className="flex min-w-0 flex-1 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
+      >
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">{brandMark}</div>
+        <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{brandTitle}</span>
+      </Link>
+    </div>
+  );
+
+  const sidebarHeaderContent = isMobile ? mobileHeader : expanded ? expandedHeader : collapsedHeader;
   const footerExtra = sidebar.footer ? <div className="mb-2">{sidebar.footer}</div> : null;
 
+  const sidebarHeaderClass = cn(
+    'pb-2',
+    isMobile
+      ? 'px-4 pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
+      : 'px-2 pt-3.5',
+  );
+
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="px-2 pt-2.5 pb-2">{sidebarHeaderContent}</SidebarHeader>
+      <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>
 
       <SidebarContent className={sidebarContentClass}>
         {menuStartSlot}