anima-ds-nucleus 1.0.3 → 1.0.5

package/src/components/Layout/Sidebar/SidebarCore.jsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
 
 // Mock data con 2 títulos y 2 secciones
 const MOCK_SECTIONS = [
@@ -20,6 +21,295 @@ const MOCK_SECTIONS = [
   },
 ];
 
+// Componente SidebarCore Mobile
+const SidebarCoreMobile = ({
+  sections = MOCK_SECTIONS,
+  activeItem,
+  onItemClick,
+  companyName = 'HEXA Core',
+  companyLogo,
+  onCompanyClick,
+  itemBadges = {},
+  footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
+  footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
+  className = '',
+  ...props
+}) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  // Generar footerCollapsedContent automáticamente si no se proporciona pero sí hay footerText
+  const getFooterCollapsedContent = () => {
+    if (footerCollapsedContent) {
+      return footerCollapsedContent;
+    }
+    
+    // Si hay footerText pero no footerCollapsedContent, generar uno automáticamente
+    if (footerText && !footerCollapsedContent) {
+      if (typeof footerText === 'string') {
+        // Extraer la versión (parte antes del |) o usar todo el texto si no hay |
+        const parts = footerText.split('|');
+        return parts[0].trim() || footerText.trim();
+      } else if (typeof footerText === 'object' && footerText.version) {
+        return footerText.version;
+      }
+    }
+    
+    return null;
+  };
+
+  const effectiveFooterCollapsedContent = getFooterCollapsedContent();
+
+  return (
+    <>
+      <style>{`
+        .sidebar-core-mobile {
+          width: 100%;
+          transform: ${isMobileMenuOpen ? 'translateX(0)' : 'translateX(-100%)'};
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100vh;
+          z-index: 50;
+          transition: transform 0.3s ease-in-out;
+        }
+      `}</style>
+      {/* Botón hamburguesa - solo visible cuando el menú está cerrado */}
+      {!isMobileMenuOpen && (
+        <button
+          onClick={toggleMobileMenu}
+          className="fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-lg shadow-md 
+                   hover:bg-gray-50 transition-colors"
+          aria-label="Toggle menu"
+        >
+          <Icon
+            name="Bars3Icon"
+            variant="24-outline"
+            size={24}
+            className="color-gray-700"
+          />
+        </button>
+      )}
+      {/* Overlay para cerrar el menú */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40"
+          onClick={toggleMobileMenu}
+        />
+      )}
+      <aside
+        className={`bg-white border-r border-gray-200 sidebar-core-mobile ${className}`}
+        {...props}
+      >
+        <nav className="h-full flex flex-col">
+          {/* Header con "Core" y botón X */}
+          <div className="bg-white px-4 py-4 flex items-center justify-between border-b border-gray-200">
+            <Typography
+              variant="h5"
+              style={{ color: '#223B40', fontSize: '24px', fontWeight: 'normal' }}
+            >
+              Core
+            </Typography>
+            <button
+              onClick={toggleMobileMenu}
+              className="p-1 hover:bg-gray-100 rounded transition-colors"
+              aria-label="Cerrar menú"
+            >
+              <Icon
+                name="XMarkIcon"
+                variant="24-outline"
+                size={24}
+                className="color-gray-700"
+              />
+            </button>
+          </div>
+          {/* Contenido del sidebar mobile */}
+          <div className="flex-1 overflow-y-auto py-4">
+            {/* Item "Inicio" destacado */}
+            <div className="px-4 mb-4">
+              <button
+                onClick={() => {
+                  onItemClick && onItemClick('inicio');
+                  toggleMobileMenu();
+                }}
+                className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                  activeItem === 'inicio'
+                    ? ''
+                    : 'color-gray-700 hover:bg-gray-100'
+                }`}
+                style={
+                  activeItem === 'inicio'
+                    ? { backgroundColor: '#2D5C63' }
+                    : {}
+                }
+              >
+                <div className="flex items-center">
+                  <Icon
+                    name="HomeIcon"
+                    variant="24-outline"
+                    size={20}
+                    className={`mr-3 ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  />
+                  <Typography
+                    variant="body-md"
+                    className={`font-medium ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  >
+                    Inicio
+                  </Typography>
+                </div>
+                {itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
+                  <span
+                    className="px-2 py-0.5 min-w-[20px] h-5 
+                             text-white rounded-full flex items-center justify-center
+                             text-body-sm font-medium"
+                    style={{ 
+                      backgroundColor: '#6D3856',
+                      borderRadius: '12px'
+                    }}
+                  >
+                    {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
+                  </span>
+                )}
+              </button>
+            </div>
+
+            {/* Secciones */}
+            {sections.map((section, sectionIndex) => (
+              <div key={sectionIndex} className="mb-6">
+                {/* Título de la sección */}
+                <div className="px-4 mb-2">
+                  <Typography
+                    variant="body-sm"
+                    className="color-gray-500 uppercase font-medium tracking-wider"
+                  >
+                    {section.title}
+                  </Typography>
+                </div>
+
+                {/* Items de la sección */}
+                <div className="space-y-1">
+                  {section.items.map((item) => (
+                    <div key={item.id} className="px-4">
+                      <button
+                        onClick={() => {
+                          onItemClick && onItemClick(item.id);
+                          toggleMobileMenu();
+                        }}
+                        className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                          activeItem === item.id
+                            ? ''
+                            : 'color-gray-700 hover:bg-gray-100'
+                        }`}
+                        style={
+                          activeItem === item.id
+                            ? { backgroundColor: '#2D5C63' }
+                            : {}
+                        }
+                      >
+                        <div className="flex items-center">
+                          <Icon
+                            name={item.icon}
+                            variant="24-outline"
+                            size={20}
+                            className={`mr-3 ${
+                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                            }`}
+                          />
+                          <Typography
+                            variant="body-md"
+                            className={`font-medium ${
+                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                            }`}
+                          >
+                            {item.label}
+                          </Typography>
+                        </div>
+                        {((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
+                          <span
+                            className="px-2 py-0.5 min-w-[20px] h-5 
+                                     text-white rounded-full flex items-center justify-center
+                                     text-body-sm font-medium"
+                            style={{ 
+                              backgroundColor: '#6D3856',
+                              borderRadius: '12px'
+                            }}
+                          >
+                            {item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
+                          </span>
+                        )}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Footer con texto configurable */}
+          {footerText && (
+            <div className="px-4 pb-4 flex-shrink-0">
+              <div 
+                className="bg-white border rounded-lg px-3 py-2 flex items-center justify-center"
+                style={{ 
+                  borderColor: '#2D5C63',
+                  borderRadius: '8px'
+                }}
+              >
+                {typeof footerText === 'string' ? (
+                  <Typography
+                    variant="body-sm"
+                    style={{ color: '#2D5C63' }}
+                    className="text-center"
+                  >
+                    {(() => {
+                      const parts = footerText.split('|');
+                      if (parts.length === 2) {
+                        const leftPart = parts[0].trim();
+                        const rightPart = parts[1].trim();
+                        // Si contiene "Powered by", separar y poner la marca en bold
+                        if (rightPart.includes('Powered by')) {
+                          const poweredByMatch = rightPart.match(/Powered by (.+)/);
+                          if (poweredByMatch) {
+                            return (
+                              <>
+                                {leftPart} | Powered by <span className="font-bold">{poweredByMatch[1]}</span>
+                              </>
+                            );
+                          }
+                        }
+                        return `${leftPart} | ${rightPart}`;
+                      }
+                      return footerText;
+                    })()}
+                  </Typography>
+                ) : (
+                  <Typography
+                    variant="body-sm"
+                    style={{ color: '#2D5C63' }}
+                    className="text-center"
+                  >
+                    {footerText.version && `${footerText.version}`}
+                    {footerText.version && (footerText.poweredBy || footerText.brand) && ' | '}
+                    {footerText.poweredBy && `${footerText.poweredBy} `}
+                    {footerText.brand && <span className="font-bold">{footerText.brand}</span>}
+                  </Typography>
+                )}
+              </div>
+            </div>
+          )}
+        </nav>
+      </aside>
+    </>
+  );
+};
+
 export const SidebarCore = ({
   sections = MOCK_SECTIONS,
   activeItem,
@@ -32,33 +322,94 @@ export const SidebarCore = ({
   nucleusLogo,
   onNucleusClick,
   itemBadges = {}, // Objeto con { itemId: number } para los badges
+  footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
+  footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
   className = '',
   ...props
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detectar tamaño de pantalla
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    // Verificar al montar
+    checkMobile();
+
+    // Escuchar cambios de tamaño
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
 
   const toggleCollapse = () => {
     setIsCollapsed(!isCollapsed);
   };
 
+  // Generar footerCollapsedContent automáticamente si no se proporciona pero sí hay footerText
+  const getFooterCollapsedContent = () => {
+    if (footerCollapsedContent) {
+      return footerCollapsedContent;
+    }
+    
+    // Si hay footerText pero no footerCollapsedContent, generar uno automáticamente
+    if (footerText && !footerCollapsedContent) {
+      if (typeof footerText === 'string') {
+        // Extraer la versión (parte antes del |) o usar todo el texto si no hay |
+        const parts = footerText.split('|');
+        return parts[0].trim() || footerText.trim();
+      } else if (typeof footerText === 'object' && footerText.version) {
+        return footerText.version;
+      }
+    }
+    
+    return null;
+  };
+
+  const effectiveFooterCollapsedContent = getFooterCollapsedContent();
+
+  // Si es mobile, renderizar SidebarCoreMobile
+  if (isMobile) {
+    return (
+      <SidebarCoreMobile
+        sections={sections}
+        activeItem={activeItem}
+        onItemClick={onItemClick}
+        companyName={companyName}
+        companyLogo={companyLogo}
+        onCompanyClick={onCompanyClick}
+        itemBadges={itemBadges}
+        footerText={footerText}
+        footerCollapsedContent={footerCollapsedContent}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
   return (
     <aside
-      className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out ${
+      className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out h-full ${
         isCollapsed ? 'w-20' : 'w-64'
       } ${className}`}
       {...props}
     >
-      <nav className="h-full flex flex-col overflow-hidden">
+      <nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
         {/* Barra superior con HEXA Core */}
         {!isCollapsed && (
-          <div className="p-4 border-b border-gray-200">
+          <div className="p-4 border-b border-gray-200 flex-shrink-0">
             <button
               onClick={onCompanyClick}
               className="w-full bg-white rounded-lg px-3 py-2.5 
                        flex items-center justify-between hover:bg-gray-50 transition-colors"
             >
               <div className="flex items-center space-x-3">
-                {/* Icono cuadrado oscuro con H */}
+                {/* Logo hexagonal */}
                 {companyLogo ? (
                   <img
                     src={companyLogo}
@@ -66,14 +417,7 @@ export const SidebarCore = ({
                     className="w-8 h-8 rounded"
                   />
                 ) : (
-                  <div className="w-8 h-8 bg-gray-700 rounded flex items-center justify-center">
-                    <Typography
-                      variant="body-md"
-                      className="color-white font-bold"
-                    >
-                      H
-                    </Typography>
-                  </div>
+                  <LogoHexa width={36} height={40} />
                 )}
                 {/* Nombre de la empresa */}
                 <Typography
@@ -86,45 +430,10 @@ export const SidebarCore = ({
             </button>
           </div>
         )}
-        {/* Botón Nucleus AR */}
-        {!isCollapsed && (
-          <div className="bg-gray-100 py-4 w-full">
-            <div className="px-4">
-              <button
-                onClick={onNucleusClick}
-                className="w-full flex items-center px-4 py-2.5 rounded-lg 
-                         transition-all duration-200 color-gray-700 hover:bg-gray-200
-                         justify-between"
-              >
-              <div className="flex items-center">
-                <Icon
-                  name="BuildingOfficeIcon"
-                  variant="24-outline"
-                  size={20}
-                  className="mr-3 color-teal"
-                />
-                <Typography
-                  variant="body-md"
-                  className="font-medium color-gray-700"
-                >
-                  {nucleusName}
-                </Typography>
-              </div>
-              {/* Chevron hacia abajo */}
-              <Icon
-                name="ChevronDownIcon"
-                variant="24-outline"
-                size={16}
-                className="color-teal"
-              />
-              </button>
-            </div>
-          </div>
-        )}
 
         {/* Botón de colapsar/expandir - Solo visible cuando está expandido */}
         {!isCollapsed && (
-          <div className="px-4 pb-2 flex justify-end">
+          <div className="px-4 pt-2 pb-2 flex justify-end flex-shrink-0">
             <button
               onClick={toggleCollapse}
               className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
@@ -141,9 +450,9 @@ export const SidebarCore = ({
           </div>
         )}
 
-        {/* Logo H cuando está colapsado */}
+        {/* Logo cuando está colapsado */}
         {isCollapsed && (
-          <div className="p-4 border-b border-gray-200 flex justify-center">
+          <div className="p-4 border-b border-gray-200 flex justify-center flex-shrink-0">
             {companyLogo ? (
               <img
                 src={companyLogo}
@@ -151,47 +460,14 @@ export const SidebarCore = ({
                 className="w-8 h-8 rounded"
               />
             ) : (
-              <div className="w-8 h-8 bg-gray-700 rounded flex items-center justify-center">
-                <Typography
-                  variant="body-md"
-                  className="color-white font-bold"
-                >
-                  H
-                </Typography>
-              </div>
+              <LogoHexa width={36} height={40} />
             )}
           </div>
         )}
 
-        {/* Botón Nucleus AR cuando está colapsado */}
-        {isCollapsed && (
-          <div className="bg-gray-100 py-4 w-full">
-            <div className="px-4 flex justify-center">
-              <button
-                onClick={onNucleusClick}
-                className="flex items-center justify-center p-2.5 rounded-lg 
-                         transition-all duration-200 color-gray-700 hover:bg-gray-200"
-              >
-                <Icon
-                  name="BuildingOfficeIcon"
-                  variant="24-outline"
-                  size={20}
-                  className="color-teal"
-                />
-                <Icon
-                  name="ChevronDownIcon"
-                  variant="24-outline"
-                  size={16}
-                  className="ml-1 color-teal"
-                />
-              </button>
-            </div>
-          </div>
-        )}
-
         {/* Botón para expandir - Solo visible cuando está colapsado */}
         {isCollapsed && (
-          <div className="px-4 pb-2 flex justify-center">
+          <div className="px-4 pt-2 pb-2 flex justify-center flex-shrink-0">
             <button
               onClick={toggleCollapse}
               className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
@@ -207,8 +483,9 @@ export const SidebarCore = ({
           </div>
         )}
 
-        {/* Contenido del sidebar */}
-        <div className="flex-1 overflow-y-auto py-4">
+        {/* Contenido del sidebar - Wrapper para controlar el espacio */}
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+          <div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
           {/* Item "Inicio" destacado */}
           <div className="px-4 mb-4">
             <button
@@ -226,7 +503,7 @@ export const SidebarCore = ({
                   : {}
               }
             >
-              <div className="flex items-center">
+              <div className={`flex items-center ${isCollapsed ? 'relative' : ''}`} style={isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 ? { paddingRight: '16px' } : {}}>
                 <Icon
                   name="HomeIcon"
                   variant="24-outline"
@@ -245,6 +522,22 @@ export const SidebarCore = ({
                     Inicio
                   </Typography>
                 )}
+                {isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
+                  <span
+                    className="px-2 py-0.5 min-w-[20px] h-5 
+                             text-white rounded-full flex items-center justify-center
+                             text-body-sm font-medium absolute"
+                    style={{
+                      backgroundColor: '#6D3856',
+                      borderRadius: '12px',
+                      top: '-4px',
+                      right: '-4px',
+                      zIndex: 10
+                    }}
+                  >
+                    {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
+                  </span>
+                )}
               </div>
               {!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
                 <span
@@ -265,7 +558,14 @@ export const SidebarCore = ({
           {/* Secciones */}
           {sections.map((section, sectionIndex) => (
             <div key={sectionIndex} className="mb-6">
-              {/* Título de la sección */}
+              {/* Línea separadora cuando está colapsado - antes de cada sección */}
+              {isCollapsed && (
+                <div className="px-4 mb-4">
+                  <div className="border-t" style={{ borderColor: '#2D5C63' }}></div>
+                </div>
+              )}
+              
+              {/* Título de la sección - solo visible cuando NO está colapsado */}
               {!isCollapsed && (
                 <div className="px-4 mb-2">
                   <Typography
@@ -297,7 +597,7 @@ export const SidebarCore = ({
                       }
                       title={isCollapsed ? item.label : ''}
                     >
-                      <div className="flex items-center">
+                      <div className={`flex items-center ${isCollapsed ? 'relative' : ''}`} style={isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) ? { paddingRight: '16px' } : {}}>
                         <Icon
                           name={item.icon}
                           variant="24-outline"
@@ -316,6 +616,22 @@ export const SidebarCore = ({
                             {item.label}
                           </Typography>
                         )}
+                        {isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
+                          <span
+                            className="px-2 py-0.5 min-w-[20px] h-5 
+                                     text-white rounded-full flex items-center justify-center
+                                     text-body-sm font-medium absolute"
+                            style={{
+                              backgroundColor: '#6D3856',
+                              borderRadius: '12px',
+                              top: '-4px',
+                              right: '-4px',
+                              zIndex: 10
+                            }}
+                          >
+                            {item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
+                          </span>
+                        )}
                       </div>
                       {!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
                         <span
@@ -336,11 +652,128 @@ export const SidebarCore = ({
               </div>
             </div>
           ))}
+          </div>
         </div>
+
+        {/* Footer con texto configurable - cuando está expandido */}
+        {footerText && !isCollapsed && (
+          <div className="px-4 pb-4 flex-shrink-0">
+            <div 
+              className="bg-white border rounded-lg px-3 py-2 flex items-center justify-center"
+              style={{ 
+                borderColor: '#2D5C63',
+                borderRadius: '8px'
+              }}
+            >
+              {typeof footerText === 'string' ? (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {(() => {
+                    const parts = footerText.split('|');
+                    if (parts.length === 2) {
+                      const leftPart = parts[0].trim();
+                      const rightPart = parts[1].trim();
+                      // Si contiene "Powered by", separar y poner la marca en bold
+                      if (rightPart.includes('Powered by')) {
+                        const poweredByMatch = rightPart.match(/Powered by (.+)/);
+                        if (poweredByMatch) {
+                          return (
+                            <>
+                              {leftPart} | Powered by <span className="font-bold">{poweredByMatch[1]}</span>
+                            </>
+                          );
+                        }
+                      }
+                      return `${leftPart} | ${rightPart}`;
+                    }
+                    return footerText;
+                  })()}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {footerText.version && `${footerText.version}`}
+                  {footerText.version && (footerText.poweredBy || footerText.brand) && ' | '}
+                  {footerText.poweredBy && `${footerText.poweredBy} `}
+                  {footerText.brand && <span className="font-bold">{footerText.brand}</span>}
+                </Typography>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Footer cuando está colapsado */}
+        {effectiveFooterCollapsedContent && isCollapsed && (
+          <div className="flex justify-center flex-shrink-0" style={{ zIndex: 10, paddingTop: '10px', paddingBottom: '10px' }}>
+            <div 
+              className="bg-white border flex items-center justify-center"
+              style={{ 
+                width: '52px',
+                height: '40px',
+                borderRadius: '8px',
+                border: '1px solid #29474C',
+                paddingTop: '8px',
+                paddingRight: '12px',
+                paddingBottom: '8px',
+                paddingLeft: '12px'
+              }}
+            >
+              {typeof effectiveFooterCollapsedContent === 'string' ? (
+                <span
+                  style={{ 
+                    color: '#2D5C63', 
+                    fontSize: '12px', 
+                    lineHeight: '1.2',
+                    fontWeight: '600',
+                    textAlign: 'center',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%'
+                  }}
+                >
+                  {effectiveFooterCollapsedContent}
+                </span>
+              ) : typeof effectiveFooterCollapsedContent === 'object' && effectiveFooterCollapsedContent.icon ? (
+                <div className="flex items-center justify-center">
+                  {effectiveFooterCollapsedContent.icon && (
+                    <Icon
+                      name={effectiveFooterCollapsedContent.icon}
+                      variant="24-outline"
+                      size={14}
+                      style={{ color: '#2D5C63' }}
+                    />
+                  )}
+                  {effectiveFooterCollapsedContent.text && (
+                    <span
+                      style={{ 
+                        color: '#2D5C63', 
+                        fontSize: '12px',
+                        marginLeft: effectiveFooterCollapsedContent.icon ? '4px' : '0'
+                      }}
+                    >
+                      {effectiveFooterCollapsedContent.text}
+                    </span>
+                  )}
+                </div>
+              ) : (
+                effectiveFooterCollapsedContent
+              )}
+            </div>
+          </div>
+        )}
       </nav>
     </aside>
   );
 };
 
+// Exportar ambos componentes
+export { SidebarCoreMobile };
 export default SidebarCore;