fix(v2): improve navigation menu responsiveness on mobile

src/v2/components/V2Navi.jsx

@@ -22,17 +22,11 @@ const V2Navi = () => {
 
   return (
     <nav className="v2-nav-rail" aria-label="Navegación principal">
-      <div style={{
-        marginBottom: '20px',
-        width: '48px', height: '48px', borderRadius: '12px',
-        backgroundColor: 'var(--md-sys-color-primary-container)',
-        color: 'var(--md-sys-color-primary)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center'
-      }}>
+      <div className="v2-nav-logo">
         <i className="material-icons" style={{ fontSize: '32px' }} aria-hidden="true">stethoscope</i>
       </div>
 
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: '4px', overflowY: 'auto', flex: 1, paddingRight: '4px' }}>
+      <div className="v2-nav-items-container">
         {navItems.map((item) => (
           <NavLink
             key={item.path}
@@ -41,20 +35,17 @@ const V2Navi = () => {
             activeClassName="active"
             aria-current="page"
           >
-            <div style={{
-              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px'
-            }}>
+            <div className="v2-nav-item-content">
                 <i className="material-icons" aria-hidden="true">{item.icon}</i>
-                <span className="v2-label-large" style={{ fontSize: '10px', fontWeight: 'bold', textAlign: 'center' }}>{item.label}</span>
+                <span className="v2-label-large v2-nav-label">{item.label}</span>
             </div>
           </NavLink>
         ))}
       </div>
 
-      <div style={{ marginTop: 'auto', marginBottom: '16px', display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' }}>
+      <div className="v2-nav-footer">
         <button
-          className="v2-nav-item"
-          style={{ border: 'none', background: 'none', cursor: 'pointer', padding: '8px' }}
+          className="v2-nav-item v2-theme-toggle"
           onClick={() => {
             const currentTheme = document.documentElement.getAttribute('theme');
             const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

src/v2/components/V2Navi.test.jsx

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import V2Navi from './V2Navi';
+
+describe('V2Navi', () => {
+  it('renders all navigation items', () => {
+    render(
+      <MemoryRouter>
+        <V2Navi />
+      </MemoryRouter>
+    );
+
+    const navItems = [
+      "Inicio", "Práctica", "Simulacro", "Ranking", "Imágenes",
+      "Repaso", "Biblioteca", "Errores", "Contribuir", "Mis Casos",
+      "Mensajes", "Suscripción", "Cupones", "Admin", "Perfil"
+    ];
+
+    navItems.forEach(item => {
+      expect(screen.getByText(item)).toBeDefined();
+    });
+  });
+
+  it('contains refactored CSS classes', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <V2Navi />
+      </MemoryRouter>
+    );
+
+    expect(container.querySelector('.v2-nav-rail')).toBeDefined();
+    expect(container.querySelector('.v2-nav-logo')).toBeDefined();
+    expect(container.querySelector('.v2-nav-items-container')).toBeDefined();
+    expect(container.querySelector('.v2-nav-footer')).toBeDefined();
+  });
+
+  it('toggles theme on button click', () => {
+    const setAttributeSpy = vi.spyOn(document.documentElement, 'setAttribute');
+    const getItemSpy = vi.spyOn(Storage.prototype, 'getItem').mockReturnValue('light');
+    const setItemSpy = vi.spyOn(Storage.prototype, 'setItem');
+
+    render(
+      <MemoryRouter>
+        <V2Navi />
+      </MemoryRouter>
+    );
+
+    const themeButton = screen.getByLabelText('Cambiar tema');
+    fireEvent.click(themeButton);
+
+    expect(setAttributeSpy).toHaveBeenCalledWith('theme', 'dark');
+    expect(setItemSpy).toHaveBeenCalledWith('theme', 'dark');
+
+    setAttributeSpy.mockRestore();
+    getItemSpy.mockRestore();
+    setItemSpy.mockRestore();
+  });
+});

src/v2/styles/v2-theme.css

@@ -197,6 +197,28 @@
   z-index: 1000;
 }
 
+.v2-nav-logo {
+  margin-bottom: 20px;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.v2-nav-items-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 4px;
+  overflow-y: auto;
+  flex: 1;
+  padding-right: 4px;
+}
+
 .v2-nav-item {
   display: flex;
   flex-direction: column;
@@ -207,6 +229,19 @@
   font-size: 12px;
 }
 
+.v2-nav-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.v2-nav-label {
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+}
+
 .v2-nav-item i {
   padding: 4px 20px;
   border-radius: 16px;
@@ -218,6 +253,22 @@
   color: var(--md-sys-color-on-secondary-container);
 }
 
+.v2-nav-footer {
+  margin-top: auto;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.v2-theme-toggle {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 8px;
+}
+
 .v2-content-wrapper {
   margin-left: 80px;
   padding: 32px;
@@ -232,18 +283,44 @@
     top: auto;
     bottom: 0;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-between;
     padding-top: 0;
     border-right: none;
     border-top: 1px solid var(--md-sys-color-outline-variant);
   }
+
+  .v2-nav-logo {
+    display: none;
+  }
+
+  .v2-nav-items-container {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-right: 0;
+    gap: 8px;
+    align-items: center;
+    padding: 0 8px;
+  }
+
+  .v2-nav-footer {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-right: 8px;
+    flex-direction: row;
+  }
+
   .v2-content-wrapper {
     margin-left: 0;
     margin-bottom: 80px;
     padding: 16px;
   }
   .v2-nav-item {
     margin-bottom: 0;
+    min-width: 64px;
+  }
+  .v2-nav-item i {
+    padding: 4px 12px;
   }
 }