@djangocfg/layouts 2.1.274 → 2.1.276

package/src/layouts/PublicLayout/navbars/FlushNavbar/FlushNavbar.tsx

@@ -0,0 +1,112 @@
+/**
+ * FlushNavbar — edge-to-edge bar with a subtle bottom border.
+ *
+ * Pairs with FlushMobileDrawer (no rounding/shadow).
+ */
+
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { NavAction } from '../../primitives/NavActionItem';
+import { NavbarShell } from '../../shared';
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarPosition,
+  PublicNavbarShellConfig,
+  PublicNavLayout,
+} from '../../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
+
+import { FlushMobileDrawer } from './FlushMobileDrawer';
+
+export interface FlushNavbarConfig {
+  shell?: PublicNavbarShellConfig;
+  brand?: React.ReactNode;
+  /** @default '/' */
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  /** @default 'sticky' */
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  desktopMaxPrimaryItems?: number;
+  /** @default 'default' */
+  navLayout?: PublicNavLayout;
+  /** @default 'md' */
+  navbarHeight?: PublicNavbarHeight;
+  /** @default false */
+  hideNavOnScroll?: boolean;
+  /** @default false */
+  transparent?: boolean;
+  /** @default 40 */
+  transparentThreshold?: number;
+  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
+  actions?: NavAction[];
+  /** Arbitrary ReactNode between actions and UserMenu. */
+  actionsLeadingSlot?: React.ReactNode;
+  /** Arbitrary ReactNode after the mobile toggle. */
+  actionsTrailingSlot?: React.ReactNode;
+}
+
+export interface FlushNavbarProps {
+  config: FlushNavbarConfig;
+}
+
+export function FlushNavbar({ config }: FlushNavbarProps) {
+  const navigation = config.navigation ?? [];
+  const containerClassName = config.shell?.className;
+  const position = config.navbarPosition ?? 'sticky';
+
+  const outerClassName = cn(
+    position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
+    'top-0',
+  );
+
+  const shapeClassName = cn(
+    'mx-auto w-full',
+    'rounded-none border-x-0 border-t-0 border-b border-border/40 dark:border-border/70 shadow-none',
+    containerClassName,
+  );
+
+  return (
+    <>
+      <NavbarShell
+        variant="flush"
+        position={position}
+        brand={config.brand}
+        brandHref={config.brandHref}
+        navigation={navigation}
+        userMenu={config.userMenu}
+        renderDesktopDropdown={config.renderDesktopDropdown}
+        desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
+        navLayout={config.navLayout}
+        navbarHeight={config.navbarHeight}
+        hideNavOnScroll={config.hideNavOnScroll}
+        transparent={config.transparent}
+        transparentThreshold={config.transparentThreshold}
+        actions={config.actions}
+        actionsLeadingSlot={config.actionsLeadingSlot}
+        actionsTrailingSlot={config.actionsTrailingSlot}
+        outerClassName={outerClassName}
+        shapeClassName={shapeClassName}
+        shapeForState={({ scrolled, transparent }) =>
+          cn(
+            transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
+            !transparent || scrolled
+              ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
+              : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
+          )
+        }
+      />
+      <FlushMobileDrawer
+        navigation={navigation}
+        userMenu={config.userMenu}
+        containerClassName={containerClassName}
+      />
+    </>
+  );
+}

package/src/layouts/PublicLayout/navbars/FlushNavbar/index.ts

@@ -0,0 +1,3 @@
+export { FlushNavbar } from './FlushNavbar';
+export type { FlushNavbarConfig, FlushNavbarProps } from './FlushNavbar';
+export { FlushMobileDrawer } from './FlushMobileDrawer';

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalMobileDrawer.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+
+import { MobileDrawerShell, type MobileDrawerShellProps } from '../../shared';
+
+type MinimalMobileDrawerProps = Omit<MobileDrawerShellProps, 'panelClassName' | 'outerClassName'> & {
+  containerClassName?: string;
+};
+
+export function MinimalMobileDrawer({ containerClassName, ...rest }: MinimalMobileDrawerProps) {
+  return (
+    <MobileDrawerShell
+      {...rest}
+      outerClassName={containerClassName}
+      panelClassName="rounded-none shadow-none border-0"
+    />
+  );
+}

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -0,0 +1,169 @@
+/**
+ * MinimalNavbar — borderless, transparent-by-default, eesel-style.
+ *
+ * Differences from Floating/Flush:
+ *  - no shell border/shadow, no rounded chrome
+ *  - default container: max-w-[1400px], px-4 lg:px-10
+ *  - right-hand side: pill CTAs + UserMenu + mobile toggle (no default UserMenu-only)
+ *  - transparent at top of page by default; solid + backdrop-blur after scroll
+ */
+
+'use client';
+
+import { Menu, X } from 'lucide-react';
+import React, { type ReactNode } from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { UserMenu } from '../../../_components/UserMenu';
+import { NavActionItem, type NavAction } from '../../primitives/NavActionItem';
+import { NavbarShell, type NavbarActionsContext } from '../../shared';
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarPosition,
+  PublicNavLayout,
+} from '../../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
+
+import { MinimalMobileDrawer } from './MinimalMobileDrawer';
+
+/**
+ * @deprecated Use `NavAction` from `@djangocfg/layouts`. Kept as an alias so
+ * existing imports keep working.
+ */
+export type MinimalNavbarAction = NavAction;
+
+export interface MinimalNavbarConfig {
+  brand?: ReactNode;
+  /** @default '/' */
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  /** Right-hand CTA pills. Rendered before UserMenu / mobile toggle. */
+  actions?: NavAction[];
+
+  /** @default 'sticky' */
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  desktopMaxPrimaryItems?: number;
+  /** @default 'default' */
+  navLayout?: PublicNavLayout;
+  /** @default 'md' */
+  navbarHeight?: PublicNavbarHeight;
+  /** @default false */
+  hideNavOnScroll?: boolean;
+  /**
+   * Transparent at page top, opaque after `transparentThreshold`.
+   * @default true
+   */
+  transparent?: boolean;
+  /** @default 40 */
+  transparentThreshold?: number;
+
+  /**
+   * Outer wrapper container classes — e.g. `mx-auto max-w-[1400px] px-4 nav:px-10`.
+   * @default 'mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10'
+   */
+  containerClassName?: string;
+}
+
+export interface MinimalNavbarProps {
+  config: MinimalNavbarConfig;
+}
+
+function MinimalActions({
+  ctx,
+  actions = [],
+}: {
+  ctx: NavbarActionsContext;
+  actions?: NavAction[];
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-4">
+      {actions.length > 0 && (
+        <div className="flex shrink-0 items-center gap-1.5">
+          {actions.map((a) => (
+            <NavActionItem key={`${a.label}-${a.href}`} action={a} />
+          ))}
+        </div>
+      )}
+
+      <div className="hidden lg:flex">
+        <UserMenu
+          variant="desktop"
+          groups={ctx.userMenu?.groups}
+          authPath={ctx.userMenu?.authPath}
+          i18n={ctx.userMenu?.i18n}
+        />
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={ctx.toggleMobileLabel}
+        data-mobile-menu-trigger="true"
+        className={cn(
+          'rounded-full text-foreground/90 hover:bg-foreground/10',
+          ctx.navLayout === 'split' ? '' : 'lg:hidden',
+        )}
+        onClick={ctx.toggleMobileMenu}
+      >
+        {ctx.mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </Button>
+    </div>
+  );
+}
+
+export function MinimalNavbar({ config }: MinimalNavbarProps) {
+  const navigation = config.navigation ?? [];
+  const position = config.navbarPosition ?? 'sticky';
+  const transparent = config.transparent ?? true;
+  const containerClassName = config.containerClassName ?? 'mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10';
+
+  const outerClassName = cn(
+    position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
+    'top-0',
+  );
+
+  // No border, no rounding, no shadow. Full-bleed.
+  const shapeClassName = 'w-full rounded-none border-0 shadow-none';
+
+  return (
+    <>
+      <NavbarShell
+        variant="minimal"
+        position={position}
+        brand={config.brand}
+        brandHref={config.brandHref}
+        navigation={navigation}
+        userMenu={config.userMenu}
+        renderDesktopDropdown={config.renderDesktopDropdown}
+        desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
+        navLayout={config.navLayout}
+        navbarHeight={config.navbarHeight}
+        hideNavOnScroll={config.hideNavOnScroll}
+        transparent={transparent}
+        transparentThreshold={config.transparentThreshold}
+        outerClassName={outerClassName}
+        shapeClassName={shapeClassName}
+        innerPadding={containerClassName}
+        shapeForState={({ scrolled }) =>
+          cn(
+            'transition-[background-color,backdrop-filter] duration-200 ease-out',
+            transparent && !scrolled
+              ? 'bg-transparent backdrop-blur-0'
+              : 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80',
+          )
+        }
+        renderActions={(ctx) => <MinimalActions ctx={ctx} actions={config.actions} />}
+      />
+      <MinimalMobileDrawer
+        navigation={navigation}
+        userMenu={config.userMenu}
+        containerClassName={containerClassName}
+      />
+    </>
+  );
+}

package/src/layouts/PublicLayout/navbars/MinimalNavbar/index.ts

@@ -0,0 +1,3 @@
+export { MinimalNavbar } from './MinimalNavbar';
+export type { MinimalNavbarConfig, MinimalNavbarProps, MinimalNavbarAction } from './MinimalNavbar';
+export { MinimalMobileDrawer } from './MinimalMobileDrawer';

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

@@ -0,0 +1,3 @@
+export * from './FloatingNavbar';
+export * from './FlushNavbar';
+export * from './MinimalNavbar';

package/src/layouts/PublicLayout/primitives/NavActionItem.tsx

@@ -0,0 +1,94 @@
+/**
+ * NavAction — shared CTA primitive used by every PublicLayout navbar.
+ *
+ * Previously lived on MinimalNavbar only. Promoted so Floating/Flush can accept
+ * the same typed CTA pills (Book a demo / Get started …) without a fork.
+ */
+
+'use client';
+
+import Link from 'next/link';
+import React, { type ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface NavAction {
+  label: string;
+  href: string;
+  /** Open in a new tab. @default false */
+  external?: boolean;
+  /**
+   * Visual style.
+   * - `link`    — plain text link
+   * - `ghost`   — transparent pill, fills on hover (default)
+   * - `outline` — bordered pill
+   * - `primary` — solid high-contrast pill (main CTA)
+   * @default 'ghost'
+   */
+  variant?: 'link' | 'ghost' | 'outline' | 'primary';
+  /** Hide on screens below lg (useful for secondary CTAs). @default false */
+  hideOnSmall?: boolean;
+  /** Optional inline icon (use lucide-react or any ReactNode). */
+  icon?: ReactNode;
+  /** Custom click handler (still navigates via href unless preventDefault'd). */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+const baseCls =
+  'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35';
+
+const variantCls: Record<NonNullable<NavAction['variant']>, string> = {
+  link:
+    'px-1.5 py-1 text-foreground/85 hover:text-foreground',
+  ghost:
+    'px-4 py-1.5 min-h-9 text-foreground/90 hover:bg-accent/55 hover:text-foreground',
+  outline:
+    'px-4 py-1.5 min-h-9 border border-border/70 text-foreground/90 hover:bg-accent/40 hover:text-foreground',
+  primary:
+    'px-4 py-1.5 min-h-9 bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
+};
+
+interface NavActionItemProps {
+  action: NavAction;
+  className?: string;
+}
+
+export function NavActionItem({ action, className }: NavActionItemProps) {
+  const variant = action.variant ?? 'ghost';
+  const cls = cn(
+    baseCls,
+    variantCls[variant],
+    action.hideOnSmall && 'hidden lg:inline-flex',
+    className,
+  );
+
+  const content = (
+    <>
+      {action.icon && (
+        <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+          {action.icon}
+        </span>
+      )}
+      <span className="truncate">{action.label}</span>
+    </>
+  );
+
+  if (action.external) {
+    return (
+      <a
+        href={action.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cls}
+        onClick={action.onClick}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <Link href={action.href} className={cls} onClick={action.onClick}>
+      {content}
+    </Link>
+  );
+}

package/src/layouts/PublicLayout/{components → primitives}/NavActions.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
 
 import { UserMenu } from '../../_components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
+import { NavActionItem, type NavAction } from './NavActionItem';
+
 interface NavActionsProps {
   userMenu?: UserMenuConfig;
   mobileMenuOpen: boolean;
@@ -15,6 +17,12 @@ interface NavActionsProps {
   toggleMobileLabel: string;
   /** When true, mobile trigger is always visible (not hidden on lg+). Used for `split` layout. */
   forceShowMobileTrigger?: boolean;
+  /** Typed CTA pills rendered before UserMenu (desktop only). */
+  actions?: NavAction[];
+  /** Arbitrary slot rendered between actions and UserMenu (desktop only). */
+  leadingSlot?: ReactNode;
+  /** Arbitrary slot rendered after the mobile toggle (desktop + mobile). */
+  trailingSlot?: ReactNode;
 }
 
 export function NavActions({
@@ -23,9 +31,24 @@ export function NavActions({
   onMobileMenuToggle,
   toggleMobileLabel,
   forceShowMobileTrigger = false,
+  actions,
+  leadingSlot,
+  trailingSlot,
 }: NavActionsProps) {
+  const hasActions = actions && actions.length > 0;
+
   return (
     <div className="flex items-center gap-4">
+      {hasActions && (
+        <div className="hidden lg:flex shrink-0 items-center gap-1.5">
+          {actions!.map((a) => (
+            <NavActionItem key={`${a.label}-${a.href}`} action={a} />
+          ))}
+        </div>
+      )}
+
+      {leadingSlot && <div className="hidden lg:flex shrink-0 items-center">{leadingSlot}</div>}
+
       <div className="hidden lg:flex">
         <UserMenu
           variant="desktop"
@@ -45,6 +68,8 @@ export function NavActions({
       >
         {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
       </Button>
+
+      {trailingSlot && <div className="shrink-0 flex items-center">{trailingSlot}</div>}
     </div>
   );
 }

package/src/layouts/PublicLayout/{components → primitives}/NavDesktopItems.tsx

@@ -9,11 +9,14 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import type { NavigationItem } from '../../types';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
-import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
+import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
+import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
 
 interface NavDesktopItemsProps {
-  primaryItems: NavigationItem[];
-  overflowItems: NavigationItem[];
+  /** Full ordered item list; overflow is computed responsively. */
+  items: NavigationItem[];
+  /** Optional hard cap — measurer will never show more than this. */
+  maxVisible?: number;
   isActivePath: (href: string) => boolean;
   isGroupActive: (item: NavigationItem) => boolean;
   dropdown: UseDropdownMenuReturn;
@@ -29,7 +32,7 @@ const navItemCls = cn(
 );
 
 const navItemActiveCls =
-  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none';
+  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted dark:shadow-none';
 
 const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
 
@@ -38,7 +41,7 @@ function subMenuLinkCls(active: boolean) {
     '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 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted/90 dark:shadow-none'
       : 'border-0 text-foreground/90',
   );
 }
@@ -47,8 +50,8 @@ 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,
+  items,
+  maxVisible,
   isActivePath,
   isGroupActive,
   dropdown,
@@ -56,6 +59,16 @@ export function NavDesktopItems({
 }: NavDesktopItemsProps) {
   const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
 
+  const { visibleCount, containerRef, itemRef, measured } = useResponsiveOverflow({
+    total: items.length,
+    moreWidth: 88,
+    gap: 4,
+  });
+
+  const effectiveCount = Math.min(visibleCount, maxVisible ?? visibleCount);
+  const primaryItems = items.slice(0, effectiveCount);
+  const overflowItems = items.slice(effectiveCount);
+
   const renderItem = (item: NavigationItem) => {
     if (item.items && item.items.length > 0) {
       const key = `${item.label}-${item.href}`;
@@ -112,7 +125,6 @@ export function NavDesktopItems({
               '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>
@@ -152,56 +164,88 @@ export function NavDesktopItems({
   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',
-            )}
+    <div
+      ref={containerRef as React.Ref<HTMLDivElement>}
+      className="relative flex min-w-0 flex-1 items-center justify-center gap-1"
+    >
+      {/* Measurement layer: invisible, absolutely positioned, holds width-only copies. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-y-0 left-0 flex items-center gap-1 opacity-0"
+        style={{ visibility: 'hidden', whiteSpace: 'nowrap' }}
+      >
+        {items.map((item, i) => (
+          <span
+            key={`m-${item.label}-${item.href}`}
+            ref={itemRef(i) as React.Ref<HTMLSpanElement>}
+            className={cn(navItemCls, 'pointer-events-none')}
           >
-            <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>
+            <span className={labelCls}>{item.label}</span>
+            {item.items && item.items.length > 0 && (
+              <span className="inline-flex size-3.5 shrink-0 items-center justify-center">
+                <ChevronDown className="size-3.5" />
+              </span>
+            )}
+          </span>
+        ))}
+      </div>
+
+      {/* Live row — only renders items that fit (hidden until first measurement). */}
+      <div
+        className={cn(
+          'flex min-w-0 items-center gap-1',
+          !measured && 'invisible',
+        )}
+      >
+        {primaryItems.map(renderItem)}
 
-          {isMoreOpen && (
-            <div
-              className={cn(popoverCls, 'left-auto right-0')}
-              onMouseEnter={() => { scheduleOpen('__overflow-more'); }}
-              onMouseLeave={() => scheduleClose('__overflow-more')}
+        {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,
+              )}
             >
-              {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>
-      )}
-    </>
+              <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>
+        )}
+      </div>
+    </div>
   );
 }