planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

feat: redesign navigation with brutalist dark mode and simplified bottom nav
Some checks are pending
Deploy Código 0 / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
Javier 2026-03-25 11:29:20 +01:00
parent 3d2ff44bfa
commit c96b695c3d
2 changed files with 87 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/layout/BottomNav.tsx
View file

@ -1,5 +1,5 @@
import { NavLink } from 'react-router-dom'; 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 { interface NavItem {
path: string; path: string;
@ -8,15 +8,11 @@ interface NavItem {
} }
const navItems: NavItem[] = [ const navItems: NavItem[] = [
{ path: '/', icon: <Home className="w-5 h-5" />, label: 'Home' }, { path: '/', icon: <Home className="w-5 h-5" />, label: 'Inicio' },
{ path: '/urgencias', icon: <Zap className="w-5 h-5" />, label: 'Urgenc.' }, { path: '/soporte-vital', icon: <Zap className="w-5 h-5 text-primary" />, label: 'Protocolos' },
{ 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: '/herramientas', icon: <Wrench className="w-5 h-5" />, label: 'Herram.' }, { 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 = () => { const BottomNav = () => {

115
frontend/src/components/layout/MenuSheet.tsx
View file

@ -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'; import { Link } from 'react-router-dom';
interface MenuSheetProps { interface MenuSheetProps {
@ -9,52 +9,101 @@ interface MenuSheetProps {
const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => { const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
if (!isOpen) return null; 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 ( return (
<> <>
<div <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} 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="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-14 px-4 border-b border-gray-200"> <div className="flex items-center justify-between h-20 px-6 border-b-2 border-primary bg-card">
<h2 className="font-semibold text-gray-800">Menú</h2> <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 <button
onClick={onClose} 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ú" aria-label="Cerrar menú"
> >
<X className="w-5 h-5 text-gray-600" /> <X className="w-6 h-6 stroke-[3px]" />
</button> </button>
</div> </div>
<div className="p-4 space-y-2"> <div className="flex-1 overflow-y-auto scrollbar-hide py-6 px-4 space-y-8">
<nav className="space-y-1"> {menuGroups.map((group, idx) => (
<Link to="/" className="block px-3 py-2 rounded hover:bg-gray-50">Inicio</Link> <div key={idx} className="space-y-4">
<Link to="/soporte-vital" className="block px-3 py-2 rounded hover:bg-gray-50">Soporte Vital</Link> <h3 className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-foreground px-2 border-l-2 border-primary/30">
<Link to="/patologias" className="block px-3 py-2 rounded hover:bg-gray-50">Patologías</Link> {group.title}
<Link to="/escena" className="block px-3 py-2 rounded hover:bg-gray-50">Escena</Link> </h3>
<Link to="/herramientas" className="block px-3 py-2 rounded hover:bg-gray-50">Herramientas</Link> <nav className="space-y-1">
<Link to="/farmacos" className="block px-3 py-2 rounded hover:bg-gray-50">Fármacos</Link> {group.items.map((item) => (
<Link to="/manual" className="block px-3 py-2 rounded hover:bg-gray-50">Manual Completo</Link> <Link
<Link to="/guia-refuerzo" className="block px-3 py-2 rounded hover:bg-gray-50">Guías de Refuerzo</Link> key={item.to}
<Link to="/telefono" className="block px-3 py-2 rounded hover:bg-gray-50">Protocolos Telefonicos</Link> to={item.to}
<Link to="/comunicacion" className="block px-3 py-2 rounded hover:bg-gray-50">Guiones de Comunicación</Link> onClick={onClose}
<Link to="/material" className="block px-3 py-2 rounded hover:bg-gray-50">Material y Checklists</Link> 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"
<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> <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">
<Link to="/ajustes" className="block px-3 py-2 rounded hover:bg-gray-50">Ajustes</Link> {item.icon}
<Link to="/galeria" className="block px-3 py-2 rounded hover:bg-gray-50">Galería</Link> </div>
<Link to="/acerca" className="block px-3 py-2 rounded hover:bg-gray-50">Acerca de</Link> <span className="font-semibold text-sm tracking-tight">{item.label}</span>
</nav> </Link>
))}
</nav>
</div>
))}
</div> </div>
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200"> <div className="p-6 border-t-2 border-primary/20 bg-card/50">
<p className="text-xs text-gray-500 text-center"> <div className="flex flex-col gap-1 items-center justify-center">
codigo0 v1.2.0 <p className="text-[10px] font-black uppercase tracking-widest text-primary">
</p> codigo0 v1.2.0
<p className="text-xs text-gray-500 text-center mt-1"> </p>
0 Errores. 0 Dudas. <p className="text-[9px] text-muted-foreground font-medium italic">
</p> 0 ERRORES. 0 DUDAS.
</p>
</div>
</div> </div>
</div> </div>
</> </>