From 45f618af9e34bb4e0fa1683e32fea64be15d60d7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 13 Mar 2026 22:38:29 +0000
Subject: [PATCH] fix(v2): improve navigation menu responsiveness on mobile

Refactored V2Navi.jsx to use CSS classes instead of inline styles.
Updated v2-theme.css with responsive navigation styles:
- On mobile, the navigation rail is now a horizontal bar at the bottom.
- Added horizontal scrolling for navigation items on small screens.
- Hidden the logo on mobile to save space.
- Adjusted item padding and margins for better mobile fit.

Added V2Navi.test.jsx to verify correct rendering and theme toggling logic.

Co-authored-by: godie <227743+godie@users.noreply.github.com>
---
 src/v2/components/V2Navi.jsx      | 21 +++-----
 src/v2/components/V2Navi.test.jsx | 59 +++++++++++++++++++++++
 src/v2/styles/v2-theme.css        | 79 ++++++++++++++++++++++++++++++-
 3 files changed, 143 insertions(+), 16 deletions(-)
 create mode 100644 src/v2/components/V2Navi.test.jsx

diff --git a/src/v2/components/V2Navi.jsx b/src/v2/components/V2Navi.jsx
index 8a38ce1..b60f372 100644
--- a/src/v2/components/V2Navi.jsx
+++ b/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';
diff --git a/src/v2/components/V2Navi.test.jsx b/src/v2/components/V2Navi.test.jsx
new file mode 100644
index 0000000..2d58a5f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/v2/styles/v2-theme.css b/src/v2/styles/v2-theme.css
index 1670d0c..3669c70 100644
--- a/src/v2/styles/v2-theme.css
+++ b/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,11 +283,33 @@
     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;
@@ -244,6 +317,10 @@
   }
   .v2-nav-item {
     margin-bottom: 0;
+    min-width: 64px;
+  }
+  .v2-nav-item i {
+    padding: 4px 12px;
   }
 }