@djangocfg/layouts 2.1.264 → 2.1.267

package/src/layouts/ProfileLayout/context.tsx

@@ -1,31 +1,123 @@
 'use client';
 
-import React, { createContext, useCallback, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 
-export type ProfileStep = 'main' | 'delete-account';
+import { useAppT } from '@djangocfg/i18n';
+import { toast } from '@djangocfg/ui-core/hooks';
+import { useAuth } from '@djangocfg/api/auth';
+
+import { profileLogger } from '../../utils/logger';
+import { useLogout } from '../../hooks';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ProfileLabels {
+  title: string;
+  personalInfo: string;
+  work: string;
+  security: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  company: string;
+  position: string;
+  addFirstName: string;
+  addLastName: string;
+  addPhone: string;
+  addCompany: string;
+  addPosition: string;
+  signOut: string;
+  deleteAccount: string;
+  profileUpdated: string;
+  failedToUpdate: string;
+  notAuthenticated: string;
+  pleaseLogIn: string;
+  loading: string;
+  save: string;
+  saving: string;
+  cancel: string;
+}
 
 interface ProfileContextValue {
-  step: ProfileStep;
-  setStep: (step: ProfileStep) => void;
-  back: () => void;
+  labels: ProfileLabels;
+  onLogout: () => void;
+  onFieldSave: (field: string, value: string) => Promise<void>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ProfileContext = createContext<ProfileContextValue | null>(null);
+
+export const useProfileContext = (): ProfileContextValue => {
+  const ctx = useContext(ProfileContext);
+  if (!ctx) throw new Error('useProfileContext must be used within ProfileProvider');
+  return ctx;
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ProfileProviderProps {
+  children: React.ReactNode;
+  title?: string;
+  onUnauthenticated?: () => void;
 }
 
-const ProfileContext = createContext<ProfileContextValue>({
-  step: 'main',
-  setStep: () => {},
-  back: () => {},
-});
+export const ProfileProvider: React.FC<ProfileProviderProps> = ({
+  children,
+  title,
+}) => {
+  const { updateProfile } = useAuth();
+  const t = useAppT();
+  const onLogout = useLogout();
 
-export const ProfileProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [step, setStep] = useState<ProfileStep>('main');
+  const labels = useMemo<ProfileLabels>(() => ({
+    title: title || t('layouts.profilePage.title'),
+    personalInfo: t('layouts.profilePage.personalInfo'),
+    work: t('layouts.profilePage.work'),
+    security: t('layouts.profilePage.security'),
+    firstName: t('layouts.profilePage.firstName'),
+    lastName: t('layouts.profilePage.lastName'),
+    phone: t('layouts.profilePage.phone'),
+    company: t('layouts.profilePage.company'),
+    position: t('layouts.profilePage.position'),
+    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
+    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
+    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
+    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
+    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
+    signOut: t('layouts.profilePage.signOut'),
+    deleteAccount: t('layouts.profilePage.deleteAccount'),
+    profileUpdated: t('layouts.profilePage.profileUpdated'),
+    failedToUpdate: t('layouts.profilePage.failedToUpdate'),
+    notAuthenticated: t('layouts.profilePage.notAuthenticated'),
+    pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
+    loading: t('ui.states.loading'),
+    save: t('layouts.profilePage.save'),
+    saving: t('layouts.profilePage.saving'),
+    cancel: t('layouts.profilePage.cancel'),
+  }), [t, title]);
 
-  const back = useCallback(() => setStep('main'), []);
+  const onFieldSave = useCallback(async (field: string, value: string) => {
+    try {
+      await updateProfile({ [field]: value });
+      toast.success(labels.profileUpdated);
+    } catch (error: unknown) {
+      profileLogger.error('Profile update error:', error);
+      const apiErr = error as { response?: Record<string, string[]> };
+      toast.error(apiErr?.response?.[field]?.[0] || labels.failedToUpdate);
+      throw error;
+    }
+  }, [updateProfile, labels]);
 
   return (
-    <ProfileContext.Provider value={{ step, setStep, back }}>
+    <ProfileContext.Provider value={{ labels, onLogout, onFieldSave }}>
       {children}
     </ProfileContext.Provider>
   );
 };
-
-export const useProfileContext = () => useContext(ProfileContext);

package/src/layouts/ProfileLayout/index.ts

@@ -1,3 +1,3 @@
 export { ProfileLayout } from './ProfileLayout';
-export type { } from './ProfileLayout';
+export type { ProfileLayoutProps, ProfileTab, ProfileSlots } from './ProfileLayout';
 

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -53,6 +53,20 @@ export interface PublicLayoutProps {
    */
   navbar?: ReactNode;
   footer?: ReactNode;
+  /**
+   * Optional background layer rendered behind navbar and content.
+   * Use `position: fixed; inset: 0; pointer-events: none` (or similar) on the element
+   * so it fills the viewport without affecting layout flow.
+   *
+   * @example
+   * ```tsx
+   * backgroundSlot={
+   *   <div className="fixed inset-0 -z-10 pointer-events-none"
+   *        style={{ background: 'radial-gradient(ellipse 60% 50% at 10% 0%, violet, transparent)' }} />
+   * }
+   * ```
+   */
+  backgroundSlot?: ReactNode;
   /**
    * When `auto` (default), `<main>` gets a small top offset from `PublicNavigation` surface
    * (`floating` vs `flush`). Set `none` if the page controls spacing itself.
@@ -105,6 +119,7 @@ export function PublicLayout({
   children,
   navbar,
   footer,
+  backgroundSlot,
   contentTopSpacing = 'auto',
   contentBottomSpacing = 'auto',
 }: PublicLayoutProps) {
@@ -134,6 +149,9 @@ export function PublicLayout({
 
   return (
     <PublicLayoutProvider value={contextValue}>
+      {/* Background slot — renders behind everything, including the sticky navbar */}
+      {backgroundSlot ?? null}
+
       <div className="min-h-screen flex flex-col">
         {navbar ?? null}
 

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+import React from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+
+import { UserMenu } from '../../_components/UserMenu';
+import type { UserMenuConfig } from '../../types';
+
+interface NavActionsProps {
+  userMenu?: UserMenuConfig;
+  mobileMenuOpen: boolean;
+  onMobileMenuToggle: () => void;
+  toggleMobileLabel: string;
+  /** When true, mobile trigger is always visible (not hidden on lg+). Used for `split` layout. */
+  forceShowMobileTrigger?: boolean;
+}
+
+export function NavActions({
+  userMenu,
+  mobileMenuOpen,
+  onMobileMenuToggle,
+  toggleMobileLabel,
+  forceShowMobileTrigger = false,
+}: NavActionsProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <div className="hidden lg:flex">
+        <UserMenu
+          variant="desktop"
+          groups={userMenu?.groups}
+          authPath={userMenu?.authPath}
+          i18n={userMenu?.i18n}
+        />
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={toggleMobileLabel}
+        data-mobile-menu-trigger="true"
+        className={forceShowMobileTrigger ? 'rounded-full' : 'lg:hidden rounded-full'}
+        onClick={onMobileMenuToggle}
+      >
+        {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import Link from 'next/link';
+import React, { type ReactNode } from 'react';
+
+interface NavBrandProps {
+  brand?: ReactNode;
+  brandHref?: string;
+}
+
+export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
+  if (brand == null || brand === '' || brand === false) return null;
+
+  if (typeof brand === 'string') {
+    return (
+      <Link
+        href={brandHref}
+        className="font-bold text-[15px] text-foreground hover:opacity-90 transition-opacity"
+      >
+        {brand}
+      </Link>
+    );
+  }
+
+  return <>{brand}</>;
+}

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

@@ -0,0 +1,207 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { NavigationItem } from '../../types';
+import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
+import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
+
+interface NavDesktopItemsProps {
+  primaryItems: NavigationItem[];
+  overflowItems: NavigationItem[];
+  isActivePath: (href: string) => boolean;
+  isGroupActive: (item: NavigationItem) => boolean;
+  dropdown: UseDropdownMenuReturn;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+}
+
+const navItemCls = cn(
+  'inline-flex min-h-9 items-center justify-center gap-1 rounded-full border-0 px-4 py-1.5 text-sm font-medium',
+  'ring-0 focus-visible:ring-0',
+  'text-foreground/90 transition-colors',
+  'hover:bg-accent/55 hover:text-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
+);
+
+const navItemActiveCls =
+  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none';
+
+const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
+
+function subMenuLinkCls(active: boolean) {
+  return cn(
+    'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-full border-0 px-4 py-2 text-sm font-medium transition-colors',
+    'hover:bg-accent/55',
+    active
+      ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted/90 dark:shadow-none'
+      : 'border-0 text-foreground/90',
+  );
+}
+
+const popoverCls =
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
+
+export function NavDesktopItems({
+  primaryItems,
+  overflowItems,
+  isActivePath,
+  isGroupActive,
+  dropdown,
+  renderDesktopDropdown,
+}: NavDesktopItemsProps) {
+  const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
+
+  const renderItem = (item: NavigationItem) => {
+    if (item.items && item.items.length > 0) {
+      const key = `${item.label}-${item.href}`;
+      const isOpen = openDropdownKey === key;
+      const isActive = isGroupActive(item);
+
+      const defaultItems = (
+        <>
+          {item.items.map((sub) => {
+            const subActive = isActivePath(sub.href);
+            return (
+              <div key={`${item.label}-${sub.href}`} className="rounded-full">
+                {sub.external ? (
+                  <a
+                    href={sub.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={subMenuLinkCls(subActive)}
+                  >
+                    <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
+                  </a>
+                ) : (
+                  <Link href={sub.href} className={subMenuLinkCls(subActive)}>
+                    <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
+                  </Link>
+                )}
+              </div>
+            );
+          })}
+        </>
+      );
+
+      const defaultPopover = (
+        <div
+          className={popoverCls}
+          onMouseEnter={() => { scheduleOpen(key); }}
+          onMouseLeave={() => scheduleClose(key)}
+        >
+          {defaultItems}
+        </div>
+      );
+
+      return (
+        <div
+          key={key}
+          className="relative"
+          onMouseEnter={() => scheduleOpen(key)}
+          onMouseLeave={() => scheduleClose(key)}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
+              navItemCls,
+              (isOpen || isActive) && navItemActiveCls,
+              isOpen && 'border-0 dark:border dark:border-border',
+            )}
+          >
+            <span className={labelCls} title={item.label}>{item.label}</span>
+            <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+              <ChevronDown
+                className={cn(
+                  'size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform',
+                  isOpen && 'rotate-180',
+                )}
+              />
+            </span>
+          </Button>
+
+          {isOpen && (
+            renderDesktopDropdown
+              ? renderDesktopDropdown({ item, isOpen, isActive, close: closeDropdown, defaultPopover, defaultItems })
+              : defaultPopover
+          )}
+        </div>
+      );
+    }
+
+    const active = isActivePath(item.href);
+    return (
+      <Link
+        key={item.href}
+        href={item.href}
+        className={cn(navItemCls, active && navItemActiveCls)}
+      >
+        <span className={labelCls} title={item.label}>{item.label}</span>
+      </Link>
+    );
+  };
+
+  const hasOverflow = overflowItems.length > 0;
+  const isMoreOpen = openDropdownKey === '__overflow-more';
+  const moreActive = isMoreOpen || overflowItems.some((i) => isGroupActive(i));
+
+  return (
+    <>
+      {primaryItems.map(renderItem)}
+
+      {hasOverflow && (
+        <div
+          className="relative"
+          onMouseEnter={() => scheduleOpen('__overflow-more')}
+          onMouseLeave={() => scheduleClose('__overflow-more')}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
+              navItemCls,
+              moreActive && navItemActiveCls,
+              isMoreOpen && 'border-0 dark:border dark:border-border',
+            )}
+          >
+            <span className={labelCls}>More</span>
+            <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+              <ChevronDown
+                className={cn(
+                  'size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform',
+                  isMoreOpen && 'rotate-180',
+                )}
+              />
+            </span>
+          </Button>
+
+          {isMoreOpen && (
+            <div
+              className={cn(popoverCls, 'left-auto right-0')}
+              onMouseEnter={() => { scheduleOpen('__overflow-more'); }}
+              onMouseLeave={() => scheduleClose('__overflow-more')}
+            >
+              {overflowItems.map((item) => {
+                const active = isGroupActive(item);
+                return (
+                  <div key={`overflow-${item.href}`} className="rounded-full">
+                    <Link href={item.href} className={subMenuLinkCls(active)}>
+                      <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -108,7 +108,7 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           }}
         >
           {/* Scrollable content */}
-          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
+          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 pb-10 space-y-5">
         {hasSessionUser && (
           <div className="px-2">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">

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

@@ -11,6 +11,8 @@ import type {
   PublicNavbarShellConfig,
   PublicNavbarPosition,
   PublicNavbarVariant,
+  PublicNavLayout,
+  PublicNavbarHeight,
 } from '../navbarTypes';
 
 export interface PublicNavbarConfig {
@@ -25,6 +27,39 @@ export interface PublicNavbarConfig {
   navbarPosition?: PublicNavbarPosition;
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
   desktopMaxPrimaryItems?: number;
+  /**
+   * Desktop nav arrangement.
+   * - `default`    — brand left | nav centered | actions right
+   * - `brand-left` — brand left | nav after brand | actions pushed right
+   * - `centered`   — all items centered in one row
+   * - `split`      — brand left | actions right | no desktop nav (drawer only)
+   * @default 'default'
+   */
+  navLayout?: PublicNavLayout;
+  /**
+   * Navbar vertical padding / height.
+   * - `sm` → compact
+   * - `md` → default
+   * - `lg` → tall
+   * @default 'md'
+   */
+  navbarHeight?: PublicNavbarHeight;
+  /**
+   * Slide navbar off-screen on scroll-down; restore on scroll-up.
+   * @default false
+   */
+  hideNavOnScroll?: boolean;
+  /**
+   * Transparent at page top, opaque after scrolling.
+   * Pair with `navbarVariant="floating"` for best results.
+   * @default false
+   */
+  transparent?: boolean;
+  /**
+   * scrollY threshold (px) for transparent → opaque transition.
+   * @default 40
+   */
+  transparentThreshold?: number;
 }
 
 export interface PublicNavbarProps {
@@ -32,8 +67,6 @@ export interface PublicNavbarProps {
 }
 
 export function PublicNavbar({ config }: PublicNavbarProps) {
-  const rounding = config.shell?.rounding;
-  const containerClassName = config.shell?.className;
   const navigation = config.navigation ?? [];
 
   return (
@@ -43,18 +76,23 @@ export function PublicNavbar({ config }: PublicNavbarProps) {
         brandHref={config.brandHref}
         navigation={navigation}
         userMenu={config.userMenu}
-        containerClassName={containerClassName}
+        containerClassName={config.shell?.className}
         navbarVariant={config.navbarVariant}
         navbarPosition={config.navbarPosition}
         renderDesktopDropdown={config.renderDesktopDropdown}
         desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
-        rounding={rounding}
+        rounding={config.shell?.rounding}
+        navLayout={config.navLayout}
+        navbarHeight={config.navbarHeight}
+        hideNavOnScroll={config.hideNavOnScroll}
+        transparent={config.transparent}
+        transparentThreshold={config.transparentThreshold}
       />
       <PublicMobileDrawer
         navigation={navigation}
         userMenu={config.userMenu}
-        containerClassName={containerClassName}
-        rounding={rounding}
+        containerClassName={config.shell?.className}
+        rounding={config.shell?.rounding}
       />
     </>
   );