74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import MoonDot from './MoonDot.jsx'
|
|
|
|
const NAV = {
|
|
website: [
|
|
{ label: 'News', to: '/site/news' },
|
|
{ label: 'Screenshots', to: '/site/screenshots' },
|
|
{ label: 'Five on Friday', to: '/site/five-on-friday' },
|
|
{ label: 'Newsletter', to: '/site/newsletter' },
|
|
{ label: 'About', to: '/site/about' },
|
|
{ label: 'Wiki', to: '/wiki' },
|
|
],
|
|
wiki: [
|
|
{ label: 'Website', to: '/site' },
|
|
{ label: 'New Player Guide', to: '/wiki/new-player-guide' },
|
|
{ label: 'Maps & Atlas', to: '/wiki/maps-atlas' },
|
|
{ label: 'Systems', to: '/wiki/systems' },
|
|
{ label: 'Rules', to: '/wiki/rules' },
|
|
],
|
|
}
|
|
|
|
export default function SiteHeader({ section = 'website' }) {
|
|
const links = NAV[section] || NAV.website
|
|
return (
|
|
<header
|
|
style={{
|
|
borderBottom: '1px solid var(--line)',
|
|
background: 'rgba(9,13,18,0.86)',
|
|
backdropFilter: 'blur(8px)',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 30,
|
|
}}
|
|
>
|
|
<div
|
|
className="shell"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 20,
|
|
padding: '14px 0',
|
|
flexWrap: 'wrap',
|
|
}}
|
|
>
|
|
<Link
|
|
to="/"
|
|
className="display"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
fontSize: '1.2rem',
|
|
letterSpacing: '0.05em',
|
|
color: 'var(--accent-bright)',
|
|
textDecoration: 'none',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<MoonDot />
|
|
UOMysticmoon
|
|
</Link>
|
|
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
|
|
{links.map((l) => (
|
|
<Link key={l.to + l.label} to={l.to} className="pill">
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|