Finnish transaltions

src/components/Navbar.jsx

@@ -1,19 +1,23 @@
 import { Link } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
-import { navOpenState, activeSectionState } from '../state/atoms';
+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';
 
-const NAV_LINKS = [
-  { label: 'Home', section: 'home' },
-  { label: 'About', section: 'about' },
-  { label: 'Projects', section: 'projects' },
-  { label: 'Contact', section: 'contact' },
-];
-
 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}>
@@ -39,12 +43,13 @@ export default function Navbar() {
         </ul>
 
         <div className={styles.navActions}>
+          <LanguagePicker />
           <ThemeToggle />
 
           <button
             className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
             onClick={() => setIsOpen((v) => !v)}
-            aria-label="Toggle menu"
+            aria-label={t.theme.switchToLight}
             aria-expanded={isOpen}
           >
             <span />