feat: redesign navigation with brutalist dark mode and simplified bottom nav
Some checks are pending
Deploy Código 0 / deploy (push) Waiting to run
Some checks are pending
Deploy Código 0 / deploy (push) Waiting to run
This commit is contained in:
Javier
parent
3d2ff44bfa
commit
c96b695c3d
|
|
@ -1,5 +1,5 @@
|
|||
import { NavLink } from 'react-router-dom';
|
||||
import { Home, AlertTriangle, Stethoscope, Video, Pill, Wrench, Heart, Clock, Zap } from 'lucide-react';
|
||||
import { Home, AlertTriangle, Stethoscope, Video, Pill, Wrench, Heart, Clock, Zap, BookOpen } from 'lucide-react';
|
||||
|
||||
interface NavItem {
|
||||
path: string;
|
||||
|
|
@ -8,15 +8,11 @@ interface NavItem {
|
|||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/', icon: <Home className="w-5 h-5" />, label: 'Home' },
|
||||
{ path: '/urgencias', icon: <Zap className="w-5 h-5" />, label: 'Urgenc.' },
|
||||
{ path: '/favoritos', icon: <Heart className="w-5 h-5" />, label: 'Favor.' },
|
||||
{ path: '/historial', icon: <Clock className="w-5 h-5" />, label: 'Recient.' },
|
||||
{ path: '/soporte-vital', icon: <AlertTriangle className="w-5 h-5" />, label: 'Soporte' },
|
||||
{ path: '/patologias', icon: <Stethoscope className="w-5 h-5" />, label: 'Patologías' },
|
||||
{ path: '/escena', icon: <Video className="w-5 h-5" />, label: 'Escena' },
|
||||
{ path: '/farmacos', icon: <Pill className="w-5 h-5" />, label: 'Fármacos' },
|
||||
{ path: '/', icon: <Home className="w-5 h-5" />, label: 'Inicio' },
|
||||
{ path: '/soporte-vital', icon: <Zap className="w-5 h-5 text-primary" />, label: 'Protocolos' },
|
||||
{ path: '/herramientas', icon: <Wrench className="w-5 h-5" />, label: 'Herram.' },
|
||||
{ path: '/urgencias', icon: <AlertTriangle className="w-5 h-5" />, label: 'Emergencia' },
|
||||
{ path: '/manual', icon: <BookOpen className="w-5 h-5" />, label: 'Manual' },
|
||||
];
|
||||
|
||||
const BottomNav = () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { X } from 'lucide-react';
|
||||
import { X, Home, AlertTriangle, Stethoscope, Video, Pill, Wrench, Heart, Clock, Zap, Info, Settings, Image, Phone, MessageSquare, Briefcase, BookOpen, GraduationCap, ShieldAlert } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface MenuSheetProps {
|
||||
|
|
@ -9,54 +9,103 @@ interface MenuSheetProps {
|
|||
const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const menuGroups = [
|
||||
{
|
||||
title: "Protocolos y Clínico",
|
||||
items: [
|
||||
{ to: "/soporte-vital", label: "Soporte Vital", icon: <AlertTriangle className="w-4 h-4" /> },
|
||||
{ to: "/patologias", label: "Patologías", icon: <Stethoscope className="w-4 h-4" /> },
|
||||
{ to: "/via-aerea", label: "Vía Aérea", icon: <Zap className="w-4 h-4" /> },
|
||||
{ to: "/parto", label: "Emergencias Obstétricas", icon: <ShieldAlert className="w-4 h-4" /> },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Herramientas Operativas",
|
||||
items: [
|
||||
{ to: "/herramientas", label: "Panel de Calculadoras", icon: <Wrench className="w-4 h-4" /> },
|
||||
{ to: "/material", label: "Material y Checklists", icon: <Briefcase className="w-4 h-4" /> },
|
||||
{ to: "/escena", label: "Gestión de Escena", icon: <Video className="w-4 h-4" /> },
|
||||
{ to: "/farmacos", label: "Guía de Fármacos", icon: <Pill className="w-4 h-4" /> },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Manuales y Formación",
|
||||
items: [
|
||||
{ to: "/manual", label: "Manual del TES (Wiki)", icon: <BookOpen className="w-4 h-4" /> },
|
||||
{ to: "/guia-refuerzo", label: "Guías de Refuerzo", icon: <GraduationCap className="w-4 h-4" /> },
|
||||
{ to: "/galeria", label: "Galería de Técnicas", icon: <Image className="w-4 h-4" /> },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Comunicación y Otros",
|
||||
items: [
|
||||
{ to: "/telefono", label: "Proto. Telefónicos", icon: <Phone className="w-4 h-4" /> },
|
||||
{ to: "/comunicacion", label: "Guiones de Radio", icon: <MessageSquare className="w-4 h-4" /> },
|
||||
{ to: "/favoritos", label: "Favoritos", icon: <Heart className="w-4 h-4" /> },
|
||||
{ to: "/historial", label: "Historial Reciente", icon: <Clock className="w-4 h-4" /> },
|
||||
{ to: "/ajustes", label: "Ajustes", icon: <Settings className="w-4 h-4" /> },
|
||||
{ to: "/acerca", label: "Acerca de", icon: <Info className="w-4 h-4" /> },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-[90] bg-black/50"
|
||||
className="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in"
|
||||
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>
|
||||
<div className="fixed top-0 right-0 bottom-0 z-[95] w-80 max-w-[85vw] bg-background border-l-4 border-primary shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col animate-in slide-in-from-right duration-300">
|
||||
<div className="flex items-center justify-between h-20 px-6 border-b-2 border-primary bg-card">
|
||||
<div>
|
||||
<h2 className="font-black text-2xl uppercase tracking-tighter text-foreground italic">Menú</h2>
|
||||
<div className="h-1 w-12 bg-primary mt-1" />
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||||
className="w-12 h-12 flex items-center justify-center bg-primary text-primary-foreground hover:bg-primary/90 transition-all active:scale-90 border-2 border-black"
|
||||
aria-label="Cerrar menú"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-600" />
|
||||
<X className="w-6 h-6 stroke-[3px]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-2">
|
||||
<div className="flex-1 overflow-y-auto scrollbar-hide py-6 px-4 space-y-8">
|
||||
{menuGroups.map((group, idx) => (
|
||||
<div key={idx} className="space-y-4">
|
||||
<h3 className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-foreground px-2 border-l-2 border-primary/30">
|
||||
{group.title}
|
||||
</h3>
|
||||
<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>
|
||||
{group.items.map((item) => (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-4 px-3 py-3 rounded-none border-b border-white/5 hover:bg-primary/10 hover:border-primary/50 text-foreground transition-all group"
|
||||
>
|
||||
<div className="w-8 h-8 flex items-center justify-center bg-white/5 group-hover:bg-primary/20 group-hover:text-primary transition-colors border border-white/10 group-hover:border-primary/50">
|
||||
{item.icon}
|
||||
</div>
|
||||
<span className="font-semibold text-sm tracking-tight">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
))}
|
||||
</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">
|
||||
<div className="p-6 border-t-2 border-primary/20 bg-card/50">
|
||||
<div className="flex flex-col gap-1 items-center justify-center">
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-primary">
|
||||
codigo0 v1.2.0
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 text-center mt-1">
|
||||
0 Errores. 0 Dudas.
|
||||
<p className="text-[9px] text-muted-foreground font-medium italic">
|
||||
0 ERRORES. 0 DUDAS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue