添加导航栏组件。

src/page-components/navigation/NavigationMenu.tsx

@@ -0,0 +1,86 @@
+import cx from 'clsx';
+import { NavLink } from 'react-router-dom';
+import styles from './NavigationMenu.module.css';
+
+export function NavigationMenu() {
+  return (
+    <nav className={styles.navigation}>
+      <h1>Color Q</h1>
+      <menu className={styles.nav_menu}>
+        <li>
+          <NavLink
+            to="/schemes"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            My Schemes
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/harmonies"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Harmonies
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/wheels"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Wheels
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/tones"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Tones
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/tints-shades"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Tints & Shades
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/lighten-darken"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Lighten & Darken
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/mixer"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Mixer
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/chroma"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Chromatography
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/wacg"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            WACG Check
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/cards"
+            className={({ isActive }) => cx(styles.nav_link, isActive && styles.active)}>
+            Color Cards
+          </NavLink>
+        </li>
+      </menu>
+      <footer>
+        &copy; <a href="https://archgrid.net">ArchGrid</a> 2024
+      </footer>
+    </nav>
+  );
+}