64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import { Link } from 'react-router-dom';
|
|
import { useAtom, useAtomValue } from 'jotai';
|
|
import { navOpenState, activeSectionState, languageState } from '../state/atoms';
|
|
import { getTranslations } from '../translations';
|
|
import ThemeToggle from './ThemeToggle';
|
|
import LanguagePicker from './LanguagePicker';
|
|
import styles from '../styles/components/Navbar.module.scss';
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useAtom(navOpenState);
|
|
const activeSection = useAtomValue(activeSectionState);
|
|
const language = useAtomValue(languageState);
|
|
const t = getTranslations(language);
|
|
|
|
const NAV_LINKS = [
|
|
{ label: t.nav.home, section: 'home' },
|
|
{ label: t.nav.about, section: 'about' },
|
|
{ label: t.nav.projects, section: 'projects' },
|
|
{ label: t.nav.contact, section: 'contact' },
|
|
];
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<nav className={styles.nav}>
|
|
<Link to="/" className={styles.logo} onClick={() => setIsOpen(false)}>
|
|
<span className={styles.logoBracket}><</span>
|
|
human id="veikko" class="lintujarvi"
|
|
<span className={styles.logoBracket}>/></span>
|
|
</Link>
|
|
|
|
<ul className={`${styles.links} ${isOpen ? styles.open : ''}`}>
|
|
{NAV_LINKS.map(({ label, section }) => (
|
|
<li key={section}>
|
|
<Link
|
|
to={`/${section}`}
|
|
onClick={() => setIsOpen(false)}
|
|
className={activeSection === section ? styles.active : undefined}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className={styles.navActions}>
|
|
<LanguagePicker />
|
|
<ThemeToggle />
|
|
|
|
<button
|
|
className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
|
|
onClick={() => setIsOpen((v) => !v)}
|
|
aria-label={t.theme.switchToLight}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|