From c3db445cabd19ec038660fc2f1a6e7d14ae4009a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 25 Dec 2024 09:26:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigation/NavigationMenu.module.css      | 46 ++++++++++
 .../navigation/NavigationMenu.tsx             | 86 +++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/page-components/navigation/NavigationMenu.module.css
 create mode 100644 src/page-components/navigation/NavigationMenu.tsx

diff --git a/src/page-components/navigation/NavigationMenu.module.css b/src/page-components/navigation/NavigationMenu.module.css
new file mode 100644
index 0000000..18356d1
--- /dev/null
+++ b/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);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/page-components/navigation/NavigationMenu.tsx b/src/page-components/navigation/NavigationMenu.tsx
new file mode 100644
index 0000000..a3d6945
--- /dev/null
+++ b/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>
+  );
+}