64 lines
3.1 KiB
TypeScript
64 lines
3.1 KiB
TypeScript
|
import { X } from 'lucide-react';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
interface MenuSheetProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 z-[90] bg-black/50"
|
||
|
|
onClick={onClose}
|
||
|
|
/>
|
||
|
|
<div className="fixed top-0 right-0 bottom-0 z-[95] w-80 max-w-[85vw] bg-white border-l border-gray-200 shadow-xl">
|
||
|
|
<div className="flex items-center justify-between h-14 px-4 border-b border-gray-200">
|
||
|
|
<h2 className="font-semibold text-gray-800">Menú</h2>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||
|
|
aria-label="Cerrar menú"
|
||
|
|
>
|
||
|
|
<X className="w-5 h-5 text-gray-600" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-4 space-y-2">
|
||
|
|
<nav className="space-y-1">
|
||
|
|
<Link to="/" className="block px-3 py-2 rounded hover:bg-gray-50">Inicio</Link>
|
||
|
|
<Link to="/soporte-vital" className="block px-3 py-2 rounded hover:bg-gray-50">Soporte Vital</Link>
|
||
|
|
<Link to="/patologias" className="block px-3 py-2 rounded hover:bg-gray-50">Patologías</Link>
|
||
|
|
<Link to="/escena" className="block px-3 py-2 rounded hover:bg-gray-50">Escena</Link>
|
||
|
|
<Link to="/herramientas" className="block px-3 py-2 rounded hover:bg-gray-50">Herramientas</Link>
|
||
|
|
<Link to="/farmacos" className="block px-3 py-2 rounded hover:bg-gray-50">Fármacos</Link>
|
||
|
|
<Link to="/manual" className="block px-3 py-2 rounded hover:bg-gray-50">Manual Completo</Link>
|
||
|
|
<Link to="/guia-refuerzo" className="block px-3 py-2 rounded hover:bg-gray-50">Guías de Refuerzo</Link>
|
||
|
|
<Link to="/telefono" className="block px-3 py-2 rounded hover:bg-gray-50">Protocolos Telefonicos</Link>
|
||
|
|
<Link to="/comunicacion" className="block px-3 py-2 rounded hover:bg-gray-50">Guiones de Comunicación</Link>
|
||
|
|
<Link to="/material" className="block px-3 py-2 rounded hover:bg-gray-50">Material y Checklists</Link>
|
||
|
|
<Link to="/favoritos" className="block px-3 py-2 rounded hover:bg-gray-50">Favoritos</Link>
|
||
|
|
<Link to="/historial" className="block px-3 py-2 rounded hover:bg-gray-50">Historial</Link>
|
||
|
|
<Link to="/ajustes" className="block px-3 py-2 rounded hover:bg-gray-50">Ajustes</Link>
|
||
|
|
<Link to="/galeria" className="block px-3 py-2 rounded hover:bg-gray-50">Galería</Link>
|
||
|
|
<Link to="/acerca" className="block px-3 py-2 rounded hover:bg-gray-50">Acerca de</Link>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
|
||
|
|
<p className="text-xs text-gray-500 text-center">
|
||
|
|
codigo0 v1.2.0
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-gray-500 text-center mt-1">
|
||
|
|
0 Errores. 0 Dudas.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MenuSheet;
|