@djangocfg/layouts 2.1.249 → 2.1.252

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

@@ -8,48 +8,79 @@
 
 import { ChevronDown, Menu, X } from 'lucide-react';
 import Link from 'next/link';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import {
   Button,
 } from '@djangocfg/ui-core/components';
-// useIsMobile is used for conditional rendering
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 // cn is reserved for future conditional styling
 import { cn as _cn } from '@djangocfg/ui-core/lib';
+import { usePathnameWithoutLocale } from '../../../hooks';
 
 import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
 
+export type PublicNavbarVariant = 'floating' | 'flush';
+export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
+
+export interface PublicDesktopDropdownRenderProps {
+  item: NavigationItem;
+  isOpen: boolean;
+  isActive: boolean;
+  close: () => void;
+  defaultPopover: React.ReactNode;
+  defaultItems: React.ReactNode;
+}
+
+export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => React.ReactNode;
+
 interface PublicNavigationProps {
+  /** Custom brand node (full control over logo/text/link) */
+  brand?: ReactNode;
+  /** Brand link for default brand renderer */
+  brandHref?: string;
   logo?: string;
   siteName?: string;
   navigation?: NavigationItem[];
   userMenu?: UserMenuConfig;
   containerClassName?: string;
+  navbarVariant?: PublicNavbarVariant;
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  /** Max visible top-level desktop items before collapsing into "More" */
+  desktopMaxPrimaryItems?: number;
   mobileMenuOpen?: boolean;
   onMobileMenuToggle?: () => void;
 }
 
 export function PublicNavigation(props: PublicNavigationProps = {}) {
   const context = usePublicLayoutOptional();
-  const logo = props.logo ?? context?.logo;
-  const siteName = props.siteName ?? context?.siteName ?? 'App';
-  const navigation = props.navigation ?? context?.navigation ?? [];
-  const userMenu = props.userMenu ?? context?.userMenu;
-  const containerClassName = props.containerClassName ?? context?.containerClassName;
+  const brand = props.brand;
+  const brandHref = props.brandHref ?? '/';
+  const logo = props.logo;
+  const siteName = props.siteName ?? 'App';
+  const navigation = props.navigation ?? [];
+  const userMenu = props.userMenu;
+  const containerClassName = props.containerClassName;
+  const navbarVariant = props.navbarVariant ?? 'floating';
+  const navbarPosition = props.navbarPosition ?? 'sticky';
+  const renderDesktopDropdown = props.renderDesktopDropdown;
+  const desktopMaxPrimaryItems = Math.max(1, props.desktopMaxPrimaryItems ?? 7);
   const mobileMenuOpen = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
   const toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
   const { isAuthenticated: _isAuthenticated } = useAuth();
-  const isMobile = useIsMobile();
+  const isTabletOrBelow = useIsTabletOrBelow();
+  const pathname = usePathnameWithoutLocale();
   const t = useAppT();
   const [openDropdownKey, setOpenDropdownKey] = useState<string | null>(null);
   const openTimerRef = useRef<number | null>(null);
   const closeTimerRef = useRef<number | null>(null);
+  const navOuterRef = useRef<HTMLDivElement | null>(null);
 
   const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
   const desktopNavItemClass =
@@ -92,119 +123,250 @@ export function PublicNavigation(props: PublicNavigationProps = {}) {
     };
   }, []);
 
-  const navClass = 'sticky top-3 z-50 px-4 sm:px-6 lg:px-8';
+  useEffect(() => {
+    if (isTabletOrBelow) {
+      setOpenDropdownKey(null);
+      clearOpenTimer();
+      clearCloseTimer();
+    }
+  }, [isTabletOrBelow]);
+
+  useEffect(() => {
+    const updateDrawerViewportVars = () => {
+      const root = document.documentElement;
+      const navEl = navOuterRef.current;
+      if (!navEl) return;
+
+      const rect = navEl.getBoundingClientRect();
+      const top = Math.max(0, Math.round(rect.bottom + 8));
+      const viewportHeight = window.innerHeight;
+      const maxHeight = Math.max(240, viewportHeight - top - 12);
+
+      root.style.setProperty('--public-navbar-mobile-drawer-top', `${top}px`);
+      root.style.setProperty('--public-navbar-mobile-drawer-max-height', `${maxHeight}px`);
+    };
+
+    updateDrawerViewportVars();
+    const navEl = navOuterRef.current;
+    const observer = navEl ? new ResizeObserver(updateDrawerViewportVars) : null;
+    if (navEl && observer) observer.observe(navEl);
+    window.addEventListener('resize', updateDrawerViewportVars);
+    window.addEventListener('scroll', updateDrawerViewportVars, { passive: true });
+
+    return () => {
+      if (navEl && observer) observer.unobserve(navEl);
+      observer?.disconnect();
+      window.removeEventListener('resize', updateDrawerViewportVars);
+      window.removeEventListener('scroll', updateDrawerViewportVars);
+    };
+  }, [navbarPosition, navbarVariant, containerClassName]);
+
+  const navOuterClassName = (() => {
+    const positionClass =
+      navbarPosition === 'fixed'
+        ? 'fixed'
+        : navbarPosition === 'static'
+          ? 'static'
+          : 'sticky';
+
+    const topClass = navbarVariant === 'floating' ? 'top-3' : 'top-0';
+    const insetPaddingClass = navbarVariant === 'floating' ? 'px-3 sm:px-4 lg:px-6' : '';
+
+    return `${positionClass} ${topClass} inset-x-0 z-50 ${insetPaddingClass}`.trim().replace(/\s+/g, ' ');
+  })();
+
+  const navInnerClassName = (() => {
+    const base =
+      'mx-auto w-full border border-border/40 dark:border-border/70';
+
+    const visual =
+      navbarVariant === 'floating'
+        ? 'rounded-2xl shadow-[0_10px_28px_rgba(0,0,0,0.14)] dark:shadow-[0_10px_28px_rgba(0,0,0,0.22)]'
+        : 'rounded-none border-x-0 border-t-0 shadow-none';
+
+    return `${base} ${visual} ${containerClassName || ''}`.trim().replace(/\s+/g, ' ');
+  })();
+
+  const isActivePath = (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
+
+  const isGroupActive = (item: NavigationItem) => {
+    if (isActivePath(item.href)) return true;
+    if (!item.items) return false;
+    return item.items.some((subItem) => isActivePath(subItem.href));
+  };
+
+  const closeDropdown = () => setOpenDropdownKey(null);
+  const desktopPrimaryNavigation = navigation.slice(0, desktopMaxPrimaryItems);
+  const desktopOverflowNavigation = navigation.slice(desktopMaxPrimaryItems);
+
+  const renderDesktopNavItem = (item: NavigationItem) => {
+    if (item.items && item.items.length > 0) {
+      const dropdownKey = `${item.label}-${item.href}`;
+      const defaultItems = (
+        <>
+          {item.items.map((subItem) => (
+            <div key={`${item.label}-${subItem.href}`} className="rounded-md">
+              {subItem.external ? (
+                <a
+                  href={subItem.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
+                >
+                  {subItem.label}
+                </a>
+              ) : (
+                <Link
+                  href={subItem.href}
+                  className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
+                >
+                  {subItem.label}
+                </Link>
+              )}
+            </div>
+          ))}
+        </>
+      );
+
+      const defaultPopover = (
+        <div
+          className="absolute left-0 top-full mt-1 z-[1200] min-w-56 rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1 shadow-[0_10px_28px_rgba(0,0,0,0.22)]"
+          onMouseEnter={() => {
+            clearOpenTimer();
+            clearCloseTimer();
+          }}
+          onMouseLeave={() => scheduleClose(dropdownKey)}
+        >
+          {defaultItems}
+        </div>
+      );
+
+      const isOpen = openDropdownKey === dropdownKey;
+      const isActive = isGroupActive(item);
+      return (
+        <div
+          key={dropdownKey}
+          className="relative"
+          onMouseEnter={() => scheduleOpen(dropdownKey)}
+          onMouseLeave={() => scheduleClose(dropdownKey)}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            className={`group ${desktopNavItemClass} ${isOpen || isActive ? 'bg-accent/50 text-foreground' : ''}`}
+          >
+            <span>{item.label}</span>
+            <ChevronDown
+              className={`ml-1 h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+            />
+          </Button>
+
+          {isOpen && (
+            renderDesktopDropdown
+              ? renderDesktopDropdown({
+                item,
+                isOpen,
+                isActive,
+                close: closeDropdown,
+                defaultPopover,
+                defaultItems,
+              })
+              : defaultPopover
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <Link
+        key={item.href}
+        href={item.href}
+        className={`${desktopNavItemClass} ${isActivePath(item.href) ? 'bg-accent/50 text-foreground' : ''}`}
+      >
+        {item.label}
+      </Link>
+    );
+  };
 
   return (
-    <div className={navClass}>
+    <div ref={navOuterRef} className={navOuterClassName}>
       <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 || ''}`}
+        className={navInnerClassName}
         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-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}
-        >
+      <div className="w-full px-3 sm:px-4 lg:px-6">
+        <div className="flex items-center justify-between py-3.5">
           {/* Logo */}
-          {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-base">{siteName}</span>
-            </div>
+          {brand ? (
+            brand
           ) : (
-            <Link href="/" className="flex items-center gap-2">
+            <Link href={brandHref} className="flex items-center gap-1.5">
               {logo && (
-                <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
+                <img src={logo} alt={siteName} className="h-5.5 w-auto object-contain" />
               )}
-              <span className="font-bold text-base">{siteName}</span>
+              <span className="font-bold text-[15px]">{siteName}</span>
             </Link>
           )}
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-3">
-            {navigation.map((item) => {
-              if (item.items && item.items.length > 0) {
-                const dropdownKey = `${item.label}-${item.href}`;
-                return (
+          <div className="hidden lg:flex items-center gap-3">
+            {desktopPrimaryNavigation.map(renderDesktopNavItem)}
+            {desktopOverflowNavigation.length > 0 && (
+              <div
+                className="relative"
+                onMouseEnter={() => scheduleOpen('__overflow-more')}
+                onMouseLeave={() => scheduleClose('__overflow-more')}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={`group ${desktopNavItemClass} ${
+                    openDropdownKey === '__overflow-more' || desktopOverflowNavigation.some((item) => isGroupActive(item))
+                      ? 'bg-accent/50 text-foreground'
+                      : ''
+                  }`}
+                >
+                  <span>More</span>
+                  <ChevronDown
+                    className={`ml-1 h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${
+                      openDropdownKey === '__overflow-more' ? 'rotate-180' : ''
+                    }`}
+                  />
+                </Button>
+
+                {openDropdownKey === '__overflow-more' && (
                   <div
-                    key={dropdownKey}
-                    className="relative"
-                    onMouseEnter={() => scheduleOpen(dropdownKey)}
-                    onMouseLeave={() => scheduleClose(dropdownKey)}
+                    className="absolute right-0 top-full mt-1 z-[1200] min-w-56 rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1 shadow-[0_10px_28px_rgba(0,0,0,0.22)]"
+                    onMouseEnter={() => {
+                      clearOpenTimer();
+                      clearCloseTimer();
+                    }}
+                    onMouseLeave={() => scheduleClose('__overflow-more')}
                   >
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className={`group ${desktopNavItemClass} ${openDropdownKey === dropdownKey ? 'bg-accent/50 text-foreground' : ''}`}
-                    >
-                      <span>{item.label}</span>
-                      <ChevronDown
-                        className={`ml-1 h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${openDropdownKey === dropdownKey ? 'rotate-180' : ''}`}
-                      />
-                    </Button>
-
-                    {openDropdownKey === dropdownKey && (
-                      <div
-                        className="absolute left-0 top-full mt-1 z-[1200] min-w-56 rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1 shadow-[0_10px_28px_rgba(0,0,0,0.22)]"
-                        onMouseEnter={() => {
-                          clearOpenTimer();
-                          clearCloseTimer();
-                        }}
-                        onMouseLeave={() => scheduleClose(dropdownKey)}
-                      >
-                        {item.items.map((subItem) => (
-                          <div key={`${item.label}-${subItem.href}`} className="rounded-md">
-                            {subItem.external ? (
-                              <a
-                                href={subItem.href}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
-                              >
-                                {subItem.label}
-                              </a>
-                            ) : (
-                              <Link
-                                href={subItem.href}
-                                className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
-                              >
-                                {subItem.label}
-                              </Link>
-                            )}
-                          </div>
-                        ))}
+                    {desktopOverflowNavigation.map((item) => (
+                      <div key={`overflow-${item.href}`} className="rounded-md">
+                        <Link
+                          href={item.href}
+                          className={`block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40 ${
+                            isGroupActive(item) ? 'bg-accent/45 text-foreground' : ''
+                          }`}
+                        >
+                          {item.label}
+                        </Link>
                       </div>
-                    )}
+                    ))}
                   </div>
-                );
-              }
-
-              return (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  className={desktopNavItemClass}
-                >
-                  {item.label}
-                </Link>
-              );
-            })}
+                )}
+              </div>
+            )}
           </div>
 
           {/* User Menu / Actions */}
           <div className="flex items-center gap-4">
-            {!isMobile && (
+            <div className="hidden lg:flex">
               <>
                 {/* User Menu */}
                 <UserMenu
@@ -213,20 +375,19 @@ export function PublicNavigation(props: PublicNavigationProps = {}) {
                   authPath={userMenu?.authPath}
                 />
               </>
-            )}
+            </div>
 
             {/* Mobile Menu Button */}
-            {isMobile && (
-              <Button
-                variant="ghost"
-                size="icon"
-                aria-label={toggleMobileLabel}
-                data-mobile-menu-trigger="true"
-                className="pointer-events-none"
-              >
-                {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-              </Button>
-            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={toggleMobileLabel}
+              data-mobile-menu-trigger="true"
+              className="lg:hidden"
+              onClick={toggleMobileMenu}
+            >
+              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </Button>
           </div>
         </div>
       </div>

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

@@ -4,5 +4,6 @@
 
 export { PublicNavigation } from './PublicNavigation';
 export { PublicMobileDrawer } from './PublicMobileDrawer';
+export { PublicNavbar } from './PublicNavbar';
 export { PublicFooter } from './PublicFooter';
 

package/src/layouts/PublicLayout/context.tsx

@@ -2,16 +2,7 @@
 
 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;

package/src/layouts/PublicLayout/index.ts

@@ -4,7 +4,14 @@
 
 export { PublicLayout } from './PublicLayout';
 export type { PublicLayoutProps } from './PublicLayout';
-export { PublicNavigation, PublicMobileDrawer } from './components';
+export { PublicNavigation, PublicMobileDrawer, PublicNavbar } from './components';
+export type {
+  PublicNavbarVariant,
+  PublicNavbarPosition,
+  PublicDesktopDropdownRenderer,
+  PublicDesktopDropdownRenderProps,
+} from './components/PublicNavigation';
+export type { PublicNavbarConfig, PublicNavbarProps } from './components/PublicNavbar';
 export {
   PublicFooter,
   FooterProjectInfo,

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -0,0 +1,168 @@
+/**
+ * Account block: collapsible trigger + expanded card (email, links, footer row:
+ * sign out on the left, locale + theme toggles on the right).
+ */
+
+'use client';
+
+import { ChevronDown, LogOut } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useSidebar } from '@djangocfg/ui-nextjs/components';
+import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+
+import { useLogout } from '../../hooks';
+import { LocaleSwitcher } from './LocaleSwitcher';
+
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
+
+interface PrivateSidebarAccountProps {
+  header?: HeaderConfig;
+  i18n?: I18nLayoutConfig;
+}
+
+export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountProps) {
+  const { user } = useAuth();
+  const handleLogout = useLogout();
+  const t = useAppT();
+  const { state } = useSidebar();
+  const [open, setOpen] = React.useState(false);
+
+  const signOutLabel = t('layouts.profile.signOut');
+
+  const accountLinks = React.useMemo(() => {
+    if (!header?.groups?.length) return [];
+    return header.groups.flatMap((g) => g.items.filter((i) => i.href));
+  }, [header?.groups]);
+
+  if (!user) {
+    return null;
+  }
+
+  const displayName = user.display_username || user.email || 'User';
+  const userInitial = displayName.charAt(0).toUpperCase();
+  const userAvatar = user.avatar || '';
+  const narrow = state === 'collapsed';
+  const hasEmailOrLinks = Boolean(user.email) || accountLinks.length > 0;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="w-full min-w-0 border-t border-sidebar-border/45 pt-2">
+      <CollapsibleTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          aria-expanded={open}
+          aria-label={narrow ? 'Account' : undefined}
+          className={cn(
+            'h-auto min-h-10 w-full gap-2 rounded-md px-2 py-2 text-left hover:bg-sidebar-accent',
+            narrow && 'justify-center px-0',
+          )}
+        >
+          <Avatar className="h-8 w-8 shrink-0">
+            <AvatarImage src={userAvatar} alt={displayName} />
+            <AvatarFallback className="text-xs">{userInitial}</AvatarFallback>
+          </Avatar>
+          {!narrow && (
+            <>
+              <span className="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight">
+                {displayName}
+              </span>
+              <ChevronDown
+                className={cn(
+                  'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
+                  open && 'rotate-180',
+                )}
+                aria-hidden
+              />
+            </>
+          )}
+        </Button>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:hidden">
+        <div
+          className={cn(
+            'mt-2 flex flex-col gap-3 rounded-lg border border-zinc-200/90 bg-zinc-50/80 p-3 shadow-sm',
+            'dark:border-sidebar-border dark:bg-sidebar-accent/15',
+          )}
+        >
+          {user.email && (
+            <p className="truncate text-xs leading-snug text-muted-foreground">{user.email}</p>
+          )}
+
+          {accountLinks.length > 0 && (
+            <nav className="flex max-h-40 flex-col gap-0.5 overflow-y-auto" aria-label="Account">
+              {accountLinks.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href!}
+                    className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm leading-snug text-zinc-800 transition-colors hover:bg-zinc-200/70 dark:text-foreground dark:hover:bg-sidebar-accent"
+                  >
+                    {Icon && (
+                      <Icon className="h-4 w-4 shrink-0 text-zinc-500 dark:text-muted-foreground" />
+                    )}
+                    <span className="truncate">{item.label}</span>
+                  </Link>
+                );
+              })}
+            </nav>
+          )}
+
+          <div
+            className={cn(
+              'flex min-h-10 items-center gap-2',
+              hasEmailOrLinks && 'border-t border-border/50 pt-3 dark:border-sidebar-border/40',
+            )}
+          >
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-destructive hover:bg-destructive/10"
+            >
+              <LogOut className="h-4 w-4 shrink-0" />
+              <span className="truncate">{signOutLabel}</span>
+            </button>
+            <div
+              className="flex shrink-0 items-center gap-0.5 border-l border-border/50 pl-2 dark:border-sidebar-border/40"
+              role="group"
+              aria-label="Language and theme"
+            >
+              {i18n && (
+                <LocaleSwitcher
+                  locale={i18n.locale}
+                  locales={i18n.locales}
+                  onChange={i18n.onLocaleChange}
+                  variant="ghost"
+                  size="icon"
+                  showTriggerLabel={false}
+                  showIcon={false}
+                  className="h-8 w-8 shrink-0 text-base leading-none"
+                />
+              )}
+              <ThemeToggle
+                size="compact"
+                className="h-8 w-8 shrink-0 focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-offset-0"
+              />
+            </div>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}