Refactor Header and AppRouter components for improved navigation and authentication handling. Introduced ProtectedHistoryRoute to restrict access to the History page for unauthenticated users, and adjusted NavTab component to enhance icon handling.

frontend/src/components/layout/Header.jsx

@@ -3,7 +3,9 @@ import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { FiLogIn, FiLogOut, FiEdit3, FiClock } from 'react-icons/fi';
 
-function NavTab({ to, isActive, icon: Icon, children }) {
+function NavTab({ to, isActive, icon, children }) {
+  const Icon = icon;
+
   return (
     <Link
       to={to}
@@ -97,20 +99,19 @@ export default function Header() {
         </Link>
 
         <div className="flex items-center gap-4 whitespace-nowrap">
-          {/* Misma navegación con o sin sesión: evita estilos distintos al loguearse */}
+          {isAuthenticated && (
-          <nav
+            <nav
-            className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
+              className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
-            aria-label="Secciones principales"
+              aria-label="Secciones principales"
-          >
+            >
-            <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
+              <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
-              Editor
+                Editor
-            </NavTab>
+              </NavTab>
-            {isAuthenticated && (
               <NavTab to="/history" isActive={isHistoryActive} icon={FiClock}>
                 Historial
               </NavTab>
-            )}
+            </nav>
-          </nav>
+          )}
 
           {isAuthenticated ? (
             <div className="relative border-l border-slate-200 pl-4">
@@ -154,7 +155,7 @@ export default function Header() {
               )}
             </div>
           ) : (
-            <div className="border-l border-slate-200 pl-4">
+            <div>
               <AccederButton isActive={isLoginActive} />
             </div>
           )}

frontend/src/routers/AppRouter.jsx

@@ -4,6 +4,17 @@ import DocEditor from '../pages/DocEditor';
 import Login from '../pages/Login';
 import Register from '../pages/Register';
 import History from '../pages/History';
+import { useAuth } from '../context/AuthContext';
+
+function ProtectedHistoryRoute() {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <History />;
+}
 
 export default function AppRouter() {
   return (
@@ -14,7 +25,7 @@ export default function AppRouter() {
           <Route path="/editor" element={<DocEditor />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
-          <Route path="/history" element={<History />} />
+          <Route path="/history" element={<ProtectedHistoryRoute />} />
         </Routes>
       </MainLayout>
     </Router>