@djangocfg/layouts 2.1.516 → 2.1.519

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.516",
+  "version": "2.1.519",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.516",
-    "@djangocfg/api": "^2.1.516",
-    "@djangocfg/centrifugo": "^2.1.516",
-    "@djangocfg/devtools": "^2.1.516",
-    "@djangocfg/i18n": "^2.1.516",
-    "@djangocfg/ui-core": "^2.1.516",
+    "@djangocfg/analytics": "^2.1.519",
+    "@djangocfg/api": "^2.1.519",
+    "@djangocfg/centrifugo": "^2.1.519",
+    "@djangocfg/devtools": "^2.1.519",
+    "@djangocfg/i18n": "^2.1.519",
+    "@djangocfg/ui-core": "^2.1.519",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.516",
-    "@djangocfg/api": "^2.1.516",
-    "@djangocfg/centrifugo": "^2.1.516",
-    "@djangocfg/devtools": "^2.1.516",
-    "@djangocfg/i18n": "^2.1.516",
-    "@djangocfg/typescript-config": "^2.1.516",
-    "@djangocfg/ui-core": "^2.1.516",
-    "@djangocfg/ui-tools": "^2.1.516",
+    "@djangocfg/analytics": "^2.1.519",
+    "@djangocfg/api": "^2.1.519",
+    "@djangocfg/centrifugo": "^2.1.519",
+    "@djangocfg/devtools": "^2.1.519",
+    "@djangocfg/i18n": "^2.1.519",
+    "@djangocfg/typescript-config": "^2.1.519",
+    "@djangocfg/ui-core": "^2.1.519",
+    "@djangocfg/ui-tools": "^2.1.519",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/PublicLayout/navbars/FloatingNavbar/FloatingNavbar.tsx

@@ -112,10 +112,13 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         controls={config.controls}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
-        shapeForState={({ scrolled, transparent }) =>
+        shapeForState={({ scrolled, transparent, menuOpen }) =>
           cn(
             transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
-            !transparent || scrolled
+            // Opaque unless we're a transparent bar sitting at the top with the
+            // mobile drawer closed. `menuOpen` forces the surface back so an
+            // open drawer never leaves the bar see-through over page content.
+            !transparent || scrolled || menuOpen
               ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
               : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
           )

package/src/layouts/PublicLayout/navbars/FlushNavbar/FlushNavbar.tsx

@@ -109,10 +109,13 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         controls={config.controls}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
-        shapeForState={({ scrolled, transparent }) =>
+        shapeForState={({ scrolled, transparent, menuOpen }) =>
           cn(
             transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
-            !transparent || scrolled
+            // Opaque unless we're a transparent bar sitting at the top with the
+            // mobile drawer closed. `menuOpen` forces the surface back so an
+            // open drawer never leaves the bar see-through over page content.
+            !transparent || scrolled || menuOpen
               ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
               : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
           )

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -162,10 +162,13 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         innerPadding={containerClassName}
-        shapeForState={({ scrolled }) =>
+        shapeForState={({ scrolled, menuOpen }) =>
           cn(
             'transition-[background-color,backdrop-filter] duration-200 ease-out',
-            transparent && !scrolled
+            // Transparent only at the top with the drawer closed. `menuOpen`
+            // forces the surface back so an open mobile drawer never leaves the
+            // bar see-through over page content.
+            transparent && !scrolled && !menuOpen
               ? 'bg-transparent backdrop-blur-0'
               : 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80',
           )

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

@@ -123,6 +123,13 @@ interface ShapeInputs {
   scrolled: boolean;
   /** Matches `transparent` flag at the source. */
   transparent: boolean;
+  /**
+   * true while the mobile drawer is open. A `transparent` bar MUST go opaque
+   * here regardless of scroll position: an open drawer means the brand + close
+   * button sit over page content, and a see-through bar leaves them floating on
+   * whatever is scrolled behind — the "navbar lost its background" bug.
+   */
+  menuOpen: boolean;
 }
 
 export interface NavbarShellProps {
@@ -302,7 +309,7 @@ function NavbarShellRaw(props: NavbarShellProps) {
     hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
   );
 
-  const surfaceCls = shapeForState?.({ scrolled, transparent });
+  const surfaceCls = shapeForState?.({ scrolled, transparent, menuOpen: mobileMenuOpen });
 
   const brandNode = (
     <div className="min-w-0 shrink-0 flex items-center">