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 Navbar from '@/components/Navbar';
|
||||||
|
import './globals.css';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'La Huasca',
|
title: 'La Huasca',
|
||||||
@@ -12,7 +13,7 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body style={{ margin: 0, fontFamily: 'system-ui, sans-serif', background: '#FAF7F0', color: '#1a1a1a' }}>
|
<body>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+32
-81
@@ -1,8 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
@@ -13,6 +12,11 @@ const links = [
|
|||||||
{ href: '/comments', label: 'Comments' },
|
{ href: '/comments', label: 'Comments' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function isActiveLink(pathname: string, href: string) {
|
||||||
|
if (href === '/') return pathname === '/';
|
||||||
|
return pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
}
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null);
|
const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null);
|
||||||
const [logo, setLogo] = useState<string | null>(null);
|
const [logo, setLogo] = useState<string | null>(null);
|
||||||
@@ -56,90 +60,37 @@ export default function Navbar() {
|
|||||||
router.push('/login');
|
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 (
|
return (
|
||||||
<nav style={navStyle}>
|
<nav className="navbar">
|
||||||
<Link href="/" style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none' }}>
|
<Link href="/" className="navbar-brand">
|
||||||
{logo ? (
|
{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' }}>
|
<span className="navbar-title">La Huasca</span>
|
||||||
La Huasca
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
{links.map((link) => (
|
<ul className="navbar-links">
|
||||||
<Link
|
{links.map((link) => {
|
||||||
key={link.href}
|
const active = isActiveLink(pathname, link.href);
|
||||||
href={link.href}
|
return (
|
||||||
style={{
|
<li key={link.href}>
|
||||||
...linkBase,
|
<Link
|
||||||
...(pathname === link.href ? activeLink : {}),
|
href={link.href}
|
||||||
}}
|
className={active ? 'navbar-link active' : 'navbar-link'}
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
</li>
|
||||||
{auth?.authenticated ? (
|
);
|
||||||
<button
|
})}
|
||||||
onClick={handleLogout}
|
</ul>
|
||||||
style={{
|
<div className="navbar-actions">
|
||||||
marginLeft: 'auto',
|
{auth?.authenticated ? (
|
||||||
background: 'transparent',
|
<button className="navbar-btn-ghost" onClick={handleLogout}>Logout</button>
|
||||||
border: '1px solid #E8A849',
|
) : (
|
||||||
color: '#E8A849',
|
<Link href="/login" className="navbar-btn-primary">Login</Link>
|
||||||
padding: '0.4rem 0.9rem',
|
)}
|
||||||
borderRadius: '999px',
|
</div>
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user