Improving route handling

src/components/Navbar.jsx

@@ -1,4 +1,5 @@
-import { useAtom } from 'jotai';
+import { Link } from 'react-router-dom';
+import { useAtom, useAtomValue } from 'jotai';
 import { navOpenState, activeSectionState } from '../state/atoms';
 import ThemeToggle from './ThemeToggle';
 import styles from '../styles/components/Navbar.module.scss';
@@ -12,31 +13,27 @@ const NAV_LINKS = [
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useAtom(navOpenState);
-  const [activeSection, setActiveSection] = useAtom(activeSectionState);
-
-  function handleNav(section) {
-    setActiveSection(section);
-    setIsOpen(false);
-  }
+  const activeSection = useAtomValue(activeSectionState);
 
   return (
     <header className={styles.header}>
       <nav className={styles.nav}>
-        <button className={styles.logo} onClick={() => handleNav('home')}>
+        <Link to="/" className={styles.logo} onClick={() => setIsOpen(false)}>
           <span className={styles.logoBracket}>&lt;</span>
           human id="veikko" class="lintujarvi"
           <span className={styles.logoBracket}>/&gt;</span>
-        </button>
+        </Link>
 
         <ul className={`${styles.links} ${isOpen ? styles.open : ''}`}>
           {NAV_LINKS.map(({ label, section }) => (
             <li key={section}>
-              <button
-                onClick={() => handleNav(section)}
+              <Link
+                to={`/${section}`}
+                onClick={() => setIsOpen(false)}
                 className={activeSection === section ? styles.active : undefined}
               >
                 {label}
-              </button>
+              </Link>
             </li>
           ))}
         </ul>