71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function Navbar() {
|
|
const t = useTranslations();
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const floating = window.scrollY > 60;
|
|
setIsScrolled(floating);
|
|
document.body.classList.toggle('nav-is-floating', floating);
|
|
};
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
handleScroll();
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`nav-wrapper ${isScrolled ? 'floating' : ''}`}>
|
|
<div className="container">
|
|
<nav className="nav">
|
|
<div className="brand">
|
|
<a href="#">
|
|
<div className="brand-mark">
|
|
<img src="/brand/logo-primary.svg" alt="" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<button className="nav-toggle" aria-label="Open menu" onClick={() => setIsMenuOpen(!isMenuOpen)}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
|
|
</svg>
|
|
</button>
|
|
<div className={`nav-links ${isMenuOpen ? 'open' : ''}`} id="navLinks" onClick={() => setIsMenuOpen(false)}>
|
|
<a href="#" style={{ color: '#fff', opacity: 0.85 }}>
|
|
{t('Nav.home')}
|
|
</a>
|
|
<a href="#ecosystem" style={{ color: '#fff', opacity: 0.85 }}>
|
|
{t('Nav.solutions')}
|
|
</a>
|
|
<a href="#destinations" style={{ color: '#fff', opacity: 0.85 }}>
|
|
{t('Nav.industries')}
|
|
</a>
|
|
<a href="#pricing" style={{ color: '#fff', opacity: 0.85 }}>
|
|
{t('Nav.pricing')}
|
|
</a>
|
|
<a href="#contact" style={{ color: '#fff', opacity: 0.85 }}>
|
|
{t('Nav.contact')}
|
|
</a>
|
|
<a href="#contact" className="btn btn-orange">
|
|
{t('Nav.demo')}
|
|
</a>
|
|
<div className="nav-divider"></div>
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|