Version sin Vite.

frontend/Navbar.js

@@ -0,0 +1,139 @@
+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>
+  );
+}