@djangocfg/layouts 2.1.111 → 2.1.113

package/README.md

@@ -168,6 +168,75 @@ import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
 | `AdminLayout` | Admin panel layout |
 | `ProfileLayout` | User profile pages |
 
+### i18n Support
+
+Pass `i18n` config to AppLayout for locale switching in all layouts:
+
+```tsx
+import { AppLayout } from '@djangocfg/layouts';
+import { useLocaleSwitcher } from '@djangocfg/nextjs/i18n/client';
+
+function RootLayout({ children }) {
+  const { locale, locales, changeLocale } = useLocaleSwitcher();
+
+  return (
+    <AppLayout
+      // ... other configs
+      i18n={{
+        locale,
+        locales,
+        onLocaleChange: changeLocale,
+      }}
+    >
+      {children}
+    </AppLayout>
+  );
+}
+```
+
+The `LocaleSwitcher` component will automatically appear in PublicLayout and PrivateLayout headers.
+
+### LocaleSwitcher Component
+
+A presentational locale switcher component that can be used standalone:
+
+```tsx
+import { LocaleSwitcher } from '@djangocfg/layouts';
+
+// Basic usage (pass locale data via props)
+<LocaleSwitcher
+  locale="en"
+  locales={['en', 'ru', 'ko']}
+  onChange={(locale) => router.push(`/${locale}`)}
+/>
+
+// With custom labels and styling
+<LocaleSwitcher
+  locale={currentLocale}
+  locales={['en', 'ru', 'ko']}
+  onChange={handleLocaleChange}
+  labels={{ en: 'English', ru: 'Русский', ko: '한국어' }}
+  variant="outline"
+  size="sm"
+  showIcon={true}
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `locale` | `string` | - | Current locale code |
+| `locales` | `string[]` | - | Available locale codes |
+| `onChange` | `(locale: string) => void` | - | Callback when locale changes |
+| `labels` | `Record<string, string>` | Built-in | Custom labels for locales |
+| `showCode` | `boolean` | `false` | Show locale code with label |
+| `variant` | `'ghost' \| 'outline' \| 'default'` | `'ghost'` | Button variant |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'sm'` | Button size |
+| `showIcon` | `boolean` | `true` | Show globe icon |
+| `className` | `string` | - | Custom CSS class |
+
+> **Smart version:** For automatic locale detection with next-intl hooks, use `@djangocfg/nextjs/i18n/components` which wraps this component.
+
 > **Extension Layouts:** Additional layouts like `SupportLayout` and `PaymentsLayout` are available in extension packages:
 > - `@djangocfg/ext-support` - Support ticket layouts
 > - `@djangocfg/ext-payments` - Payment flow layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.111",
+  "version": "2.1.113",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,12 +74,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.111",
-    "@djangocfg/centrifugo": "^2.1.111",
-    "@djangocfg/i18n": "^2.1.111",
-    "@djangocfg/ui-core": "^2.1.111",
-    "@djangocfg/ui-nextjs": "^2.1.111",
-    "@djangocfg/ui-tools": "^2.1.111",
+    "@djangocfg/api": "^2.1.113",
+    "@djangocfg/centrifugo": "^2.1.113",
+    "@djangocfg/i18n": "^2.1.113",
+    "@djangocfg/ui-core": "^2.1.113",
+    "@djangocfg/ui-nextjs": "^2.1.113",
+    "@djangocfg/ui-tools": "^2.1.113",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -102,13 +102,13 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.111",
-    "@djangocfg/i18n": "^2.1.111",
-    "@djangocfg/centrifugo": "^2.1.111",
-    "@djangocfg/typescript-config": "^2.1.111",
-    "@djangocfg/ui-core": "^2.1.111",
-    "@djangocfg/ui-nextjs": "^2.1.111",
-    "@djangocfg/ui-tools": "^2.1.111",
+    "@djangocfg/api": "^2.1.113",
+    "@djangocfg/i18n": "^2.1.113",
+    "@djangocfg/centrifugo": "^2.1.113",
+    "@djangocfg/typescript-config": "^2.1.113",
+    "@djangocfg/ui-core": "^2.1.113",
+    "@djangocfg/ui-nextjs": "^2.1.113",
+    "@djangocfg/ui-tools": "^2.1.113",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -85,26 +85,33 @@ function determineLayoutMode(
   return 'public';
 }
 
+/** i18n configuration for locale switching */
+export interface I18nLayoutConfig {
+  /** Current locale */
+  locale: string;
+  /** Available locales */
+  locales: string[];
+  /** Callback when locale changes */
+  onLocaleChange: (locale: string) => void;
+}
+
+/** Layout configuration with component and enabled paths */
+interface LayoutConfig {
+  component: React.ComponentType<{ children: ReactNode; i18n?: I18nLayoutConfig }>;
+  enabledPath?: string | string[];
+}
+
 export interface AppLayoutProps {
   children: ReactNode;
 
   /** Public layout component with enabled paths */
-  publicLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  publicLayout?: LayoutConfig;
 
   /** Private layout component with enabled paths */
-  privateLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  privateLayout?: LayoutConfig;
 
   /** Admin layout component with enabled paths */
-  adminLayout?: {
-    component: React.ComponentType<{ children: ReactNode }>;
-    enabledPath?: string | string[];
-  };
+  adminLayout?: LayoutConfig;
 
   /**
    * Paths that render without any layout wrapper (fullscreen pages)
@@ -142,6 +149,9 @@ export interface AppLayoutProps {
 
   /** Push Notifications configuration */
   pushNotifications?: PushNotificationsConfig;
+
+  /** i18n configuration for locale switching (applies to all layouts) */
+  i18n?: I18nLayoutConfig;
 }
 
 /**
@@ -156,6 +166,7 @@ function AppLayoutContent({
   privateLayout,
   adminLayout,
   noLayoutPaths,
+  i18n,
 }: AppLayoutProps) {
   const pathname = usePathname();
 
@@ -188,7 +199,9 @@ function AppLayoutContent({
           return (
             <ClientOnly>
               <Suspense>
-                <privateLayout.component>{children}</privateLayout.component>
+                <privateLayout.component i18n={i18n}>
+                  {children}
+                </privateLayout.component>
               </Suspense>
             </ClientOnly>
           );
@@ -199,7 +212,9 @@ function AppLayoutContent({
         return (
           <ClientOnly>
             <Suspense>
-              <adminLayout.component>{children}</adminLayout.component>
+              <adminLayout.component i18n={i18n}>
+                {children}
+              </adminLayout.component>
             </Suspense>
           </ClientOnly>
         );
@@ -207,14 +222,20 @@ function AppLayoutContent({
       case 'private':
         if (!privateLayout) {
           if (publicLayout) {
-            return <publicLayout.component>{children}</publicLayout.component>;
+            return (
+              <publicLayout.component i18n={i18n}>
+                {children}
+              </publicLayout.component>
+            );
           }
           return children;
         }
         return (
           <ClientOnly>
             <Suspense>
-              <privateLayout.component>{children}</privateLayout.component>
+              <privateLayout.component i18n={i18n}>
+                {children}
+              </privateLayout.component>
             </Suspense>
           </ClientOnly>
         );
@@ -225,7 +246,11 @@ function AppLayoutContent({
         if (!publicLayout) {
           return children;
         }
-        return <publicLayout.component>{children}</publicLayout.component>;
+        return (
+          <publicLayout.component i18n={i18n}>
+            {children}
+          </publicLayout.component>
+        );
     }
   };
   

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -91,6 +91,8 @@ export interface HeaderConfig {
   authPath?: string;
 }
 
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+
 export interface PrivateLayoutProps {
   children: ReactNode;
   /** Sidebar configuration */
@@ -99,6 +101,8 @@ export interface PrivateLayoutProps {
   header?: HeaderConfig;
   /** Content padding */
   contentPadding?: 'none' | 'default';
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
 export function PrivateLayout({
@@ -106,6 +110,7 @@ export function PrivateLayout({
   sidebar,
   header,
   contentPadding = 'default',
+  i18n,
 }: PrivateLayoutProps) {
   const { isAuthenticated, isLoading, saveRedirectUrl } = useAuth();
   const router = useRouter();
@@ -145,7 +150,9 @@ export function PrivateLayout({
       {/* Main content area */}
       <SidebarInset className="flex flex-col">
         {/* Header with sidebar trigger */}
-        {(header || isAuthenticated) && <PrivateHeader header={header} />}
+        {(header || isAuthenticated) && (
+          <PrivateHeader header={header} i18n={i18n} />
+        )}
 
         {/* Page content */}
         <PrivateContent padding={contentPadding}>{children}</PrivateContent>

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

@@ -13,15 +13,19 @@ import { Separator } from '@djangocfg/ui-nextjs/components';
 import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 
+import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
 import { UserMenu } from '../../_components/UserMenu';
 
 import type { HeaderConfig } from '../PrivateLayout';
+import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
 
 interface PrivateHeaderProps {
   header?: HeaderConfig;
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
-export function PrivateHeader({ header }: PrivateHeaderProps) {
+export function PrivateHeader({ header, i18n }: PrivateHeaderProps) {
   const { user, logout } = useAuth();
 
   return (
@@ -43,6 +47,15 @@ export function PrivateHeader({ header }: PrivateHeaderProps) {
 
       {/* Right side */}
       <div className="flex items-center gap-3">
+        {/* Locale Switcher */}
+        {i18n && (
+          <LocaleSwitcher
+            locale={i18n.locale}
+            locales={i18n.locales}
+            onChange={i18n.onLocaleChange}
+          />
+        )}
+
         {/* Theme Toggle */}
         <ThemeToggle />
 

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -34,6 +34,8 @@ import { ReactNode, useEffect, useState } from 'react';
 import { PublicMobileDrawer, PublicNavigation } from './components';
 
 import type { NavigationItem, UserMenuConfig } from '../types';
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+
 export interface PublicLayoutProps {
   children: ReactNode;
   /** Logo path or URL */
@@ -44,6 +46,8 @@ export interface PublicLayoutProps {
   navigation?: NavigationItem[];
   /** User menu configuration (optional, uses useAuth() for authentication state) */
   userMenu?: UserMenuConfig;
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
 export function PublicLayout({
@@ -52,6 +56,7 @@ export function PublicLayout({
   siteName = 'App',
   navigation = [],
   userMenu,
+  i18n,
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const pathname = usePathname();
@@ -69,6 +74,7 @@ export function PublicLayout({
         siteName={siteName}
         navigation={navigation}
         userMenu={userMenu}
+        i18n={i18n}
         onMobileMenuClick={() => setMobileMenuOpen(true)}
       />
 

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

@@ -17,9 +17,11 @@ import { useIsMobile } from '@djangocfg/ui-core/hooks';
 import { 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;
@@ -27,6 +29,8 @@ interface PublicNavigationProps {
   navigation: NavigationItem[];
   userMenu?: UserMenuConfig;
   onMobileMenuClick: () => void;
+  /** i18n configuration for locale switching */
+  i18n?: I18nLayoutConfig;
 }
 
 export function PublicNavigation({
@@ -35,6 +39,7 @@ export function PublicNavigation({
   navigation,
   userMenu,
   onMobileMenuClick,
+  i18n,
 }: PublicNavigationProps) {
   const { isAuthenticated } = useAuth();
   const isMobile = useIsMobile();
@@ -75,6 +80,15 @@ 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 />
 

package/src/layouts/_components/LocaleSwitcher.tsx

@@ -0,0 +1,114 @@
+/**
+ * LocaleSwitcher Component (Presentational)
+ *
+ * "Dumb" locale switcher that receives data via props.
+ * For the "smart" version with next-intl hooks, use @djangocfg/nextjs/i18n/components
+ *
+ * @example
+ * ```tsx
+ * <LocaleSwitcher
+ *   locale="en"
+ *   locales={['en', 'ru', 'ko']}
+ *   onChange={(locale) => router.push(`/${locale}`)}
+ * />
+ * ```
+ */
+
+'use client';
+
+import { Globe } from 'lucide-react';
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@djangocfg/ui-core/components';
+
+// Default locale labels
+const DEFAULT_LABELS: Record<string, string> = {
+  en: 'English',
+  ru: 'Русский',
+  ko: '한국어',
+  zh: '中文',
+  ja: '日本語',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  pt: 'Português',
+  it: 'Italiano',
+  ar: 'العربية',
+  hi: 'हिन्दी',
+  tr: 'Türkçe',
+  pl: 'Polski',
+  nl: 'Nederlands',
+  uk: 'Українська',
+};
+
+export interface LocaleSwitcherProps {
+  /** Current locale */
+  locale: string;
+  /** Available locales */
+  locales: string[];
+  /** Callback when locale changes */
+  onChange: (locale: string) => void;
+  /** Custom labels for locales */
+  labels?: Record<string, string>;
+  /** Show locale code instead of/with label */
+  showCode?: boolean;
+  /** Button variant */
+  variant?: 'ghost' | 'outline' | 'default';
+  /** Button size */
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  /** Show icon */
+  showIcon?: boolean;
+  /** Custom className */
+  className?: string;
+}
+
+export function LocaleSwitcher({
+  locale,
+  locales,
+  onChange,
+  labels = {},
+  showCode = false,
+  variant = 'ghost',
+  size = 'sm',
+  showIcon = true,
+  className,
+}: LocaleSwitcherProps) {
+  const allLabels = { ...DEFAULT_LABELS, ...labels };
+
+  const getLabel = (code: string) => {
+    const label = allLabels[code] || code.toUpperCase();
+    if (showCode) {
+      return `${code.toUpperCase()} - ${label}`;
+    }
+    return label;
+  };
+
+  const currentLabel = showCode ? locale.toUpperCase() : getLabel(locale);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={variant} size={size} className={className}>
+          {showIcon && <Globe className="h-4 w-4 mr-1" />}
+          <span>{currentLabel}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {locales.map((code) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => onChange(code)}
+            className={code === locale ? 'bg-accent' : ''}
+          >
+            {getLabel(code)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/layouts/_components/index.ts

@@ -2,6 +2,9 @@
  * Shared Layout Components
  */
 
+export { LocaleSwitcher } from './LocaleSwitcher';
+export type { LocaleSwitcherProps } from './LocaleSwitcher';
+
 export { UserMenu } from './UserMenu';
 export type { UserMenuProps } from './UserMenu';
 

package/src/layouts/index.ts

@@ -11,8 +11,8 @@
 export * from './types';
 
 // Shared components
-export { UserMenu } from './_components';
-export type { UserMenuProps } from './_components';
+export { LocaleSwitcher, UserMenu } from './_components';
+export type { LocaleSwitcherProps, UserMenuProps } from './_components';
 
 // Smart layout router
 export * from './AppLayout';