@djangocfg/layouts 2.1.281 → 2.1.282

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.281",
+  "version": "2.1.282",
   "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.281",
-    "@djangocfg/centrifugo": "^2.1.281",
-    "@djangocfg/debuger": "^2.1.281",
-    "@djangocfg/i18n": "^2.1.281",
-    "@djangocfg/monitor": "^2.1.281",
-    "@djangocfg/ui-core": "^2.1.281",
-    "@djangocfg/ui-nextjs": "^2.1.281",
-    "@djangocfg/ui-tools": "^2.1.281",
+    "@djangocfg/api": "^2.1.282",
+    "@djangocfg/centrifugo": "^2.1.282",
+    "@djangocfg/debuger": "^2.1.282",
+    "@djangocfg/i18n": "^2.1.282",
+    "@djangocfg/monitor": "^2.1.282",
+    "@djangocfg/ui-core": "^2.1.282",
+    "@djangocfg/ui-nextjs": "^2.1.282",
+    "@djangocfg/ui-tools": "^2.1.282",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -110,15 +110,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.281",
-    "@djangocfg/centrifugo": "^2.1.281",
-    "@djangocfg/debuger": "^2.1.281",
-    "@djangocfg/i18n": "^2.1.281",
-    "@djangocfg/monitor": "^2.1.281",
-    "@djangocfg/typescript-config": "^2.1.281",
-    "@djangocfg/ui-core": "^2.1.281",
-    "@djangocfg/ui-nextjs": "^2.1.281",
-    "@djangocfg/ui-tools": "^2.1.281",
+    "@djangocfg/api": "^2.1.282",
+    "@djangocfg/centrifugo": "^2.1.282",
+    "@djangocfg/debuger": "^2.1.282",
+    "@djangocfg/i18n": "^2.1.282",
+    "@djangocfg/monitor": "^2.1.282",
+    "@djangocfg/typescript-config": "^2.1.282",
+    "@djangocfg/ui-core": "^2.1.282",
+    "@djangocfg/ui-nextjs": "^2.1.282",
+    "@djangocfg/ui-tools": "^2.1.282",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -66,9 +66,11 @@ export function NavDesktopItems({
     gap: 4,
   });
 
-  const effectiveCount = Math.min(visibleCount, maxVisible ?? visibleCount);
+  const effectiveCount = measured
+    ? Math.min(visibleCount, maxVisible ?? visibleCount)
+    : (maxVisible ?? items.length);
   const primaryItems = items.slice(0, effectiveCount);
-  const overflowItems = items.slice(effectiveCount);
+  const overflowItems = measured ? items.slice(effectiveCount) : [];
 
   const renderItem = (item: NavigationItem) => {
     if (item.items && item.items.length > 0) {
@@ -191,13 +193,8 @@ export function NavDesktopItems({
         ))}
       </div>
 
-      {/* Live row — only renders items that fit (hidden until first measurement). */}
-      <div
-        className={cn(
-          'flex min-w-0 items-center gap-1',
-          !measured && 'invisible',
-        )}
-      >
+      {/* Live row — renders all items on SSR, overflow splits after measurement. */}
+      <div className="flex min-w-0 items-center gap-1">
         {primaryItems.map(renderItem)}
 
         {hasOverflow && (

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -13,6 +13,7 @@ import React, { useMemo } from 'react';
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
+import { useBodyScrollLock, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
@@ -57,6 +58,8 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
     isOpen: mobileMenuOpen,
     onClose: closeMobileMenu,
   });
+  const isTabletOrBelow = useIsTabletOrBelow();
+  useBodyScrollLock(mobileMenuOpen && isTabletOrBelow);
 
   const labels = useMemo(() => ({
     menu: t('layouts.navigation.menu'),
@@ -96,7 +99,9 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
       )}
       <div
         className={cn(
-          'pointer-events-none fixed inset-x-0 z-1000 lg:hidden px-4 pb-3 sm:px-6 sm:pb-3 lg:px-8',
+          // Horizontal padding mirrors the navbar outer wrapper so the drawer
+          // panel aligns edge-to-edge with the navbar shell.
+          'pointer-events-none fixed inset-x-0 z-1000 lg:hidden px-3 pb-3 sm:px-4 sm:pb-3 lg:px-6',
         )}
         style={{
           top: 'var(--public-navbar-mobile-drawer-top, 5rem)',

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -219,7 +219,10 @@ export function NavbarShell(props: NavbarShellProps) {
 
   const outerCls = cn(
     outerClassName,
-    'inset-x-0 z-50',
+    'inset-x-0',
+    // Stay above the mobile drawer backdrop (z-[998]) and drawer (z-[1000])
+    // so the brand + close button remain visible and clickable.
+    mobileMenuOpen ? 'z-[1001]' : 'z-50',
     hideNavOnScroll && 'transition-transform duration-300 ease-in-out will-change-transform',
     hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
   );
@@ -287,6 +290,7 @@ export function NavbarShell(props: NavbarShellProps) {
           <div className={cn('flex items-center gap-4', h)}>
             <div className="min-w-0 shrink-0 flex items-center">{brandNode}</div>
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center gap-1">{desktopNavNode}</div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center gap-4">{actionsNode}</div>
           </div>
         );
@@ -295,6 +299,7 @@ export function NavbarShell(props: NavbarShellProps) {
           <div className={cn('flex items-center gap-4', h)}>
             <div className="shrink-0">{brandNode}</div>
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">{desktopNavNode}</div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center">{actionsNode}</div>
           </div>
         );
@@ -312,6 +317,7 @@ export function NavbarShell(props: NavbarShellProps) {
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">
               {desktopNavNode}
             </div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center">{actionsNode}</div>
           </div>
         );