@djangocfg/layouts 2.1.255 → 2.1.257

package/package.json

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

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

@@ -1,13 +1,13 @@
 /**
- * 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';
 
 import React, { ReactNode } from 'react';
 
-import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
+import { SidebarTrigger, useSidebar } from '@djangocfg/ui-nextjs/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 interface PrivateContentProps {
@@ -22,24 +22,42 @@ 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',
-  );
+  const { isMobile, openMobile } = useSidebar();
+
+  /**
+   * Space for fixed FAB + safe area so content does not sit under the button.
+   * Tighter when the mobile drawer is closed (FAB only). When the drawer is open, a bit more
+   * room avoids the first line sitting under the overlay edge.
+   */
+  const mobileFabClearance =
+    hasSidebar &&
+    (isMobile && !openMobile
+      ? 'max-md:pt-[max(3.75rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+      : 'max-md:pt-[max(4rem,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

@@ -48,9 +48,9 @@ function navDensityFromCount(n: number): NavDensity {
  * Nav rows use semantic sidebar tokens so light/dark follows ui-core theme vars.
  */
 const navItemClass = cn(
-  'border-0 font-normal shadow-none transition-colors',
-  'text-sidebar-foreground/70',
-  'data-[active=true]:font-medium data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+  'border-0 font-medium shadow-none transition-colors',
+  'text-sidebar-foreground/80',
+  'data-[active=true]:font-semibold data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
   'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
   'data-[active=true]:hover:bg-sidebar-accent',
   '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',
@@ -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}

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -33,9 +33,12 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { PublicLayoutProvider } from './context';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { PublicLayoutProvider, usePublicLayoutOptional } from './context';
+import type { PublicNavbarSurface } from './navbarTypes';
 
 export interface PublicLayoutProps {
   children: ReactNode;
@@ -48,36 +51,75 @@ export interface PublicLayoutProps {
    */
   navbar?: ReactNode;
   footer?: ReactNode;
+  /**
+   * When `auto` (default), `<main>` gets a small top offset from `PublicNavigation` surface
+   * (`floating` vs `flush`). Set `none` if the page controls spacing itself.
+   */
+  contentTopSpacing?: 'auto' | 'none';
+}
+
+function PublicMain({
+  children,
+  contentTopSpacing,
+}: {
+  children: ReactNode;
+  contentTopSpacing: 'auto' | 'none';
+}) {
+  const ctx = usePublicLayoutOptional();
+  const variant = ctx?.navbarSurface?.variant;
+
+  const topClass =
+    contentTopSpacing === 'none'
+      ? undefined
+      : !variant
+        ? 'pt-4 sm:pt-5'
+        : variant === 'floating'
+          ? 'pt-2 sm:pt-3 lg:pt-4'
+          : 'pt-1 sm:pt-2 lg:pt-3';
+
+  return (
+    <main className={cn('flex-1', topClass)}>
+      {children}
+    </main>
+  );
 }
 
 export function PublicLayout({
   children,
   navbar,
   footer,
+  contentTopSpacing = 'auto',
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [navbarSurface, setNavbarSurfaceState] = useState<PublicNavbarSurface | null>(null);
   const pathname = usePathname();
 
+  const setNavbarSurface = useCallback((surface: PublicNavbarSurface | null) => {
+    setNavbarSurfaceState(surface);
+  }, []);
+
   // Close mobile menu on route change
   useEffect(() => {
     setMobileMenuOpen(false);
   }, [pathname]);
 
-  const contextValue = useMemo(() => ({
-    mobileMenuOpen,
-    toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
-    closeMobileMenu: () => setMobileMenuOpen(false),
-  }), [
-    mobileMenuOpen,
-  ]);
+  const contextValue = useMemo(
+    () => ({
+      mobileMenuOpen,
+      toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
+      closeMobileMenu: () => setMobileMenuOpen(false),
+      navbarSurface,
+      setNavbarSurface,
+    }),
+    [mobileMenuOpen, navbarSurface, setNavbarSurface],
+  );
 
   return (
     <PublicLayoutProvider value={contextValue}>
       <div className="min-h-screen flex flex-col">
         {navbar ?? null}
 
-        {/* Main Content */}
-        <main className="flex-1">{children}</main>
+        <PublicMain contentTopSpacing={contentTopSpacing}>{children}</PublicMain>
 
         {footer ?? null}
       </div>

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

@@ -17,7 +17,7 @@ import { usePathnameWithoutLocale } from '../../../hooks';
 
 import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
-import { useFloatingPanel } from '../hooks';
+import { useMobileNavPanel } from '../hooks';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
 
@@ -39,7 +39,7 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
   const { isAuthenticated } = useAuth();
   const pathname = usePathnameWithoutLocale();
   const t = useAppT();
-  const { isRendered, isActive, onTransitionEnd } = useFloatingPanel({
+  const { mounted, visible } = useMobileNavPanel({
     isOpen: mobileMenuOpen,
     onClose: closeMobileMenu,
   });
@@ -61,7 +61,7 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
     return pathname === href || pathname.startsWith(`${href}/`);
   };
 
-  if (!isRendered) return null;
+  if (!mounted) return null;
 
   return (
     <>
@@ -73,16 +73,17 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           onClick={closeMobileMenu}
         />
       )}
+      {/* Outer shell must not capture taps when the panel is closed: with pointer-events-none on the
+          inner panel, events would otherwise hit this transparent fixed layer (z-1000) and block the page. */}
       <div
-        className="fixed inset-x-0 z-1000 lg:hidden px-4 sm:px-6 lg:px-8"
+        className="pointer-events-none fixed inset-x-0 z-1000 lg:hidden px-4 sm:px-6 lg:px-8"
         style={{ top: 'var(--public-navbar-mobile-drawer-top, 5rem)' }}
       >
         <div
-          onTransitionEnd={onTransitionEnd}
           className={`mx-auto w-full rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col 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'
+            visible
+              ? 'pointer-events-auto opacity-100 translate-y-0 scale-100'
+              : 'pointer-events-none opacity-0 -translate-y-2 scale-[0.985]'
           }`}
           style={{
             maxHeight: 'min(var(--public-navbar-mobile-drawer-max-height, calc(100dvh - 5rem - 12px)), calc(100dvh - 12px))',
@@ -101,7 +102,7 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
         )}
 
         {isAuthenticated && (
-          <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} />
+          <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} i18n={userMenu?.i18n} />
         )}
 
         {/* Navigation Items */}
@@ -112,7 +113,10 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
             </h3>
           </div>
           <div className="space-y-1">
-            {mobileNavigation.map((item) => (
+            {mobileNavigation.map((item) => {
+              const childItems = item.items ?? [];
+              const hasChildNav = childItems.length > 0;
+              return (
               <div key={item.href}>
                 <Link
                   href={item.href}
@@ -125,9 +129,9 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
                 >
                   {item.label}
                 </Link>
-                {item.items && item.items.length > 0 && (
+                {hasChildNav && (
                   <div className="ml-3 mt-1 space-y-1 border-l border-border/40 pl-3">
-                    {item.items.map((subItem) => (
+                    {childItems.map((subItem) => (
                       <Link
                         key={`${item.href}-${subItem.href}`}
                         href={subItem.href}
@@ -140,7 +144,8 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
                   </div>
                 )}
               </div>
-            ))}
+            );
+            })}
           </div>
         </div>
           </div>

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

@@ -6,11 +6,8 @@ import { PublicMobileDrawer } from './PublicMobileDrawer';
 import { PublicNavigation } from './PublicNavigation';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
-import type {
-  PublicDesktopDropdownRenderer,
-  PublicNavbarPosition,
-  PublicNavbarVariant,
-} from './PublicNavigation';
+import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
+import type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
 
 export interface PublicNavbarConfig {
   brand?: React.ReactNode;

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

@@ -8,7 +8,14 @@
 
 import { ChevronDown, Menu, X } from 'lucide-react';
 import Link from 'next/link';
-import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
@@ -22,11 +29,11 @@ import { usePathnameWithoutLocale } from '../../../hooks';
 
 import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
+import type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
 
-export type PublicNavbarVariant = 'floating' | 'flush';
-export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
+export type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
 
 export interface PublicDesktopDropdownRenderProps {
   item: NavigationItem;
@@ -131,6 +138,16 @@ export function PublicNavigation(props: PublicNavigationProps = {}) {
     }
   }, [isTabletOrBelow]);
 
+  const setNavbarSurface = context?.setNavbarSurface;
+
+  useLayoutEffect(() => {
+    if (!setNavbarSurface) return;
+    setNavbarSurface({ variant: navbarVariant, position: navbarPosition });
+    return () => {
+      setNavbarSurface(null);
+    };
+  }, [setNavbarSurface, navbarVariant, navbarPosition]);
+
   useEffect(() => {
     const updateDrawerViewportVars = () => {
       const root = document.documentElement;
@@ -297,7 +314,7 @@ export function PublicNavigation(props: PublicNavigationProps = {}) {
         className={navInnerClassName}
         style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
       >
-      <div className="w-full px-3 sm:px-4 lg:px-6">
+      <div className="w-full pl-6 pr-3 sm:px-4 lg:px-6">
         <div className="flex items-center justify-between py-3.5">
           {/* Logo */}
           {brand ? (
@@ -373,6 +390,7 @@ export function PublicNavigation(props: PublicNavigationProps = {}) {
                   variant="desktop"
                   groups={userMenu?.groups}
                   authPath={userMenu?.authPath}
+                  i18n={userMenu?.i18n}
                 />
               </>
             </div>

package/src/layouts/PublicLayout/context.tsx

@@ -2,10 +2,15 @@
 
 import React, { createContext, useContext } from 'react';
 
+import type { PublicNavbarSurface } from './navbarTypes';
+
 export interface PublicLayoutContextValue {
   mobileMenuOpen: boolean;
   toggleMobileMenu: () => void;
   closeMobileMenu: () => void;
+  /** Filled by `<PublicNavigation />` — drives default `main` top spacing. */
+  navbarSurface: PublicNavbarSurface | null;
+  setNavbarSurface: (surface: PublicNavbarSurface | null) => void;
 }
 
 const PublicLayoutContext = createContext<PublicLayoutContextValue | null>(null);

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

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

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/** Slightly above `transition-[transform,opacity] duration-[220ms]` in PublicMobileDrawer */
+const CLOSE_UNMOUNT_MS = 230;
+
+/**
+ * Keeps the mobile nav panel mounted briefly after `isOpen` becomes false so CSS can run the close transition,
+ * then unmounts — no reliance on `transitionend` (fragile with SPA navigation / Safari).
+ */
+export function useMobileNavPanel(options: { isOpen: boolean; onClose: () => void }) {
+  const { isOpen, onClose } = options;
+  const [mounted, setMounted] = useState(isOpen);
+  const [visible, setVisible] = useState(isOpen);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setMounted(true);
+      const id = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+      return () => cancelAnimationFrame(id);
+    }
+
+    setVisible(false);
+    closeTimerRef.current = setTimeout(() => {
+      setMounted((m) => (m ? false : m));
+      closeTimerRef.current = null;
+    }, CLOSE_UNMOUNT_MS);
+
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, onClose]);
+
+  return { mounted, visible };
+}

package/src/layouts/PublicLayout/index.ts

@@ -6,8 +6,11 @@ export { PublicLayout } from './PublicLayout';
 export type { PublicLayoutProps } from './PublicLayout';
 export { PublicNavigation, PublicMobileDrawer, PublicNavbar } from './components';
 export type {
+  PublicNavbarSurface,
   PublicNavbarVariant,
   PublicNavbarPosition,
+} from './navbarTypes';
+export type {
   PublicDesktopDropdownRenderer,
   PublicDesktopDropdownRenderProps,
 } from './components/PublicNavigation';

package/src/layouts/PublicLayout/navbarTypes.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared navbar surface types — used by PublicNavigation (registration) and PublicLayout (main offset).
+ */
+
+export type PublicNavbarVariant = 'floating' | 'flush';
+
+export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
+
+export interface PublicNavbarSurface {
+  variant: PublicNavbarVariant;
+  position: PublicNavbarPosition;
+}

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -30,6 +30,17 @@ import { LocaleSwitcher } from './LocaleSwitcher';
 import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
+/** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */
+function isPointerFromRadixOverlay(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof Element)) return false;
+  return Boolean(
+    target.closest('[data-radix-popper-content-wrapper]') ||
+      target.closest('[data-radix-dropdown-menu-content]') ||
+      target.closest('[data-radix-select-content]') ||
+      target.closest('[data-radix-popover-content]'),
+  );
+}
+
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
   i18n?: I18nLayoutConfig;
@@ -53,9 +64,11 @@ export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountPro
 
     const handlePointerDown = (event: PointerEvent) => {
       const root = accountRootRef.current;
-      if (root && !root.contains(event.target as Node)) {
-        setAccountOpen(false);
-      }
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (root?.contains(target)) return;
+      if (isPointerFromRadixOverlay(target)) return;
+      setAccountOpen(false);
     };
 
     document.addEventListener('pointerdown', handlePointerDown);

package/src/layouts/_components/UserMenu.tsx

@@ -30,7 +30,7 @@
 
 'use client';
 
-import { ArrowRight, LogOut } from 'lucide-react';
+import { ArrowRight, Globe, LogOut } from 'lucide-react';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
@@ -39,12 +39,26 @@ import { useAppT } from '@djangocfg/i18n';
 
 import { useLogout } from '../../hooks';
 import {
-    Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent,
-    DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
-    DropdownMenuTrigger
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  getLanguageFlag,
 } from '@djangocfg/ui-core/components';
 
-import type { UserMenuGroup } from '../types';
+import { LOCALE_LABELS } from './LocaleSwitcher';
+
+import type { UserMenuGroup, UserMenuLocaleConfig } from '../types';
 
 export interface UserMenuProps {
   /** Display variant */
@@ -53,12 +67,18 @@ export interface UserMenuProps {
   groups?: UserMenuGroup[];
   /** Auth page path (for sign in button) */
   authPath?: string;
+  /**
+   * Language switching inside this menu (desktop: submenu; mobile: button row).
+   * Prefer this over nesting `<LocaleSwitcher />` in the same dropdown — nested menus close each other.
+   */
+  i18n?: UserMenuLocaleConfig;
 }
 
 export function UserMenu({
   variant = 'desktop',
   groups,
   authPath = '/auth',
+  i18n,
 }: UserMenuProps) {
   const { user, isAuthenticated } = useAuth();
   const handleLogout = useLogout();
@@ -69,36 +89,43 @@ export function UserMenu({
     signIn: t('layouts.profile.login'),
     signOut: t('layouts.profile.signOut'),
     userMenu: t('layouts.profile.userMenu'),
+    language: t('layouts.profile.language'),
   }), [t]);
 
   React.useEffect(() => {
     setMounted(true);
   }, []);
 
-  // Prepare menu groups
-  // Must be before early return to maintain hook order
-  const menuGroups: UserMenuGroup[] = React.useMemo(() => {
-    const allGroups: UserMenuGroup[] = [];
+  /** Profile links only; sign out rendered separately so we can insert locale UI between. */
+  const profileGroups: UserMenuGroup[] = React.useMemo(() => {
+    if (groups && groups.length > 0) return [...groups];
+    return [];
+  }, [groups]);
 
-    // Add custom groups if provided
-    if (groups && groups.length > 0) {
-      allGroups.push(...groups);
-    }
+  const signOutItem = React.useMemo(
+    () => ({
+      label: labels.signOut,
+      onClick: handleLogout,
+      icon: LogOut,
+      variant: 'destructive' as const,
+    }),
+    [handleLogout, labels.signOut],
+  );
 
-    // Always add Sign Out at the end
-    allGroups.push({
-      items: [
-        {
-          label: labels.signOut,
-          onClick: handleLogout,
-          icon: LogOut,
-          variant: 'destructive',
-        },
-      ],
-    });
+  /** Prepared locale UI data — avoid `i18n && i18n.locales.length` chains in JSX. */
+  const localeMenu = React.useMemo(() => {
+    const codes = i18n?.locales;
+    if (!i18n || !codes?.length) return null;
+    return {
+      codes,
+      current: i18n.locale,
+      onChange: i18n.onLocaleChange,
+    };
+  }, [i18n]);
 
-    return allGroups;
-  }, [groups, handleLogout, labels.signOut]);
+  const hasProfileGroups = profileGroups.length > 0;
+
+  const localeLabel = (code: string) => LOCALE_LABELS[code] || code.toUpperCase();
 
   if (!mounted) {
     return null;
@@ -151,7 +178,7 @@ export function UserMenu({
           </div>
         </div>
         <div className="space-y-1">
-          {menuGroups.map((group, groupIndex) => (
+          {profileGroups.map((group, groupIndex) => (
             <div key={groupIndex}>
               {group.title && (
                 <div className="px-4 py-2">
@@ -195,6 +222,44 @@ export function UserMenu({
               })}
             </div>
           ))}
+          {localeMenu && (
+            <div className="border-t border-border/50 px-4 pt-3">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {labels.language}
+              </p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {localeMenu.codes.map((code) => {
+                  const flag = getLanguageFlag(code);
+                  const active = code === localeMenu.current;
+                  return (
+                    <button
+                      key={code}
+                      type="button"
+                      onClick={() => localeMenu.onChange(code)}
+                      className={`rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors ${
+                        active
+                          ? 'border-primary bg-accent text-foreground'
+                          : 'border-border/60 text-muted-foreground hover:bg-accent hover:text-foreground'
+                      }`}
+                    >
+                      {flag ? <span className="mr-1.5">{flag}</span> : null}
+                      {localeLabel(code)}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          <div>
+            <button
+              type="button"
+              onClick={signOutItem.onClick}
+              className="flex w-full items-center gap-3 rounded-sm px-4 py-3 text-left text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
+            >
+              <LogOut className="h-4 w-4" />
+              {signOutItem.label}
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -222,7 +287,7 @@ export function UserMenu({
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {menuGroups.map((group, groupIndex) => (
+        {profileGroups.map((group, groupIndex) => (
           <React.Fragment key={groupIndex}>
             {groupIndex > 0 && <DropdownMenuSeparator />}
             <DropdownMenuGroup>
@@ -267,6 +332,44 @@ export function UserMenu({
             </DropdownMenuGroup>
           </React.Fragment>
         ))}
+        {localeMenu && (
+          <>
+            {hasProfileGroups && <DropdownMenuSeparator />}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="cursor-default">
+                <Globe className="mr-2 h-4 w-4" />
+                <span>{labels.language}</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                {localeMenu.codes.map((code) => {
+                  const flag = getLanguageFlag(code);
+                  return (
+                    <DropdownMenuItem
+                      key={code}
+                      onSelect={() => {
+                        localeMenu.onChange(code);
+                      }}
+                      className={code === localeMenu.current ? 'bg-accent' : ''}
+                    >
+                      {flag ? <span className="mr-2">{flag}</span> : null}
+                      {localeLabel(code)}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onClick={signOutItem.onClick}
+            className="text-destructive focus:text-destructive"
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>{signOutItem.label}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/layouts/types/index.ts

@@ -36,6 +36,7 @@ export type {
   FooterConfig,
   UserMenuItem,
   UserMenuGroup,
+  UserMenuLocaleConfig,
   UserMenuConfig,
 } from './ui.types';
 

package/src/layouts/types/ui.types.ts

@@ -97,9 +97,18 @@ export interface UserMenuGroup {
   items: UserMenuItem[];
 }
 
+/** Optional locale switching inside the user menu (submenu on desktop; avoids nested `DropdownMenu` + portal issues). */
+export interface UserMenuLocaleConfig {
+  locale: string;
+  locales: string[];
+  onLocaleChange: (locale: string) => void;
+}
+
 export interface UserMenuConfig {
   /** Menu groups for authenticated users */
   groups?: UserMenuGroup[];
   /** Auth page path (for sign in button) */
   authPath?: string;
+  /** When set, language is rendered inside the user menu (not as a separate nested dropdown). */
+  i18n?: UserMenuLocaleConfig;
 }

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

@@ -1,61 +0,0 @@
-'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,
-  };
-}
-