@djangocfg/layouts 2.1.247 → 2.1.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.247",
+  "version": "2.1.248",
   "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.247",
-    "@djangocfg/centrifugo": "^2.1.247",
-    "@djangocfg/i18n": "^2.1.247",
-    "@djangocfg/monitor": "^2.1.247",
-    "@djangocfg/debuger": "^2.1.247",
-    "@djangocfg/ui-core": "^2.1.247",
-    "@djangocfg/ui-nextjs": "^2.1.247",
-    "@djangocfg/ui-tools": "^2.1.247",
+    "@djangocfg/api": "^2.1.248",
+    "@djangocfg/centrifugo": "^2.1.248",
+    "@djangocfg/i18n": "^2.1.248",
+    "@djangocfg/monitor": "^2.1.248",
+    "@djangocfg/debuger": "^2.1.248",
+    "@djangocfg/ui-core": "^2.1.248",
+    "@djangocfg/ui-nextjs": "^2.1.248",
+    "@djangocfg/ui-tools": "^2.1.248",
     "@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.247",
-    "@djangocfg/i18n": "^2.1.247",
-    "@djangocfg/centrifugo": "^2.1.247",
-    "@djangocfg/monitor": "^2.1.247",
-    "@djangocfg/debuger": "^2.1.247",
-    "@djangocfg/typescript-config": "^2.1.247",
-    "@djangocfg/ui-core": "^2.1.247",
-    "@djangocfg/ui-nextjs": "^2.1.247",
-    "@djangocfg/ui-tools": "^2.1.247",
+    "@djangocfg/api": "^2.1.248",
+    "@djangocfg/i18n": "^2.1.248",
+    "@djangocfg/centrifugo": "^2.1.248",
+    "@djangocfg/monitor": "^2.1.248",
+    "@djangocfg/debuger": "^2.1.248",
+    "@djangocfg/typescript-config": "^2.1.248",
+    "@djangocfg/ui-core": "^2.1.248",
+    "@djangocfg/ui-nextjs": "^2.1.248",
+    "@djangocfg/ui-tools": "^2.1.248",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -29,9 +29,10 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { PublicMobileDrawer, PublicNavigation } from './components';
+import { PublicLayoutProvider } from './context';
 
 import type { NavigationItem, UserMenuConfig } from '../types';
 import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
@@ -48,6 +49,8 @@ export interface PublicLayoutProps {
   userMenu?: UserMenuConfig;
   /** i18n configuration for locale switching */
   i18n?: I18nLayoutConfig;
+  /** Custom className for navbar container (e.g. "max-w-7xl mx-auto") */
+  navbarContainerClassName?: string;
 }
 
 export function PublicLayout({
@@ -57,6 +60,7 @@ export function PublicLayout({
   navigation = [],
   userMenu,
   i18n,
+  navbarContainerClassName,
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const pathname = usePathname();
@@ -66,33 +70,33 @@ export function PublicLayout({
     setMobileMenuOpen(false);
   }, [pathname]);
 
+  const contextValue = useMemo(() => ({
+    logo,
+    siteName,
+    navigation,
+    userMenu,
+    i18n,
+    containerClassName: navbarContainerClassName,
+    mobileMenuOpen,
+    toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
+    closeMobileMenu: () => setMobileMenuOpen(false),
+  }), [logo, siteName, navigation, userMenu, i18n, navbarContainerClassName, mobileMenuOpen]);
+
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Navigation */}
-      <PublicNavigation
-        logo={logo}
-        siteName={siteName}
-        navigation={navigation}
-        userMenu={userMenu}
-        i18n={i18n}
-        onMobileMenuClick={() => setMobileMenuOpen(true)}
-      />
+    <PublicLayoutProvider value={contextValue}>
+      <div className="min-h-screen flex flex-col">
+        {/* Navigation */}
+        <PublicNavigation />
 
-      {/* Mobile Drawer */}
-      <PublicMobileDrawer
-        isOpen={mobileMenuOpen}
-        onClose={() => setMobileMenuOpen(false)}
-        logo={logo}
-        siteName={siteName}
-        navigation={navigation}
-        userMenu={userMenu}
-      />
+        {/* Mobile Drawer */}
+        <PublicMobileDrawer />
 
-      {/* Main Content */}
-      <main className="flex-1">{children}</main>
+        {/* Main Content */}
+        <main className="flex-1">{children}</main>
 
-      {/* Footer - Add your own custom footer component here if needed */}
-    </div>
+        {/* Footer - Add your own custom footer component here if needed */}
+      </div>
+    </PublicLayoutProvider>
   );
 }
 

package/src/layouts/PublicLayout/components/PublicFooter/FooterMenuSections.tsx

@@ -16,23 +16,11 @@ export interface FooterMenuSectionsProps {
 export function FooterMenuSections({ menuSections }: FooterMenuSectionsProps) {
   if (menuSections.length === 0) return null;
 
-  // Gap in pixels (lg:gap-x-12 = 3rem = 48px)
-  const gapPx = 48;
-  const sectionCount = menuSections.length;
-  const totalGap = (sectionCount - 1) * gapPx;
-
-  // Each section = 25% of full width, minus proportional part of gap
-  const sectionWidth = `calc(25% - ${totalGap / sectionCount}px)`;
-
   return (
-    <div className="flex flex-1 gap-8 lg:gap-x-12 justify-end">
+    <div className="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-x-12">
       {menuSections.map((section) => (
-        <div
-          key={section.title}
-          className="flex-shrink-0 min-w-0"
-          style={{ width: sectionWidth }}
-        >
-          <h3 className="text-base font-semibold text-foreground mb-3">
+        <div key={section.title} className="min-w-0">
+          <h3 className="text-xs font-medium text-muted-foreground mb-3">
             {section.title}
           </h3>
           <ul className="space-y-2">
@@ -40,7 +28,7 @@ export function FooterMenuSections({ menuSections }: FooterMenuSectionsProps) {
               <li key={item.path}>
                 <Link
                   href={item.path}
-                  className="text-muted-foreground hover:text-primary text-sm transition-colors"
+                  className="text-sm text-foreground/90 hover:text-foreground transition-colors"
                 >
                   {item.label}
                 </Link>

package/src/layouts/PublicLayout/components/PublicFooter/FooterProjectInfo.tsx

@@ -48,13 +48,13 @@ export function FooterProjectInfo({
         ) : (
           <DjangoCFGLogo size={isMobile ? 24 : 32} className="text-foreground" />
         )}
-        <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-xl font-bold text-foreground'}>
+        <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-lg font-semibold text-foreground'}>
           {siteName}
         </span>
       </div>
 
       {description && (
-        <p className={isMobile ? 'text-muted-foreground text-sm leading-relaxed max-w-md mx-auto' : 'text-muted-foreground text-sm leading-relaxed'}>
+        <p className={isMobile ? 'text-muted-foreground text-sm leading-relaxed max-w-md mx-auto' : 'text-muted-foreground text-xs leading-relaxed max-w-xs'}>
           {description}
         </p>
       )}

package/src/layouts/PublicLayout/components/PublicFooter/PublicFooter.tsx

@@ -8,16 +8,68 @@
 'use client';
 
 import Link from 'next/link';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Laptop, Moon, Sun } from 'lucide-react';
 
+import { Button } from '@djangocfg/ui-core/components';
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
-import { FooterBottom } from './FooterBottom';
+import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
 import { FooterMenuSections } from './FooterMenuSections';
 import { FooterProjectInfo } from './FooterProjectInfo';
 
 import type { PublicFooterProps } from './types';
 
+function ThemeModeControl() {
+  const { theme, setTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const currentTheme = mounted ? (theme || 'system') : 'system';
+  const isActive = (value: 'system' | 'light' | 'dark') => currentTheme === value;
+  const baseItemClass = 'h-8 w-8 rounded-full p-0 text-muted-foreground hover:text-foreground';
+  const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
+
+  return (
+    <div className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/30 p-1">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={`${baseItemClass} ${isActive('system') ? activeItemClass : ''}`}
+        onClick={() => setTheme('system')}
+        aria-label="Use system theme"
+      >
+        <Laptop className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={`${baseItemClass} ${isActive('light') ? activeItemClass : ''}`}
+        onClick={() => setTheme('light')}
+        aria-label="Use light theme"
+      >
+        <Sun className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={`${baseItemClass} ${isActive('dark') ? activeItemClass : ''}`}
+        onClick={() => setTheme('dark')}
+        aria-label="Use dark theme"
+      >
+        <Moon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
 export function PublicFooter({
   siteName,
   description,
@@ -30,6 +82,7 @@ export function PublicFooter({
   credits: creditsProp,
   variant = 'full',
   containerClassName,
+  i18n,
 }: PublicFooterProps) {
   const isMobile = useIsMobile();
 
@@ -122,7 +175,7 @@ export function PublicFooter({
   if (isMobile) {
     return (
       <footer className="lg:hidden bg-background border-t border-border mt-auto">
-        <div className="w-full px-4 py-8">
+        <div className={`mx-auto px-4 py-8 ${containerClassName || 'w-full'}`}>
           <FooterProjectInfo
             siteName={siteName}
             description={description}
@@ -158,11 +211,32 @@ export function PublicFooter({
             </div>
           )}
 
-          <FooterBottom
-            copyright={copyright}
-            credits={credits}
-            variant="mobile"
-          />
+          <div className="border-t border-border mt-6 pt-4 space-y-3">
+            <div className="text-xs text-muted-foreground text-center">{copyright}</div>
+            <div className="text-xs text-muted-foreground text-center">
+              {credits.url ? (
+                <a href={credits.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                  {credits.text}
+                </a>
+              ) : (
+                credits.text
+              )}
+            </div>
+          </div>
+
+          <div className="mt-5 pt-4 border-t border-border/60 flex items-center justify-center gap-2">
+            <ThemeModeControl />
+            {i18n && (
+              <LocaleSwitcher
+                locale={i18n.locale}
+                locales={i18n.locales}
+                onChange={i18n.onLocaleChange}
+                variant="outline"
+                size="default"
+                className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
+              />
+            )}
+          </div>
         </div>
       </footer>
     );
@@ -170,9 +244,13 @@ export function PublicFooter({
 
   // Desktop Footer
   return (
-    <footer className="max-lg:hidden bg-background border-t border-border mt-auto">
-      <div className="w-full px-4 sm:px-6 lg:px-8 py-12">
-        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+    <footer
+      className="max-lg:hidden border-t border-border/50 mt-auto"
+      style={{ backgroundColor: 'hsl(var(--background) / 0.94)' }}
+    >
+      <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${containerClassName || 'w-full'}`}>
+        <div className="grid grid-cols-12 gap-10 lg:gap-14">
+          <div className="col-span-12 lg:col-span-4">
           <FooterProjectInfo
             siteName={siteName}
             description={description}
@@ -181,16 +259,63 @@ export function PublicFooter({
             socialLinks={socialLinks}
             variant="desktop"
           />
+          </div>
 
+          <div className="col-span-12 lg:col-span-8 lg:pl-8">
           <FooterMenuSections menuSections={menuSections} />
+          </div>
         </div>
 
-        <FooterBottom
-          copyright={copyright}
-          credits={credits}
-          links={links}
-          variant="desktop"
-        />
+        <div className="mt-12 pt-5 border-t border-border/60 flex items-center justify-between gap-8">
+          <div className="text-xs text-muted-foreground shrink-0">{copyright}</div>
+
+          <div className="flex-1 flex items-center justify-center min-w-0">
+            {credits.url ? (
+              <a href={credits.url} target="_blank" rel="noopener noreferrer" className="text-xs text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap">
+                {credits.text}
+              </a>
+            ) : (
+              <span className="text-xs text-muted-foreground whitespace-nowrap">{credits.text}</span>
+            )}
+          </div>
+
+          <div className="flex flex-col items-end gap-2 shrink-0">
+            {links.length > 0 && (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                {links.map((link) =>
+                  link.external ? (
+                    <a
+                      key={link.path}
+                      href={link.path}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:text-foreground transition-colors whitespace-nowrap"
+                    >
+                      {link.label}
+                    </a>
+                  ) : (
+                    <Link key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
+                      {link.label}
+                    </Link>
+                  )
+                )}
+              </div>
+            )}
+            <div className="flex items-center gap-2">
+              <ThemeModeControl />
+              {i18n && (
+                <LocaleSwitcher
+                  locale={i18n.locale}
+                  locales={i18n.locales}
+                  onChange={i18n.onLocaleChange}
+                  variant="outline"
+                  size="default"
+                  className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
+                />
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </footer>
   );

package/src/layouts/PublicLayout/components/PublicFooter/types.ts

@@ -3,6 +3,7 @@
  */
 
 import type { LucideIcon } from 'lucide-react';
+import type { I18nLayoutConfig } from '../../../AppLayout/AppLayout';
 
 export interface FooterLink {
   label: string;
@@ -56,4 +57,6 @@ export interface PublicFooterProps {
   variant?: 'full' | 'compact' | 'simple';
   /** Custom className for content container (e.g. "max-w-4xl" or "container") */
   containerClassName?: string;
+  /** i18n configuration for language switcher */
+  i18n?: I18nLayoutConfig;
 }

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -6,109 +6,114 @@
 
 'use client';
 
-import { X } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import {
-    Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle
-} from '@djangocfg/ui-core/components';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+import { Button } from '@djangocfg/ui-core/components';
 
 import { UserMenu } from '../../_components/UserMenu';
+import { usePublicLayout } from '../context';
+import { useFloatingPanel } from '../hooks';
 
-import type { NavigationItem, UserMenuConfig } from '../../types';
-
-interface PublicMobileDrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  logo?: string;
-  siteName: string;
-  navigation: NavigationItem[];
-  userMenu?: UserMenuConfig;
-}
-
-export function PublicMobileDrawer({
-  isOpen,
-  onClose,
-  logo,
-  siteName,
-  navigation,
-  userMenu,
-}: PublicMobileDrawerProps) {
-  const { isAuthenticated: _isAuthenticated } = useAuth();
+export function PublicMobileDrawer() {
+  const {
+    mobileMenuOpen,
+    closeMobileMenu,
+    navigation,
+    userMenu,
+    containerClassName,
+  } = usePublicLayout();
+  const { isAuthenticated } = useAuth();
   const t = useAppT();
+  const { isRendered, isActive, onTransitionEnd } = useFloatingPanel({
+    isOpen: mobileMenuOpen,
+    onClose: closeMobileMenu,
+  });
 
   const labels = useMemo(() => ({
-    closeMenu: t('layouts.mobile.closeMenu'),
     menu: t('layouts.navigation.menu'),
-    theme: t('layouts.theme.toggle'),
+    quickActions: 'Actions',
+    signIn: t('layouts.profile.login'),
   }), [t]);
 
+  if (!isRendered) return null;
+
   return (
-    <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()} direction="right">
-      <DrawerContent direction="right" className="w-80 lg:hidden">
-        {/* Header */}
-        <DrawerHeader className="flex flex-row items-center justify-between p-4 border-b border-border/30">
-          <div className="flex items-center gap-3">
-            {logo && (
-              <img
-                src={logo}
-                alt={`${siteName} Logo`}
-                className="h-6 w-auto object-contain"
-              />
-            )}
-            <DrawerTitle className="text-lg font-bold text-foreground">
-              {siteName}
-            </DrawerTitle>
+    <>
+      {mobileMenuOpen && (
+        <button
+          type="button"
+          aria-label={t('layouts.mobile.closeMenu')}
+          className="fixed inset-0 z-[998] lg:hidden bg-black/35 transition-opacity duration-200"
+          onClick={closeMobileMenu}
+        />
+      )}
+      <div className="fixed inset-x-0 top-20 z-1000 lg:hidden px-4 sm:px-6 lg:px-8">
+        <div
+          onTransitionEnd={onTransitionEnd}
+          className={`mx-auto w-full rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
+            isActive
+              ? 'opacity-100 translate-y-0 scale-100'
+              : 'opacity-0 -translate-y-2 scale-[0.985] pointer-events-none'
+          }`}
+          style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
+        >
+          {/* Content */}
+          <div className="max-h-[min(72vh,560px)] overflow-y-auto px-4 py-4 space-y-5">
+        {isAuthenticated && (
+          <div className="px-2">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              {labels.quickActions}
+            </h3>
           </div>
-          <DrawerClose className="p-2 rounded-sm transition-colors hover:bg-accent/50">
-            <X className="size-5" />
-            <span className="sr-only">{labels.closeMenu}</span>
-          </DrawerClose>
-        </DrawerHeader>
+        )}
 
-        {/* Scrollable Content */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-6">
-          {/* User Menu */}
-          <UserMenu
-            variant="mobile"
-            groups={userMenu?.groups}
-            authPath={userMenu?.authPath}
-          />
+        {isAuthenticated && (
+          <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} />
+        )}
 
-          {/* Navigation Items */}
+        {/* Navigation Items */}
+        <div className="space-y-2">
+          <div className="px-2">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              {labels.menu}
+            </h3>
+          </div>
           <div className="space-y-1">
-            <div className="px-4 py-2">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                {labels.menu}
-              </h3>
-            </div>
-            <div className="space-y-1">
-              {navigation.map((item) => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  className="block px-4 py-3 rounded-sm text-sm font-medium transition-colors text-foreground hover:bg-accent hover:text-accent-foreground"
-                >
-                  {item.label}
-                </Link>
-              ))}
-            </div>
+            {navigation.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={closeMobileMenu}
+                className="block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors text-foreground hover:bg-accent/70 hover:text-accent-foreground"
+              >
+                {item.label}
+              </Link>
+            ))}
           </div>
         </div>
 
-        {/* Theme Toggle - Fixed at bottom */}
-        <div className="border-t border-border/30 p-4">
-          <div className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm font-medium text-foreground">{labels.theme}</span>
-            <ThemeToggle />
+        {!isAuthenticated && (
+          <div className="pt-4 border-t border-border/50">
+            <Link
+              href={userMenu?.authPath || '/auth'}
+              onClick={closeMobileMenu}
+              className="block"
+            >
+              <Button className="w-full justify-between rounded-lg h-11">
+                <span>{labels.signIn}</span>
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+            </Link>
+          </div>
+        )}
           </div>
         </div>
-      </DrawerContent>
-    </Drawer>
+      </div>
+    </>
   );
 }
 

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -6,7 +6,7 @@
 
 'use client';
 
-import { Menu } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
@@ -17,53 +17,64 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
 // cn is reserved for future conditional styling
 import { cn as _cn } from '@djangocfg/ui-core/lib';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 
-import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
 import { UserMenu } from '../../_components/UserMenu';
-
-import type { NavigationItem, UserMenuConfig } from '../../types';
-import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
-
-interface PublicNavigationProps {
-  logo?: string;
-  siteName: string;
-  navigation: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  onMobileMenuClick: () => void;
-  /** i18n configuration for locale switching */
-  i18n?: I18nLayoutConfig;
-}
-
-export function PublicNavigation({
-  logo,
-  siteName,
-  navigation,
-  userMenu,
-  onMobileMenuClick,
-  i18n,
-}: PublicNavigationProps) {
+import { usePublicLayout } from '../context';
+
+export function PublicNavigation() {
+  const {
+    logo,
+    siteName,
+    navigation,
+    userMenu,
+    containerClassName,
+    mobileMenuOpen,
+    toggleMobileMenu,
+  } = usePublicLayout();
   const { isAuthenticated: _isAuthenticated } = useAuth();
   const isMobile = useIsMobile();
   const t = useAppT();
 
   const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
 
-  // Nav class (background blur with opacity 0.8)
-  // bg-background/80 - doesnt work in tailwind4
-  const navClass = 'sticky top-0 w-full z-50 border-b bg-background';
+  const navClass = 'sticky top-3 z-50 px-4 sm:px-6 lg:px-8';
 
   return (
-    <nav className={navClass} style={{ backgroundColor: 'hsl(var(--background) / 0.6)', backdropFilter: 'blur(10px)' }}>
+    <div className={navClass}>
+      <nav
+        className={`mx-auto w-full rounded-2xl border border-border/40 dark:border-border/70 shadow-[0_10px_28px_rgba(0,0,0,0.14)] dark:shadow-[0_10px_28px_rgba(0,0,0,0.22)] ${containerClassName || ''}`}
+        style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
+      >
       <div className="w-full px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between py-4">
+        <div
+          className="flex items-center justify-between py-3.5"
+          onClick={isMobile ? toggleMobileMenu : undefined}
+          onKeyDown={isMobile ? (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              toggleMobileMenu();
+            }
+          } : undefined}
+          role={isMobile ? 'button' : undefined}
+          tabIndex={isMobile ? 0 : undefined}
+          aria-label={isMobile ? toggleMobileLabel : undefined}
+        >
           {/* Logo */}
-          <Link href="/" className="flex items-center gap-2">
-            {logo && (
-              <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
-            )}
-            <span className="font-bold text-lg">{siteName}</span>
-          </Link>
+          {isMobile ? (
+            <div className="flex items-center gap-2">
+              {logo && (
+                <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
+              )}
+              <span className="font-bold text-lg">{siteName}</span>
+            </div>
+          ) : (
+            <Link href="/" className="flex items-center gap-2">
+              {logo && (
+                <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
+              )}
+              <span className="font-bold text-lg">{siteName}</span>
+            </Link>
+          )}
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center gap-6">
@@ -82,18 +93,6 @@ export function PublicNavigation({
           <div className="flex items-center gap-4">
             {!isMobile && (
               <>
-                {/* Locale Switcher */}
-                {i18n && (
-                  <LocaleSwitcher
-                    locale={i18n.locale}
-                    locales={i18n.locales}
-                    onChange={i18n.onLocaleChange}
-                  />
-                )}
-
-                {/* Theme Toggle */}
-                <ThemeToggle />
-
                 {/* User Menu */}
                 <UserMenu
                   variant="desktop"
@@ -108,16 +107,18 @@ export function PublicNavigation({
               <Button
                 variant="ghost"
                 size="icon"
-                onClick={onMobileMenuClick}
                 aria-label={toggleMobileLabel}
+                data-mobile-menu-trigger="true"
+                className="pointer-events-none"
               >
-                <Menu className="h-5 w-5" />
+                {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
               </Button>
             )}
           </div>
         </div>
       </div>
-    </nav>
+      </nav>
+    </div>
   );
 }
 

package/src/layouts/PublicLayout/context.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { NavigationItem, UserMenuConfig } from '../types';
+
+export interface PublicLayoutContextValue {
+  logo?: string;
+  siteName: string;
+  navigation: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  i18n?: I18nLayoutConfig;
+  containerClassName?: string;
+  mobileMenuOpen: boolean;
+  toggleMobileMenu: () => void;
+  closeMobileMenu: () => void;
+}
+
+const PublicLayoutContext = createContext<PublicLayoutContextValue | null>(null);
+
+export function PublicLayoutProvider({
+  value,
+  children,
+}: {
+  value: PublicLayoutContextValue;
+  children: React.ReactNode;
+}) {
+  return <PublicLayoutContext.Provider value={value}>{children}</PublicLayoutContext.Provider>;
+}
+
+export function usePublicLayout() {
+  const context = useContext(PublicLayoutContext);
+  if (!context) {
+    throw new Error('usePublicLayout must be used within PublicLayoutProvider');
+  }
+  return context;
+}
+

package/src/layouts/PublicLayout/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFloatingPanel } from './useFloatingPanel';
+

package/src/layouts/PublicLayout/hooks/useFloatingPanel.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+interface UseFloatingPanelOptions {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function useFloatingPanel({
+  isOpen,
+  onClose,
+}: UseFloatingPanelOptions) {
+  const [isRendered, setIsRendered] = useState(isOpen);
+  const [isActive, setIsActive] = useState(isOpen);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsRendered(true);
+      if (rafRef.current) window.cancelAnimationFrame(rafRef.current);
+      rafRef.current = window.requestAnimationFrame(() => {
+        setIsActive(true);
+      });
+      return;
+    }
+
+    if (!isRendered) return;
+    setIsActive(false);
+  }, [isOpen, isRendered]);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) window.cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, onClose]);
+
+  const onTransitionEnd = (event: React.TransitionEvent<HTMLElement>) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.propertyName !== 'transform') return;
+    if (!isOpen && !isActive) {
+      setIsRendered(false);
+    }
+  };
+
+  return {
+    isRendered,
+    isActive,
+    onTransitionEnd,
+  };
+}
+

package/src/layouts/_components/UserMenu.tsx

@@ -30,7 +30,7 @@
 
 'use client';
 
-import { LogOut } from 'lucide-react';
+import { ArrowRight, LogOut } from 'lucide-react';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
@@ -108,11 +108,15 @@ export function UserMenu({
     // Guest user - show sign in button
     if (variant === 'mobile') {
       return (
-        <Link href={authPath}>
-          <Button variant="default" className="w-full">
-            {labels.signIn}
-          </Button>
-        </Link>
+        <div className="pt-4 border-t border-border/50">
+          <Link
+            href={authPath}
+            className="group flex items-center justify-between rounded-lg px-2 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
+          >
+            <span>{labels.signIn}</span>
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+          </Link>
+        </div>
       );
     }
     return (