@djangocfg/layouts 2.1.255 → 2.1.256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.255",
+  "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.255",
-    "@djangocfg/centrifugo": "^2.1.255",
-    "@djangocfg/i18n": "^2.1.255",
-    "@djangocfg/monitor": "^2.1.255",
-    "@djangocfg/debuger": "^2.1.255",
-    "@djangocfg/ui-core": "^2.1.255",
-    "@djangocfg/ui-nextjs": "^2.1.255",
-    "@djangocfg/ui-tools": "^2.1.255",
+    "@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.255",
-    "@djangocfg/i18n": "^2.1.255",
-    "@djangocfg/centrifugo": "^2.1.255",
-    "@djangocfg/monitor": "^2.1.255",
-    "@djangocfg/debuger": "^2.1.255",
-    "@djangocfg/typescript-config": "^2.1.255",
-    "@djangocfg/ui-core": "^2.1.255",
-    "@djangocfg/ui-nextjs": "^2.1.255",
-    "@djangocfg/ui-tools": "^2.1.255",
+    "@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

@@ -210,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>
   );
 
@@ -220,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-3.5 pb-2">{sidebarHeaderContent}</SidebarHeader>
+      <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>
 
       <SidebarContent className={sidebarContentClass}>
         {menuStartSlot}