Refactor navigation and update global CSS

* Move nav elements to a new Navbar component
* Update CSS variables to oklch format
* Add standard button utility classes
* Remove nested nav styles from App.css

src/App.tsx

@@ -2,35 +2,15 @@ import "./styles/reset.css";
 import "./styles/App.css";
 import { Outlet } from "react-router";
 import { Link } from "react-router";
-import { useGuides } from "./lib/contexts/guide.context";
+import Navbar from "./components/navbar/Navbar";
-import { NavLink } from "react-router";
 
 function App() {
-  const { guides } = useGuides();
 
   return (
     <>
       <header>
-        <h1 className="main-title">
+        <h1><Link to="/">SnapSteps</Link></h1>
-          <Link to="/">SnapSteps</Link>
+        <Navbar />
-        </h1>
-        <nav>
-          <Link className="create-new-guide-btn" to="/new-guide">
-            Create New Guide
-          </Link>
-
-          <h2>Guides</h2>
-          <ul className="guide-list">
-            {guides.map((guide) => (
-              <li key={guide.id}>
-                <NavLink to={`/guide/${guide.id}`}>{guide.title}</NavLink>
-              </li>
-            ))}
-          </ul>
-          <NavLink className="settings-btn" to="/settings">
-            Settings
-          </NavLink>
-        </nav>
       </header>
 
       <main>

src/components/navbar/Navbar.css

@@ -0,0 +1,50 @@
+nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: var(--size-lg);
+    width: 100%;
+
+    a {
+        padding: 0.6rem var(--size-md) 0.5rem;
+        border-radius: var(--radius);
+        line-height: 1;
+        display: block;
+    }
+
+    .settings-button {
+        margin-top: auto;
+        align-self: center;
+        font-weight: bold;
+    }
+
+    .settings-button.active {
+        margin-top: auto;
+        align-self: center;
+        color: var(--color-accent);
+    }
+
+    h2 {
+        margin-top: var(--size-lg);
+        font-size: 1rem;
+        opacity: 0.5;
+    }
+    li {
+        width: 100%;
+    }
+    .guide-list a {
+        transition:
+            background-color 0.125s,
+            border-left 0.125s;
+        background-color: #fff;
+        border-left: 4px solid var(--color-border);
+    }
+    .guide-list a.active {
+        background-color: #fff;
+        border-left: 4px solid var(--color-accent);
+    }
+    .guide-list a:hover:not(.active) {
+        border-left: 4px solid var(--color-accent-hover);
+        opacity: 0.8;
+    }
+}

src/components/navbar/Navbar.tsx

@@ -0,0 +1,19 @@
+import { Link, NavLink } from "react-router";
+import "./Navbar.css"
+import GuideList from "./guide-list/GuideList";
+
+export default function Navbar() {
+  return (
+    <nav>
+      <Link className="button primary-button" to="/new-guide">
+        Create New Guide
+      </Link>
+
+      <h2>Guides</h2>
+      <GuideList />
+      <NavLink className="button secondary-button settings-button" to="/settings">
+        Settings
+      </NavLink>
+    </nav>
+    );
+}

src/components/navbar/guide-list/GuideList.css

@@ -0,0 +1,8 @@
+    .guide-list {
+        list-style: none;
+        padding: 0;
+        margin-top: var(--size-sm);
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-sm);
+    }

src/components/navbar/guide-list/GuideList.tsx

@@ -0,0 +1,19 @@
+import { NavLink } from "react-router";
+import "./GuideList.css";
+import { useGuides } from "../../../lib/contexts/guide.context";
+import type { GuideType } from "../../../lib/schemas";
+
+export default function GuideList() {
+  const { guides } = useGuides();
+
+
+  return (
+    <ul className="guide-list">
+      {guides.map((guide: GuideType) => (
+        <li key={guide.id}>
+          <NavLink to={`/guide/${guide.id}`}>{guide.title}</NavLink>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/styles/App.css

@@ -1,12 +1,13 @@
 :root {
     /* color */
-    --color-border: #ccc;
+    --color-border: oklch(87.1% 0.006 286.286);
-    --color-bg-sidebar: #eee;
+    --color-bg-sidebar: oklch(92% 0.004 286.32);
-    --color-bg-panel: #fafafa;
+    --color-bg-panel: oklch(96.7% 0.001 286.375);
-    --color-accent: #ff7700;
+
-    --color-accent-hover: #ff9900;
+    --color-accent: oklch(70.5% 0.213 47.604);
-    --color-accent-border: #ff770080;
+    --color-accent-hover: oklch(75% 0.183 55.934);
-    --color-accent-bg-subtle: #ff770010;
+    --color-accent-border: oklch(83.7% 0.128 66.29);
+    --color-accent-bg-subtle: oklch(98% 0.016 73.684);
 
     /* layout */
     --sidebar-width: 250px;
@@ -19,19 +20,20 @@
     --size-md: 1rem;
     --size-lg: 2rem;
     --size-xl: 3rem;
+    --size-2xl: 4rem;
+    --size-3xl: 5rem;
 }
+
 html,
 body {
     font-family: system-ui, Arial, sans-serif;
     position: relative;
 }
+
 #root {
     min-height: 100vh;
 }
-.app-body {
+
-    display: flex;
-    flex: 1;
-}
 header {
     position: fixed;
     height: 100%;
@@ -43,33 +45,19 @@ header {
     gap: var(--size-sm);
     border-right: 3px solid var(--color-border);
     background-color: var(--color-bg-sidebar);
-    .main-title a {
+
+    h1 a {
         text-decoration: none;
         color: inherit;
     }
-    .create-new-guide-btn {
-        padding: var(--size-sm) var(--size-md);
-        border-radius: var(--radius);
-        background-color: var(--color-accent);
-        color: #fff;
-        text-decoration: none;
-        font-weight: bold;
-        text-align: center;
-    }
-    .guide-list {
-        list-style: none;
-        padding: 0;
-        margin-top: var(--size-sm);
-        display: flex;
-        flex-direction: column;
-        gap: var(--size-sm);
-    }
 }
+
 main {
     margin-left: var(--sidebar-width);
     flex: 1;
     padding: var(--size-md);
 }
+
 footer {
     position: fixed;
     bottom: 0;
@@ -79,52 +67,9 @@ footer {
     text-align: center;
     width: var(--sidebar-width);
 }
-nav {
+
-    display: flex;
+
-    flex-direction: column;
+
-    height: 100%;
-    padding-bottom: var(--size-lg);
-    width: 100%;
-    a {
-        padding: 0.6rem var(--size-md) 0.5rem;
-        border-radius: var(--radius);
-        line-height: 1;
-        display: block;
-    }
-    .settings-btn {
-        margin-top: auto;
-        align-self: center;
-        font-weight: bold;
-    }
-    .settings-btn.active {
-        margin-top: auto;
-        align-self: center;
-        color: var(--color-accent);
-    }
-    h2 {
-        margin-top: var(--size-lg);
-        font-size: 1rem;
-        opacity: 0.5;
-    }
-    li {
-        width: 100%;
-    }
-    .guide-list a {
-        transition:
-            background-color 0.125s,
-            border-left 0.125s;
-        background-color: #fff;
-        border-left: 4px solid var(--color-border);
-    }
-    .guide-list a.active {
-        background-color: #fff;
-        border-left: 4px solid var(--color-accent);
-    }
-    .guide-list a:hover:not(.active) {
-        border-left: 4px solid var(--color-accent-hover);
-        opacity: 0.8;
-    }
-}
 ul {
     padding: 0;
     display: flex;
@@ -132,6 +77,7 @@ ul {
     gap: var(--size-xs);
     list-style: none;
 }
+
 a,
 input,
 button,
@@ -141,9 +87,31 @@ textarea {
     font-size: inherit;
     color: inherit;
 }
+
 a {
     text-decoration: none;
 }
+
+.primary-button {
+    padding: var(--size-sm) var(--size-md);
+    border-radius: var(--radius);
+    background-color: var(--color-accent);
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    text-align: center;
+}
+
+.secondary-button {
+    padding: var(--size-sm) var(--size-md);
+    border-radius: var(--radius);
+    background-color: var(--color-bg-sidebar);
+    color: #000;
+    text-decoration: none;
+    font-weight: bold;
+    text-align: center;
+}
+
 input,
 textarea,
 .file-upload {