139 lines
3.8 KiB
JavaScript
139 lines
3.8 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth <= 768);
|
|
if (window.innerWidth > 768) setIsOpen(false);
|
|
};
|
|
handleResize();
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return (
|
|
<nav style={{
|
|
backgroundColor: 'white',
|
|
borderBottom: '1px solid #e2e8f0',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1000,
|
|
height: '70px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '0 20px',
|
|
fontFamily: 'sans-serif'
|
|
}}>
|
|
<div style={{
|
|
width: '100%',
|
|
maxWidth: '1200px',
|
|
margin: '0 auto',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}}>
|
|
|
|
{/* LOGO */}
|
|
<div
|
|
onClick={() => router.push('/')}
|
|
style={{
|
|
fontSize: '1.5rem',
|
|
fontWeight: '800',
|
|
color: '#0f172a',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
Josemi Blog 🚀
|
|
</div>
|
|
|
|
{/* MENU ESCRITORIO */}
|
|
{!isMobile && (
|
|
<div style={{ display: 'flex', gap: '30px' }}>
|
|
<span
|
|
onClick={() => router.push('/')}
|
|
style={{ cursor: 'pointer', fontWeight: '600', color: '#1e293b' }}
|
|
>
|
|
Inicio
|
|
</span>
|
|
<a
|
|
href="https://github.com"
|
|
target="_blank"
|
|
style={{ textDecoration: 'none', fontWeight: '600', color: '#1e293b' }}
|
|
>
|
|
Github
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{/* BOTÓN BURGER */}
|
|
{isMobile && (
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '5px'
|
|
}}
|
|
>
|
|
<div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
|
|
<div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
|
|
<div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* MENÚ MÓVIL DESPLEGABLE */}
|
|
{isMobile && isOpen && (
|
|
<div style={{
|
|
position: 'fixed',
|
|
top: '70px',
|
|
left: 0,
|
|
width: '100%',
|
|
backgroundColor: 'white',
|
|
borderBottom: '1px solid #e2e8f0',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '20px',
|
|
boxShadow: '0 10px 15px rgba(0,0,0,0.1)',
|
|
zIndex: 999
|
|
}}>
|
|
<button
|
|
onClick={() => { router.push('/'); setIsOpen(false); }}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
padding: '15px',
|
|
fontWeight: '600',
|
|
color: '#1e293b',
|
|
cursor: 'pointer',
|
|
borderBottom: '1px solid #f1f5f9'
|
|
}}
|
|
>
|
|
Inicio
|
|
</button>
|
|
<a
|
|
href="https://github.com"
|
|
target="_blank"
|
|
style={{
|
|
padding: '15px',
|
|
textAlign: 'center',
|
|
fontWeight: '600',
|
|
color: '#1e293b',
|
|
textDecoration: 'none'
|
|
}}
|
|
>
|
|
Github
|
|
</a>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
} |