Refactoring file locations

src/components/Navbar.jsx

@@ -0,0 +1,61 @@
+import { useAtom } from 'jotai';
+import { navOpenState, activeSectionState } from '../state/atoms';
+import ThemeToggle from './ThemeToggle';
+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, setActiveSection] = useAtom(activeSectionState);
+
+  function handleNav(section) {
+    setActiveSection(section);
+    setIsOpen(false);
+  }
+
+  return (
+    <header className={styles.header}>
+      <nav className={styles.nav}>
+        <button className={styles.logo} onClick={() => handleNav('home')}>
+          <span className={styles.logoBracket}>&lt;</span>
+          vk
+          <span className={styles.logoBracket}>/&gt;</span>
+        </button>
+
+        <ul className={`${styles.links} ${isOpen ? styles.open : ''}`}>
+          {NAV_LINKS.map(({ label, section }) => (
+            <li key={section}>
+              <button
+                onClick={() => handleNav(section)}
+                className={activeSection === section ? styles.active : undefined}
+              >
+                {label}
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <div className={styles.navActions}>
+          <ThemeToggle />
+
+          <button
+            className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
+            onClick={() => setIsOpen((v) => !v)}
+            aria-label="Toggle menu"
+            aria-expanded={isOpen}
+          >
+            <span />
+            <span />
+            <span />
+          </button>
+        </div>
+      </nav>
+    </header>
+  );
+}