Move navbar styles to globals.css, fix active underline logic
This commit is contained in:
@@ -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;
|
||||
}
|
||||
+2
-1
@@ -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 (
|
||||
<html lang="en">
|
||||
<body style={{ margin: 0, fontFamily: 'system-ui, sans-serif', background: '#FAF7F0', color: '#1a1a1a' }}>
|
||||
<body>
|
||||
<Navbar />
|
||||
{children}
|
||||
</body>
|
||||
|
||||
+24
-73
@@ -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) => (
|
||||
<ul className="navbar-links">
|
||||
{links.map((link) => {
|
||||
const active = isActiveLink(pathname, link.href);
|
||||
return (
|
||||
<li key={link.href}>
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
style={{
|
||||
...linkBase,
|
||||
...(pathname === link.href ? activeLink : {}),
|
||||
}}
|
||||
className={active ? 'navbar-link active' : 'navbar-link'}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className="navbar-actions">
|
||||
{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>
|
||||
<button className="navbar-btn-ghost" onClick={handleLogout}>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>
|
||||
<Link href="/login" className="navbar-btn-primary">Login</Link>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user