530 lines
23 KiB
JavaScript
530 lines
23 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useUser } from '../context/UserContext';
|
|
|
|
export default function Sidebar({ isMobileOpen, onMobileClose }) {
|
|
// Leer si el usuario es importador desde localStorage
|
|
const isImportador = typeof window !== 'undefined' && localStorage.getItem('user_is_importador') === 'true';
|
|
// Leer grupos del usuario desde localStorage
|
|
let userGroups = [];
|
|
if (typeof window !== 'undefined') {
|
|
try {
|
|
userGroups = JSON.parse(localStorage.getItem('user_groups') || '[]');
|
|
} catch {
|
|
userGroups = [];
|
|
}
|
|
}
|
|
// Si los grupos son exactamente [3,5]
|
|
const isGroup35 = Array.isArray(userGroups) && userGroups.length === 2 && userGroups.includes(3) && userGroups.includes(5);
|
|
// Leer DEBUG_MODE desde variables de entorno
|
|
const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
|
|
|
|
// Estados para responsividad
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const [internalMobileOpen, setInternalMobileOpen] = useState(false);
|
|
|
|
// Usar estado interno si no se pasan props
|
|
const mobileOpen = isMobileOpen !== undefined ? isMobileOpen : internalMobileOpen;
|
|
const handleMobileClose = onMobileClose || (() => setInternalMobileOpen(false));
|
|
const handleMobileOpen = () => setInternalMobileOpen(true);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { user: currentUser, loading } = useUser();
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('access');
|
|
localStorage.removeItem('refresh');
|
|
window.dispatchEvent(new CustomEvent('authStateChanged'));
|
|
navigate('/login');
|
|
};
|
|
|
|
// Cerrar menú móvil cuando se navega o cuando la pantalla es grande
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
if (window.innerWidth >= 1024) { // lg breakpoint
|
|
handleMobileClose();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
// Cerrar menú móvil cuando cambia la ubicación
|
|
useEffect(() => {
|
|
handleMobileClose();
|
|
}, [location.pathname]);
|
|
|
|
// El usuario y loading ahora vienen del contexto global
|
|
|
|
// Definir todas las secciones
|
|
const allMenuSections = [
|
|
{
|
|
title: 'Organización',
|
|
items: [
|
|
{
|
|
name: 'Home',
|
|
path: '/admin',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
)
|
|
},
|
|
// Ocultar 'Mi Organización' si es importador o si esGroup35
|
|
...(
|
|
(!isImportador && !isGroup35)
|
|
? [
|
|
{
|
|
name: 'Mi Organización',
|
|
path: '/organization',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
: []
|
|
)
|
|
]
|
|
},
|
|
{
|
|
title: 'Servicios',
|
|
items: [
|
|
{
|
|
name: 'Procesos',
|
|
path: '/procesos',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
name: 'Auditor',
|
|
path: '/auditor',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Documentación',
|
|
items: [
|
|
// Mostrar Reportes siempre
|
|
{
|
|
name: 'Reportes',
|
|
path: '/reports',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
name: 'Expedientes',
|
|
path: '/expedientes',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<rect x="3" y="7" width="18" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M16 3H8a2 2 0 00-2 2v2h12V5a2 2 0 00-2-2z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
name: 'Documentos',
|
|
path: '/documents',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
)
|
|
},
|
|
{
|
|
name: 'Datastage',
|
|
path: '/datastage',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<ellipse cx="12" cy="7" rx="8" ry="3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M4 7v10c0 1.657 3.582 3 8 3s8-1.343 8-3V7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M4 17c0 1.657 3.582 3 8 3s8-1.343 8-3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
),
|
|
onClick: () => navigate('/datastage')
|
|
}
|
|
]
|
|
},
|
|
// Nueva sección Tableros - Solo mostrar si DEBUG_MODE es true
|
|
...(
|
|
(isDebugMode && !isGroup35)
|
|
? [
|
|
{
|
|
title: 'Tableros',
|
|
items: [
|
|
{
|
|
name: 'Resumen de cumplimiento',
|
|
path: '/tablero/cumplimiento',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
}
|
|
]
|
|
: []
|
|
),
|
|
...(
|
|
isGroup35
|
|
? []
|
|
: [
|
|
{
|
|
title: 'Acceso a Usuarios',
|
|
items: [
|
|
// Botón Importadores como primer elemento
|
|
{
|
|
name: 'Importadores',
|
|
path: '/importers',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 01-8 0M12 11v10m-6 0h12a2 2 0 002-2v-5a2 2 0 00-2-2H6a2 2 0 00-2 2v5a2 2 0 002 2z" />
|
|
</svg>
|
|
)
|
|
},
|
|
...(
|
|
isImportador
|
|
? []
|
|
: [
|
|
{
|
|
name: 'Usuarios',
|
|
path: '/users',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
),
|
|
{
|
|
name: 'Ventanilla Única',
|
|
path: '/vucem',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h8M12 8v8" />
|
|
</svg>
|
|
)
|
|
}
|
|
]
|
|
}
|
|
]
|
|
)
|
|
];
|
|
|
|
// Filtrar secciones según si es importador y modo debug
|
|
// Modificar items según si es importador
|
|
const menuSections = allMenuSections
|
|
.map(section => {
|
|
if (section.title === 'Organización') {
|
|
return {
|
|
...section,
|
|
items: section.items.filter(item => !(isImportador && item.name === 'Mi Organización'))
|
|
};
|
|
}
|
|
// Para Tableros, filtrar la sección si es importador o si no está en modo debug
|
|
if (section.title === 'Tableros' && (isImportador || !isDebugMode)) {
|
|
return null;
|
|
}
|
|
return section;
|
|
})
|
|
.filter(Boolean);
|
|
|
|
return (
|
|
<>
|
|
{/* Botón flotante para abrir menú en móvil - solo cuando se usa standalone */}
|
|
{!mobileOpen && isMobileOpen === undefined && (
|
|
<button
|
|
onClick={handleMobileOpen}
|
|
className="lg:hidden fixed top-4 left-4 z-30 p-2.5 bg-slate-900/95 backdrop-blur-sm text-white rounded-xl shadow-lg hover:bg-slate-800/95 transition-all duration-200 border border-slate-700/50"
|
|
aria-label="Abrir menú"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
|
|
{/* Overlay para móviles */}
|
|
{mobileOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
|
onClick={handleMobileClose}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<div className={`
|
|
bg-slate-900 text-white transition-all duration-300 flex flex-col shadow-xl
|
|
${isCollapsed ? 'w-16' : 'w-64'}
|
|
fixed lg:relative inset-y-0 left-0 z-50
|
|
${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
|
h-screen
|
|
`}>
|
|
{/* Header - Logo y colapsar */}
|
|
<div className="p-4 border-b border-slate-700 flex-shrink-0">
|
|
<div className="flex items-center justify-between">
|
|
{!isCollapsed && (
|
|
<div className="flex items-center">
|
|
{/* Logo de la organización */}
|
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-3 shadow-lg">
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
</div>
|
|
<h1 className="text-lg font-bold text-white">EFC Dashboard</h1>
|
|
</div>
|
|
)}
|
|
|
|
{/* Botones de control */}
|
|
<div className="flex items-center space-x-2">
|
|
{/* Botón cerrar en móvil */}
|
|
<button
|
|
onClick={handleMobileClose}
|
|
className="lg:hidden p-1.5 rounded-lg hover:bg-slate-700 transition-all duration-200"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Botón colapsar en desktop */}
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className="hidden lg:block p-1.5 rounded-lg hover:bg-slate-700 transition-all duration-200 hover:shadow-md"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{isCollapsed ? (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
|
) : (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-3 space-y-4 overflow-y-auto overflow-x-hidden">
|
|
{menuSections.map((section, sectionIndex) => (
|
|
<div key={sectionIndex} className="space-y-1">
|
|
{/* Título de la sección */}
|
|
{!isCollapsed && (
|
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 py-1">
|
|
{section.title}
|
|
</h3>
|
|
)}
|
|
|
|
{/* Items de la sección */}
|
|
<div className="space-y-1">
|
|
{section.items.map((item) => {
|
|
const isActive = location.pathname === item.path;
|
|
const isDisabled = item.disabled;
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={isDisabled ? '#' : item.path}
|
|
className={`flex items-center px-3 py-2.5 text-sm rounded-lg transition-all duration-200 group relative ${
|
|
isDisabled
|
|
? 'opacity-50 cursor-not-allowed pointer-events-none bg-slate-800 text-gray-500'
|
|
: isActive
|
|
? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg transform scale-[1.02]'
|
|
: 'text-gray-300 hover:bg-slate-700 hover:text-white hover:transform hover:scale-[1.01]'
|
|
}`}
|
|
title={isCollapsed ? item.name : ''}
|
|
tabIndex={isDisabled ? -1 : 0}
|
|
aria-disabled={isDisabled ? 'true' : 'false'}
|
|
>
|
|
{/* Indicador activo lateral */}
|
|
{isActive && !isDisabled && (
|
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-cyan-400 rounded-r-full"></div>
|
|
)}
|
|
<div className="flex-shrink-0">
|
|
{item.icon}
|
|
</div>
|
|
{!isCollapsed && (
|
|
<span className="ml-3 font-medium">{item.name}</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Línea separadora entre secciones (excepto la última) */}
|
|
{!isCollapsed && sectionIndex < menuSections.length - 1 && (
|
|
<div className="border-b border-slate-600 mx-3 my-3"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Configuración */}
|
|
<div className="p-3 border-t border-slate-700 flex-shrink-0">
|
|
<Link
|
|
to="/settings"
|
|
className={`flex items-center px-3 py-2.5 text-sm rounded-lg transition-all duration-200 group ${
|
|
location.pathname === '/settings'
|
|
? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg'
|
|
: 'text-gray-300 hover:bg-slate-700 hover:text-white hover:shadow-md'
|
|
}`}
|
|
title={isCollapsed ? 'Configuración' : ''}
|
|
>
|
|
<div className="flex-shrink-0">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
{!isCollapsed && (
|
|
<span className="ml-3 font-medium">Configuración</span>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Footer - Perfil del Usuario */}
|
|
<div className="p-3 border-t border-slate-700 flex-shrink-0">
|
|
{!isCollapsed ? (
|
|
<div className="space-y-3">
|
|
{/* Información del usuario */}
|
|
<div className="flex items-center space-x-3 p-2 bg-slate-800 rounded-lg">
|
|
<div className="flex-shrink-0">
|
|
{currentUser?.profile_picture ? (
|
|
<img
|
|
className="w-10 h-10 rounded-full ring-2 ring-blue-500 shadow-lg"
|
|
src={currentUser.profile_picture}
|
|
alt="Avatar del usuario"
|
|
/>
|
|
) : (
|
|
<div className="w-10 h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded-full ring-2 ring-blue-500 flex items-center justify-center shadow-lg">
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
{loading ? (
|
|
<div className="animate-pulse">
|
|
<div className="h-4 bg-slate-600 rounded w-24 mb-1"></div>
|
|
<div className="h-3 bg-slate-700 rounded w-16"></div>
|
|
</div>
|
|
) : currentUser ? (
|
|
<>
|
|
<p className="text-sm font-medium text-white truncate">
|
|
{currentUser.first_name} {currentUser.last_name}
|
|
</p>
|
|
<p className="text-xs text-gray-400 truncate">
|
|
{currentUser.username}
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-sm font-medium text-white truncate">
|
|
Usuario
|
|
</p>
|
|
<p className="text-xs text-gray-400 truncate">
|
|
Sin datos
|
|
</p>
|
|
</>
|
|
)}
|
|
{/* Debug temporal */}
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<div className="text-xs text-orange-400 mt-1">
|
|
Debug: {loading ? 'Cargando...' : currentUser ? 'Datos OK' : 'Sin datos'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Botón de logout más pequeño */}
|
|
<div className="pt-1">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full inline-flex items-center justify-center px-3 py-2.5 border border-transparent text-xs font-medium rounded-lg text-white bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:ring-offset-slate-900 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02]"
|
|
>
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
Cerrar sesión
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center space-y-3">
|
|
{/* Avatar pequeño */}
|
|
{currentUser?.profile_picture ? (
|
|
<img
|
|
className="w-10 h-10 rounded-full ring-2 ring-blue-500 shadow-lg hover:ring-blue-400 transition-all duration-200"
|
|
src={currentUser.profile_picture}
|
|
alt="Avatar del usuario"
|
|
title={currentUser ? `${currentUser.first_name} ${currentUser.last_name} - ${currentUser.username}` : 'Usuario'}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="w-10 h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded-full ring-2 ring-blue-500 flex items-center justify-center shadow-lg hover:ring-blue-400 transition-all duration-200"
|
|
title={currentUser ? `${currentUser.first_name} ${currentUser.last_name} - ${currentUser.username}` : 'Usuario'}
|
|
>
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
{/* Botón de logout compacto */}
|
|
<button
|
|
onClick={handleLogout}
|
|
className="p-2 text-gray-300 hover:text-white bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
|
|
title="Cerrar sesión"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Hook personalizado para manejar el menú móvil desde otros componentes
|
|
export function useMobileSidebar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggle = () => setIsOpen(prev => !prev);
|
|
const close = () => setIsOpen(false);
|
|
|
|
return { isOpen, toggle, close };
|
|
}
|
|
|
|
// Componente botón para abrir menú móvil
|
|
export function MobileMenuButton({ onClick }) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="lg:hidden p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors duration-200"
|
|
aria-label="Abrir menú"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
);
|
|
}
|