124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useEffect, useState } from 'react'
|
|
import { useLang } from '@/context/LangContext'
|
|
import type { Lang } from '@/lib/i18n'
|
|
|
|
const LANGS: { code: Lang; label: string; flag: string }[] = [
|
|
{ code: 'de', label: 'DE', flag: 'DE' },
|
|
{ code: 'en', label: 'EN', flag: 'EN' },
|
|
{ code: 'es', label: 'ES', flag: 'ES' },
|
|
]
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const { lang, setLang, t } = useLang()
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 40)
|
|
window.addEventListener('scroll', onScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', onScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<nav className={`navbar${scrolled ? ' scrolled' : ''}`} id="navbar" role="navigation" aria-label="Main navigation">
|
|
<div className="container">
|
|
<Link href="/" className="nav-logo" aria-label="GreenLens Home">
|
|
GREENLENS
|
|
</Link>
|
|
|
|
<div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
|
|
<a href="#features" onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
|
|
<a href="#intelligence" onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
|
|
<a href="#faq" onClick={() => setMenuOpen(false)}>FAQ</a>
|
|
<a href="#how" onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
|
|
<Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
|
|
<a href="#cta" onClick={() => setMenuOpen(false)}>{t.nav.download}</a>
|
|
|
|
<div className="lang-switcher" role="group" aria-label="Language selector">
|
|
{LANGS.map((l) => (
|
|
<button
|
|
key={l.code}
|
|
className={`lang-btn${lang === l.code ? ' lang-btn--active' : ''}`}
|
|
onClick={() => {
|
|
setLang(l.code)
|
|
setMenuOpen(false)
|
|
}}
|
|
aria-label={`Switch to ${l.label}`}
|
|
aria-pressed={lang === l.code}
|
|
>
|
|
<span>{l.flag}</span>
|
|
<span>{l.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<a href="#cta" className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
|
|
</div>
|
|
|
|
<button
|
|
className="nav-hamburger"
|
|
aria-label={menuOpen ? 'Close menu' : 'Open menu'}
|
|
aria-expanded={menuOpen}
|
|
onClick={() => setMenuOpen((o) => !o)}
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</button>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.nav-links--open {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(19,31,22,0.97);
|
|
backdrop-filter: blur(18px);
|
|
padding: 1.5rem 2rem;
|
|
gap: 1rem;
|
|
border-top: 1px solid rgba(244,241,232,0.08);
|
|
}
|
|
.lang-switcher {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
background: rgba(244,241,232,0.07);
|
|
border: 1px solid rgba(244,241,232,0.12);
|
|
border-radius: 999px;
|
|
padding: 3px;
|
|
}
|
|
.lang-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
color: rgba(244,241,232,0.6);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
.lang-btn:hover {
|
|
color: rgba(244,241,232,0.9);
|
|
background: rgba(244,241,232,0.1);
|
|
}
|
|
.lang-btn--active {
|
|
background: rgba(244,241,232,0.15);
|
|
color: #fff;
|
|
}
|
|
`}</style>
|
|
</nav>
|
|
)
|
|
}
|