@djangocfg/layouts 2.1.275 → 2.1.277

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

@@ -0,0 +1,127 @@
+/**
+ * FloatingNavbar — rounded, inset shell with soft shadow.
+ *
+ * Pairs with FloatingMobileDrawer (matching rounding + shadow).
+ */
+
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { publicFloatingChromeClassName } from '../../publicShellShadow';
+import { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
+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 { FloatingMobileDrawer } from './FloatingMobileDrawer';
+
+export interface FloatingNavbarConfig {
+  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;
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly string[];
+}
+
+export interface FloatingNavbarProps {
+  config: FloatingNavbarConfig;
+}
+
+export function FloatingNavbar({ config }: FloatingNavbarProps) {
+  const navigation = config.navigation ?? [];
+  const rounding = config.shell?.rounding;
+  const containerClassName = config.shell?.className;
+  const position = config.navbarPosition ?? 'sticky';
+  const externalPrefixes = config.externalPrefixes;
+
+  const outerClassName = cn(
+    position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
+    'top-3 px-3 sm:px-4 lg:px-6',
+  );
+
+  const shapeClassName = cn(
+    'mx-auto w-full',
+    rounding ?? 'rounded-2xl',
+    publicFloatingChromeClassName,
+    containerClassName,
+    '!border-0 dark:!border dark:!border-border/75',
+  );
+
+  return (
+    <ExternalPrefixesProvider value={externalPrefixes}>
+      <NavbarShell
+        variant="floating"
+        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',
+          )
+        }
+      />
+      <FloatingMobileDrawer
+        navigation={navigation}
+        userMenu={config.userMenu}
+        containerClassName={containerClassName}
+        rounding={rounding}
+      />
+    </ExternalPrefixesProvider>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { FloatingNavbar } from './FloatingNavbar';
+export type { FloatingNavbarConfig, FloatingNavbarProps } from './FloatingNavbar';
+export { FloatingMobileDrawer } from './FloatingMobileDrawer';

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

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

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

@@ -0,0 +1,122 @@
+/**
+ * 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 { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
+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;
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly string[];
+}
+
+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 externalPrefixes = config.externalPrefixes;
+
+  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 (
+    <ExternalPrefixesProvider value={externalPrefixes}>
+      <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}
+      />
+    </ExternalPrefixesProvider>
+  );
+}

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,180 @@
+/**
+ * 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 { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
+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;
+
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly 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 externalPrefixes = config.externalPrefixes;
+
+  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 (
+    <ExternalPrefixesProvider value={externalPrefixes}>
+      <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}
+      />
+    </ExternalPrefixesProvider>
+  );
+}

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/ExternalPrefixesContext.tsx

@@ -0,0 +1,69 @@
+/**
+ * ExternalPrefixesContext
+ *
+ * Provides a list of path prefixes that should be treated as "outside" the
+ * Next.js App Router (e.g. a catch-all served by Nextra). Consumers inside the
+ * navbar (`SmartNavLink`) check whether the `href` starts with any configured
+ * prefix; if so, they render a native `<a>` (full page load) instead of a
+ * `next/link` that would fetch an RSC payload the route cannot produce.
+ *
+ * Default: `[]` — so behaviour is unchanged for consumers who do not opt in.
+ */
+
+'use client';
+
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
+
+export type ExternalPrefixes = readonly string[];
+
+const ExternalPrefixesContext = createContext<ExternalPrefixes>([]);
+
+export interface ExternalPrefixesProviderProps {
+  /** List of path prefixes treated as external to the App Router. */
+  value?: ExternalPrefixes;
+  children: ReactNode;
+}
+
+export function ExternalPrefixesProvider({
+  value,
+  children,
+}: ExternalPrefixesProviderProps) {
+  const resolved = useMemo<ExternalPrefixes>(() => value ?? [], [value]);
+  return (
+    <ExternalPrefixesContext.Provider value={resolved}>
+      {children}
+    </ExternalPrefixesContext.Provider>
+  );
+}
+
+export function useExternalPrefixes(): ExternalPrefixes {
+  return useContext(ExternalPrefixesContext);
+}
+
+/**
+ * Returns true if `href` is a string that starts with any of the provided
+ * external prefixes. Non-string hrefs (objects, `next/link` URL shape) always
+ * return false — those are App Router internal.
+ *
+ * Matches the prefix exactly or at a path-boundary (`/`, `?`, `#`) so that
+ * `/docs` in the prefix list matches `/docs`, `/docs/`, `/docs/foo`, `/docs?x=1`,
+ * `/docs#bar` — but NOT `/docsearch` (which should stay an App Router link).
+ */
+export function isExternalPrefixHref(
+  href: unknown,
+  prefixes: ExternalPrefixes,
+): href is string {
+  if (typeof href !== 'string' || prefixes.length === 0) return false;
+  for (const prefix of prefixes) {
+    if (!prefix) continue;
+    if (href === prefix) return true;
+    if (
+      href.startsWith(`${prefix}/`) ||
+      href.startsWith(`${prefix}?`) ||
+      href.startsWith(`${prefix}#`)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}

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

@@ -0,0 +1,95 @@
+/**
+ * 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 React, { type ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { SmartNavLink } from './SmartNavLink';
+
+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 (
+    <SmartNavLink href={action.href} className={cls} onClick={action.onClick}>
+      {content}
+    </SmartNavLink>
+  );
+}