Move navbar styles to globals.css, fix active underline logic

src/components/Navbar.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 const links = [
@@ -13,6 +12,11 @@ const links = [
   { href: '/comments', label: 'Comments' },
 ];
 
+function isActiveLink(pathname: string, href: string) {
+  if (href === '/') return pathname === '/';
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
 export default function Navbar() {
   const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null);
   const [logo, setLogo] = useState<string | null>(null);
@@ -56,90 +60,37 @@ export default function Navbar() {
     router.push('/login');
   };
 
-  const navStyle: React.CSSProperties = {
-    position: 'sticky',
-    top: 0,
-    display: 'flex',
-    gap: '1.5rem',
-    alignItems: 'center',
-    padding: '0.6rem 1.5rem',
-    background: '#001321',
-    color: '#f5f0e8',
-    boxShadow: '0 2px 8px rgba(0,19,33,0.35)',
-    zIndex: 50,
-  };
-
-  const linkBase: React.CSSProperties = {
-    color: 'rgba(245,240,232,0.85)',
-    textDecoration: 'none',
-    fontSize: '14px',
-    padding: '6px 0',
-    borderBottom: '1.5px solid transparent',
-    transition: 'color .15s, border-color .15s',
-  };
-
-  const activeLink: React.CSSProperties = {
-    color: '#E8A849',
-    borderBottomColor: '#E8A849',
-  };
-
   return (
-    <nav style={navStyle}>
-      <Link href="/" style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none' }}>
+    <nav className="navbar">
+      <Link href="/" className="navbar-brand">
         {logo ? (
-          <img src={logo} alt="La Huasca" style={{ height: '36px', width: 'auto', maxWidth: '160px', objectFit: 'contain' }} />
+          <img src={logo} alt="La Huasca" className="navbar-logo" />
         ) : (
-          <span style={{ fontWeight: 700, color: '#E8A849', fontSize: '20px', fontStyle: 'italic' }}>
-            La Huasca
-          </span>
+          <span className="navbar-title">La Huasca</span>
         )}
       </Link>
-      {links.map((link) => (
-        <Link
-          key={link.href}
-          href={link.href}
-          style={{
-            ...linkBase,
-            ...(pathname === link.href ? activeLink : {}),
-          }}
-        >
-          {link.label}
-        </Link>
-      ))}
-      {auth?.authenticated ? (
-        <button
-          onClick={handleLogout}
-          style={{
-            marginLeft: 'auto',
-            background: 'transparent',
-            border: '1px solid #E8A849',
-            color: '#E8A849',
-            padding: '0.4rem 0.9rem',
-            borderRadius: '999px',
-            cursor: 'pointer',
-            fontSize: '13px',
-            fontWeight: 600,
-          }}
-        >
-          Logout
-        </button>
-      ) : (
-        <Link
-          href="/login"
-          style={{
-            marginLeft: 'auto',
-            color: '#001321',
-            textDecoration: 'none',
-            background: '#E8A849',
-            padding: '0.45rem 0.9rem',
-            borderRadius: '999px',
-            fontSize: '13px',
-            fontWeight: 600,
-          }}
-        >
-          Login
-        </Link>
-      )}
+      <ul className="navbar-links">
+        {links.map((link) => {
+          const active = isActiveLink(pathname, link.href);
+          return (
+            <li key={link.href}>
+              <Link
+                href={link.href}
+                className={active ? 'navbar-link active' : 'navbar-link'}
+              >
+                {link.label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+      <div className="navbar-actions">
+        {auth?.authenticated ? (
+          <button className="navbar-btn-ghost" onClick={handleLogout}>Logout</button>
+        ) : (
+          <Link href="/login" className="navbar-btn-primary">Login</Link>
+        )}
+      </div>
     </nav>
   );
 }