diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..4e2337a --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,112 @@ +* { + box-sizing: border-box; +} + +:root { + --gold: #E8A849; + --cream: #f5f0e8; + --navy: #001321; + --ink: #1a1a1a; + --warm: #a6683c; + --bg: #FAF7F0; + --surface: #e8eff3; +} + +html, +body { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--bg); + color: var(--ink); +} + +a { + color: inherit; +} + +.navbar { + position: sticky; + top: 0; + display: flex; + gap: 1.5rem; + align-items: center; + padding: 0.6rem 1.5rem; + background: var(--navy); + color: var(--cream); + box-shadow: 0 2px 8px rgba(0, 19, 33, 0.35); + z-index: 50; +} + +.navbar-brand { + display: flex; + align-items: center; + gap: 12px; + text-decoration: none; +} + +.navbar-logo { + height: 36px; + width: auto; + max-width: 160px; + object-fit: contain; +} + +.navbar-title { + font-weight: 700; + color: var(--gold); + font-size: 20px; + font-style: italic; +} + +.navbar-links { + display: flex; + gap: 1.5rem; + list-style: none; + margin: 0; + padding: 0; +} + +.navbar-link { + display: inline-block; + color: rgba(245, 240, 232, 0.85); + text-decoration: none; + font-size: 14px; + padding: 6px 0; + border-bottom: 1.5px solid transparent; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.navbar-link:hover { + color: var(--cream); +} + +.navbar-link.active { + color: var(--gold); + border-bottom-color: var(--gold); +} + +.navbar-actions { + margin-left: auto; +} + +.navbar-btn-ghost { + background: transparent; + border: 1px solid var(--gold); + color: var(--gold); + padding: 0.4rem 0.9rem; + border-radius: 999px; + cursor: pointer; + font-size: 13px; + font-weight: 600; +} + +.navbar-btn-primary { + color: var(--navy); + text-decoration: none; + background: var(--gold); + padding: 0.45rem 0.9rem; + border-radius: 999px; + font-size: 13px; + font-weight: 600; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b2e72d5..9137877 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,5 @@ import Navbar from '@/components/Navbar'; +import './globals.css'; export const metadata = { title: 'La Huasca', @@ -12,7 +13,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index c29b5ff..f461ec2 100644 --- a/src/components/Navbar.tsx +++ b/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(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 ( -