添加导航栏组件。

src/page-components/navigation/NavigationMenu.module.css

@@ -0,0 +1,46 @@
+@layer pages {
+  .navigation {
+    max-width: 20rem;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+    box-shadow: 2px 0 8px oklch(from var(--color-black) l c h / 65%);
+    z-index: 50;
+    h1 {
+      display: block;
+      padding: var(--spacing-m) var(--spacing-l);
+      font-size: var(--font-size-xxl);
+    }
+    footer {
+      padding-inline: var(--spacing-l);
+      padding-block: var(--spacing-m);
+    }
+    .nav_menu {
+      flex: 1 0;
+      padding: var(--spacing-n);
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+      li {
+        list-style: none;
+        a.nav_link {
+          display: inline-block;
+          width: 100%;
+          padding-inline: var(--spacing-l);
+          padding-block: var(--spacing-s);
+          text-align: right;
+          &.active {
+            background-color: var(--color-primary-active);
+          }
+          &:hover {
+            background-color: var(--color-primary-hover);
+          }
+        }
+      }
+    }
+  }
+}

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>
+  );
+}