89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
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>
|
|
);
|
|
} |