From c96b695c3df170fb58199385114d83efe1bb2084 Mon Sep 17 00:00:00 2001
From: Javier <javier@example.com>
Date: Wed, 25 Mar 2026 11:29:20 +0100
Subject: [PATCH] feat: redesign navigation with brutalist dark mode and
 simplified bottom nav

---
 frontend/src/components/layout/BottomNav.tsx |  14 +--
 frontend/src/components/layout/MenuSheet.tsx | 115 +++++++++++++------
 2 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/layout/BottomNav.tsx b/frontend/src/components/layout/BottomNav.tsx
index ff2b570b..72fcf5cf 100644
--- a/frontend/src/components/layout/BottomNav.tsx
+++ b/frontend/src/components/layout/BottomNav.tsx
@@ -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 = () => {
diff --git a/frontend/src/components/layout/MenuSheet.tsx b/frontend/src/components/layout/MenuSheet.tsx
index 6e8df8d0..678c9fab 100644
--- a/frontend/src/components/layout/MenuSheet.tsx
+++ b/frontend/src/components/layout/MenuSheet.tsx
@@ -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,52 +9,101 @@ 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">
-          <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 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">
+                {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">
-            codigo0 v1.2.0
-          </p>
-          <p className="text-xs text-gray-500 text-center mt-1">
-            0 Errores. 0 Dudas.
-          </p>
+        <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-[9px] text-muted-foreground font-medium italic">
+              0 ERRORES. 0 DUDAS.
+            </p>
+          </div>
         </div>
       </div>
     </>