siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,755 @@
+import React from 'react';
+import type { NavbarProps } from './Navbar.types';
+import { Badge } from '../Badge/Badge';
+import {
+  ShoppingCartIcon,
+  BellIcon,
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ExclamationTriangleIcon,
+  ArrowLeftStartOnRectangleIcon,
+} from './icons';
+
+/**
+ * Componente Navbar del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * Barra de navegación principal con soporte completo para responsive y dark mode.
+ * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.
+ *
+ * **Variantes de dispositivo:**
+ * - `responsive`: Se adapta automáticamente al viewport (por defecto)
+ * - `desktop`: Versión completa (1360x64px) con todos los elementos
+ * - `tablet`: Versión tablet (1024x64px) con elementos reducidos
+ * - `mobile`: Versión simplificada (428x40px) con logo icono y avatar circular
+ *
+ * **Elementos incluidos:**
+ * - Botón de navegación (solo desktop/tablet) - Usa shadow-button-inset
+ * - Logo del negocio (solo desktop/tablet)
+ * - Dividers verticales (solo desktop/tablet)
+ * - Logo Siesa (completo en desktop/tablet, icono en mobile)
+ * - Nombre del producto (solo desktop/tablet) - Heading/Tiny (20px Bold)
+ * - Badge de ambiente con icono de advertencia (yellow)
+ * - Botones de acción (search solo mobile, cart, notifications)
+ * - Dropdown de usuario con avatar, nombre y email
+ * - Logo Siesa trailing (solo desktop)
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación (NO colores hardcodeados)
+ * - Focus rings adaptativos para light y dark mode
+ * - Type safety con TypeScript estricto
+ * - Responsive design con breakpoints md: y lg:
+ * - Tipografía del sistema: Heading/Tiny, Paragraph/Small, Paragraph/Tiny
+ * - Spacing del sistema (4px, 8px, 12px, 16px, 32px)
+ *
+ * @see docs/colors.md - Sistema de colores y tokens dark mode
+ * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras (button-inset)
+ *
+ * @example
+ * ```tsx
+ * <Navbar
+ *   productName="Mi Producto"
+ *   environmentBadge="Ambiente de Pruebas"
+ *   userDropdown={{
+ *     avatar: "/path/to/avatar.jpg",
+ *     name: "Juan Pérez",
+ *     email: "juan@ejemplo.com",
+ *   }}
+ *   notifications={{
+ *     cart: 99,
+ *     bell: true,
+ *   }}
+ *   onNavigationClick={() => router.back()}
+ *   onCartClick={() => openCart()}
+ *   onNotificationsClick={() => openNotifications()}
+ * />
+ * ```
+ */
+export const Navbar: React.FC<NavbarProps> = ({
+  logo,
+  productName = 'Nombre Producto',
+  environmentBadge,
+  userDropdown,
+  actions,
+  notifications,
+  className = '',
+  variant = 'responsive',
+  hideActionButtons = false,
+  leadingAction,
+  siesaLogo,
+  showBusinessLogo = false,
+  showSiesaLogoLeading = true,
+  showSiesaLogoTrailing = false,
+  onNavigationClick,
+  onSearchClick,
+  onCartClick,
+  onNotificationsClick,
+}) => {
+  // ===== CLASES COMUNES PARA BOTONES DE ACCIÓN =====
+  const actionButtonClasses = `
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-1
+    relative
+    rounded-md
+    shrink-0
+    text-primary-custom-600
+    hover:bg-background-secondary
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:text-primary-custom-600
+    dark:hover:bg-dark-bg-secondary
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    transition-all
+    duration-150
+  `;
+
+  // ===== CLASES PARA BOTÓN DE NAVEGACIÓN PRIMARIO =====
+  const navigationButtonClasses = `
+    bg-primary-custom-600
+    text-primary-inverse-content
+    border
+    border-primary-custom-600
+    shadow-button-inset
+    hover:bg-primary-custom-500
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:bg-dark-bg-inverse
+    dark:text-dark-content-inverse
+    dark:border-dark-bg-inverse
+    dark:hover:bg-dark-bg-inverse/90
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-3
+    relative
+    rounded-md
+    shrink-0
+    transition-all
+    duration-150
+  `;
+
+  // ===== HELPER: Es mobile (variante o responsive en mobile breakpoint) =====
+  const isMobile = variant === 'mobile';
+  const isDesktop = variant === 'desktop';
+  const isTablet = variant === 'tablet';
+  const isResponsive = variant === 'responsive';
+
+  // ===== BOTÓN DE NAVEGACIÓN =====
+  const NavigationButton = () => {
+    if (isMobile) return null;
+
+    const buttonContent = (
+      <div className="overflow-hidden relative shrink-0 w-4 h-4">
+        <ArrowLeftStartOnRectangleIcon />
+      </div>
+    );
+
+    if (isDesktop || isTablet) {
+      return (
+        <button
+          className={navigationButtonClasses}
+          aria-label="Volver"
+          onClick={onNavigationClick}
+        >
+          {buttonContent}
+        </button>
+      );
+    }
+
+    // Responsive: Solo visible en md: y superiores
+    return (
+      <button
+        className={`hidden md:flex ${navigationButtonClasses}`}
+        aria-label="Volver"
+        onClick={onNavigationClick}
+      >
+        {buttonContent}
+      </button>
+    );
+  };
+
+  // ===== BUSINESS LOGO (Logo del cliente/producto) =====
+  // Solo se muestra si showBusinessLogo es true
+  const BusinessLogo = () => {
+    if (isMobile || !showBusinessLogo) return null;
+
+    const logoContent = (
+      <img
+        src="/,Business Logo.png"
+        alt="Business Logo"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[168px] h-[30px]">
+          {logoContent}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[140px] h-[25px]">
+          {logoContent}
+        </div>
+      );
+    }
+
+    // Responsive: Visible en md: con tamaño desktop, lg: con tamaño completo
+    return (
+      <div className="hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]">
+        {logoContent}
+      </div>
+    );
+  };
+
+  // ===== SIESA LOGO (Logo de Siesa - Leading) =====
+  // Se controla con showSiesaLogoLeading
+  // En mobile siempre se muestra el icono de Siesa en leading
+  const SiesaLogoLeading = () => {
+    const logoFull = (
+      <img
+        src="/.Siesa Logo.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    const logoMobile = (
+      <img
+        src="/siesa_logo_mobile.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    // En mobile siempre se muestra el icono de Siesa
+    if (isMobile) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[30px] h-[30px]">
+          {logoMobile}
+        </div>
+      );
+    }
+
+    // En desktop/tablet: Se controla con showSiesaLogoLeading
+    if (!showSiesaLogoLeading) return null;
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    // Responsive
+    return (
+      <>
+        {/* Mobile: Logo icono (30x30) - siempre visible */}
+        <div className="md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]">
+          {logoMobile}
+        </div>
+        {/* Tablet/Desktop: Se controla con showSiesaLogoLeading */}
+        {showSiesaLogoLeading && (
+          <>
+            {/* Tablet: Logo completo (100x25) */}
+            <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+              {logoFull}
+            </div>
+            {/* Desktop: Logo completo (120x30) */}
+            <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+              {logoFull}
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
+
+  // ===== SIESA LOGO (Trailing) =====
+  // Se controla con showSiesaLogoTrailing
+  const SiesaLogoTrailing = () => {
+    // Se controla con showSiesaLogoTrailing
+    if (!showSiesaLogoTrailing || isMobile) return null;
+
+    const logoFull = (
+      <img
+        src="/.Siesa Logo.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    // Responsive: Visible en md: (tablet y desktop)
+    return (
+      <>
+        {/* Tablet: Logo completo (100x25) */}
+        <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+        {/* Desktop: Logo completo (120x30) */}
+        <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      </>
+    );
+  };
+
+  // ===== DIVIDER COMPONENT =====
+  const Divider = ({ responsive = true }: { responsive?: boolean }) => {
+    const dividerContent = (
+      <div className="grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary" />
+    );
+
+    if (isMobile) return null;
+
+    if (isDesktop || isTablet) {
+      return (
+        <div className="flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
+          {dividerContent}
+        </div>
+      );
+    }
+
+    // Responsive
+    if (responsive) {
+      return (
+        <div className="hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
+          {dividerContent}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  // ===== PRODUCT NAME =====
+  const ProductName = () => {
+    if (isMobile || !productName) return null;
+
+    const nameContent = (
+      <p className="font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
+        {productName}
+      </p>
+    );
+
+    if (isDesktop || isTablet) {
+      return nameContent;
+    }
+
+    // Responsive: Solo visible en md:
+    return (
+      <p className="hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
+        {productName}
+      </p>
+    );
+  };
+
+  // ===== ENVIRONMENT BADGE =====
+  const EnvironmentBadge = () => {
+    if (!environmentBadge) return null;
+
+    if (isMobile) {
+      return (
+        <Badge
+          color="yellow"
+          leftIcon={<ExclamationTriangleIcon />}
+          label="Pruebas"
+        />
+      );
+    }
+
+    if (isDesktop || isTablet) {
+      return (
+        <Badge
+          color="yellow"
+          leftIcon={<ExclamationTriangleIcon />}
+          label={environmentBadge}
+        />
+      );
+    }
+
+    // Responsive: Mostrar badge corto en mobile, completo en desktop
+    return (
+      <>
+        <div className="md:hidden">
+          <Badge
+            color="yellow"
+            leftIcon={<ExclamationTriangleIcon />}
+            label="Pruebas"
+          />
+        </div>
+        <div className="hidden md:block">
+          <Badge
+            color="yellow"
+            leftIcon={<ExclamationTriangleIcon />}
+            label={environmentBadge}
+          />
+        </div>
+      </>
+    );
+  };
+
+  // ===== SEARCH BUTTON (Solo mobile) =====
+  const SearchButton = () => {
+    if (hideActionButtons) return null;
+
+    if (isMobile) {
+      return (
+        <button
+          className={actionButtonClasses}
+          aria-label="Buscar"
+          onClick={onSearchClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <MagnifyingGlassIcon />
+          </div>
+        </button>
+      );
+    }
+
+    if (isResponsive) {
+      return (
+        <button
+          className={`md:hidden ${actionButtonClasses}`}
+          aria-label="Buscar"
+          onClick={onSearchClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <MagnifyingGlassIcon />
+          </div>
+        </button>
+      );
+    }
+
+    return null;
+  };
+
+  // ===== CART BUTTON =====
+  const CartButton = () => {
+    if (hideActionButtons) return null;
+
+    return (
+      <div className="relative">
+        <button
+          className={actionButtonClasses}
+          aria-label="Carrito de compras"
+          onClick={onCartClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <ShoppingCartIcon />
+          </div>
+        </button>
+        {/* Badge de notificación con número */}
+        {notifications?.cart !== undefined && notifications.cart > 0 && (
+          <div className="absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]">
+            <p className="font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap">
+              {notifications.cart > 99 ? '+99' : notifications.cart}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // ===== NOTIFICATIONS BUTTON =====
+  const NotificationsButton = () => {
+    if (hideActionButtons) return null;
+
+    return (
+      <div className="relative">
+        <button
+          className={actionButtonClasses}
+          aria-label="Notificaciones"
+          onClick={onNotificationsClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <BellIcon />
+          </div>
+        </button>
+        {/* Badge de notificación dot */}
+        {notifications?.bell && (
+          <div className="absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none" />
+        )}
+      </div>
+    );
+  };
+
+  // ===== USER DROPDOWN =====
+  const UserDropdown = () => {
+    if (!userDropdown) return null;
+
+    const dropdownButtonClasses = `
+      box-border
+      flex
+      items-center
+      justify-center
+      overflow-hidden
+      p-0
+      relative
+      shrink-0
+      hover:bg-background-secondary
+      active:scale-95
+      focus:outline-none
+      focus:ring-2
+      focus:ring-primary-custom-400
+      focus:ring-offset-2
+      dark:hover:bg-dark-bg-secondary
+      dark:active:scale-95
+      dark:focus:ring-dark-border-custom
+      dark:focus:ring-offset-dark-bg-primary
+      rounded-lg
+      transition-all
+      duration-150
+    `;
+
+    // Mobile: Solo avatar circular
+    if (isMobile) {
+      return (
+        <button
+          className={dropdownButtonClasses}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="relative rounded-full shrink-0 w-8 h-8">
+            <img
+              alt={userDropdown.name}
+              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
+              src={userDropdown.avatar}
+            />
+          </div>
+        </button>
+      );
+    }
+
+    // Desktop/Tablet: Avatar + info + chevron
+    const renderFullDropdown = () => (
+      <button
+        className={dropdownButtonClasses}
+        onClick={userDropdown.onMenuClick}
+        aria-label="Menú de usuario"
+      >
+        <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
+          <div className="flex gap-3 items-center justify-center relative shrink-0">
+            {/* Avatar */}
+            <div className="flex items-center justify-center relative shrink-0">
+              <div className="relative rounded-md shrink-0 w-10 h-10">
+                <img
+                  alt={userDropdown.name}
+                  className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
+                  src={userDropdown.avatar}
+                />
+              </div>
+            </div>
+            {/* Nombre y email/rol */}
+            <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
+              <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
+                {userDropdown.name}
+              </p>
+              {(userDropdown.email || userDropdown.role) && (
+                <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
+                  {userDropdown.email || userDropdown.role}
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Chevron down icon */}
+          <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
+            <ChevronDownIcon />
+          </div>
+        </div>
+      </button>
+    );
+
+    if (isDesktop || isTablet) {
+      return renderFullDropdown();
+    }
+
+    // Responsive
+    return (
+      <>
+        {/* Mobile: Solo avatar circular */}
+        <button
+          className={`md:hidden ${dropdownButtonClasses}`}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="relative rounded-full shrink-0 w-8 h-8">
+            <img
+              alt={userDropdown.name}
+              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
+              src={userDropdown.avatar}
+            />
+          </div>
+        </button>
+        {/* Desktop/Tablet: Avatar + info + chevron */}
+        <button
+          className={`hidden md:flex ${dropdownButtonClasses}`}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
+            <div className="flex gap-3 items-center justify-center relative shrink-0">
+              {/* Avatar */}
+              <div className="flex items-center justify-center relative shrink-0">
+                <div className="relative rounded-md shrink-0 w-10 h-10">
+                  <img
+                    alt={userDropdown.name}
+                    className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
+                    src={userDropdown.avatar}
+                  />
+                </div>
+              </div>
+              {/* Nombre y email/rol */}
+              <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
+                <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
+                  {userDropdown.name}
+                </p>
+                {(userDropdown.email || userDropdown.role) && (
+                  <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
+                    {userDropdown.email || userDropdown.role}
+                  </p>
+                )}
+              </div>
+            </div>
+            {/* Chevron down icon */}
+            <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
+              <ChevronDownIcon />
+            </div>
+          </div>
+        </button>
+      </>
+    );
+  };
+
+  // ===== CLASES BASE DEL NAVBAR =====
+  const baseClasses = `
+    box-border
+    flex
+    gap-8
+    items-center
+    px-4
+    py-1
+    relative
+    w-full
+    bg-background-primary
+    dark:bg-dark-bg-primary
+  `;
+
+  // ===== CLASES PARA VARIANTES DE ALTURA =====
+  const variantClasses = {
+    responsive: 'h-[40px] md:h-16',
+    desktop: 'h-16',
+    tablet: 'h-16',
+    mobile: 'h-[40px]',
+  };
+
+  // ===== COMBINAR CLASES =====
+  const finalClasses = [baseClasses, variantClasses[variant], className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <nav className={finalClasses}>
+      {/* ===== SECCIÓN LEADING (IZQUIERDA) ===== */}
+      <div className="flex gap-4 items-center relative shrink-0">
+        {/* Botón de navegación o acción leading personalizada (solo desktop/tablet) */}
+        {!isMobile && (leadingAction || <NavigationButton />)}
+
+        {/* Business Logo (logo del cliente) - solo cuando showBusinessLogo=true */}
+        {logo || <BusinessLogo />}
+
+        {/* Divider después de Business Logo - Solo cuando hay Business Logo Y hay Siesa Logo en leading */}
+        {showBusinessLogo && showSiesaLogoLeading && !isMobile && <Divider />}
+
+        {/* Siesa Logo en leading - Se controla con showSiesaLogoLeading */}
+        {siesaLogo || <SiesaLogoLeading />}
+
+        {/* Divider antes del nombre - Solo cuando hay Siesa Logo en leading y nombre de producto */}
+        {productName && showSiesaLogoLeading && !isMobile && <Divider />}
+
+        {/* Nombre del Producto - Solo desktop/tablet */}
+        <ProductName />
+      </div>
+
+      {/* ===== SECCIÓN TRAILING (DERECHA) ===== */}
+      <div className="flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0">
+        {/* Badge de Ambiente */}
+        <EnvironmentBadge />
+
+        {/* Botón de búsqueda - Solo mobile */}
+        <SearchButton />
+
+        {/* Botón de carrito de compras */}
+        <CartButton />
+
+        {/* Botón de notificaciones */}
+        <NotificationsButton />
+
+        {/* Divider antes del dropdown - Solo desktop/tablet */}
+        {userDropdown && !hideActionButtons && <Divider />}
+
+        {/* Dropdown de usuario */}
+        <UserDropdown />
+
+        {/* Divider antes del logo Siesa trailing - Solo cuando showSiesaLogoTrailing=true */}
+        {showSiesaLogoTrailing && userDropdown && !isMobile && <Divider />}
+
+        {/* Logo Siesa trailing - Solo desktop */}
+        <SiesaLogoTrailing />
+
+        {/* Actions adicionales */}
+        {actions && <div className="flex gap-2 items-center">{actions}</div>}
+      </div>
+    </nav>
+  );
+};