Proyecto inicial, con fallitos de CSS. (Gracias Karim.)

src/App.jsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import Home from './home';
+import Admin from './admin';
+import Login from './login';
+import PostDetail from './PostDetail';
+
+function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+  const closeMenu = () => setIsOpen(false);
+
+  return (
+    <div className="navbar-container">
+      <nav className="navbar">
+        {/* Logo */}
+        <Link to="/" className="nav-logo" onClick={closeMenu}>
+          Josemi Blog 🚀
+        </Link>
+
+        {/* Botón Burger Animado */}
+        {/* Si isOpen es true, se añade la clase 'active' para activar la animación CSS */}
+        <button 
+          className={`burger-btn ${isOpen ? 'active' : ''}`} 
+          onClick={toggleMenu} 
+          aria-label="Toggle menu"
+        >
+          {/* Las 3 líneas que formarán el icono */}
+          <span className="burger-line"></span>
+          <span className="burger-line"></span>
+          <span className="burger-line"></span>
+        </button>
+
+        {/* Menú Lateral (Drawer) */}
+        <div className={`nav-links ${isOpen ? 'open' : ''}`}>
+          <Link to="/" onClick={closeMenu}>Inicio</Link>
+          <Link to="/login" onClick={closeMenu}>Login</Link>
+          <Link to="/admin" className="admin-btn-nav" onClick={closeMenu}>Admin</Link>
+        </div>
+
+        {/* Capa oscura al abrir el menú */}
+        {isOpen && <div className="menu-overlay" onClick={closeMenu}></div>}
+      </nav>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-content">
+        <div>
+          <h3>Josemi Blog</h3>
+          <p>Recursos y artículos técnicos sobre desarrollo.</p>
+        </div>
+        <div>
+          <h3>Navegación</h3>
+          <Link to="/" style={{color:'#94a3b8', textDecoration:'none', display:'block', marginBottom:'10px'}}>Inicio</Link>
+          <Link to="/admin" style={{color:'#94a3b8', textDecoration:'none', display:'block'}}>Admin</Link>
+        </div>
+        <div>
+          <h3>Contacto</h3>
+          <p>Huelva, España 🇪🇸</p>
+        </div>
+      </div>
+      <div style={{textAlign:'center', marginTop:'40px', paddingTop:'20px', borderTop:'1px solid #1e293b'}}>
+        © 2026 Josemi Blog. Todos los derechos reservados.
+      </div>
+    </footer>
+  );
+}
+
+export default function App() {
+  return (
+    <Router>
+      <Navbar />
+      <main style={{ flex: 1 }}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/admin" element={<Admin />} />
+          <Route path="/post/:slug" element={<PostDetail />} />
+        </Routes>
+      </main>
+      <Footer />
+    </Router>
+  );
+}