72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { useEffect, useState } from 'react'
|
|
import { useLang } from '@/context/LangContext'
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher'
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const pathname = usePathname()
|
|
const { t } = useLang()
|
|
const homeHref = (hash: string) => (pathname === '/' ? hash : `/${hash}`)
|
|
|
|
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={homeHref('#features')} onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
|
|
<a href={homeHref('#intelligence')} onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
|
|
<a href={homeHref('#faq')} onClick={() => setMenuOpen(false)}>FAQ</a>
|
|
<a href={homeHref('#how')} onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
|
|
<Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
|
|
<a href={homeHref('#cta')} onClick={() => setMenuOpen(false)}>{t.nav.download}</a>
|
|
|
|
<LanguageSwitcher />
|
|
|
|
<a href={homeHref('#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);
|
|
}
|
|
`}</style>
|
|
</nav>
|
|
)
|
|
}
|