From 075e41ec89d5482ab615234a68f7b31b08826d50 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Mon, 6 Jul 2026 11:31:41 +0200
Subject: [PATCH] feat(ui): update navigation to NavLink and implement print
 styles for guides

---
 src/App.tsx                          |  7 +++-
 src/features/guides/routes/Guide.css | 45 +++++++++++++++++++++-
 src/styles/App.css                   | 57 ++++++++++++++++++++++++----
 3 files changed, 99 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 50303c2..6446eca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import "./styles/App.css";
 import { Outlet } from "react-router";
 import { Link } from "react-router";
 import { useGuides } from "./lib/contexts/guide.context";
+import { NavLink } from "react-router";
 
 function App() {
   const { guides } = useGuides();
@@ -22,11 +23,13 @@ function App() {
           <ul className="guide-list">
             {guides.map((guide) => (
               <li key={guide.id}>
-                <Link to={`/guide/${guide.id}`}>{guide.title}</Link>
+                <NavLink to={`/guide/${guide.id}`}>{guide.title}</NavLink>
               </li>
             ))}
           </ul>
-          <Link to="/settings">Settings</Link>
+          <NavLink className="settings-btn" to="/settings">
+            Settings
+          </NavLink>
         </nav>
       </header>
 
diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css
index bba0ade..4005065 100644
--- a/src/features/guides/routes/Guide.css
+++ b/src/features/guides/routes/Guide.css
@@ -4,6 +4,11 @@ main:has(.guide) {
     justify-content: center;
 }
 
+.guide__frames {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}
 .guide {
     max-width: 600px;
 
@@ -24,9 +29,47 @@ main:has(.guide) {
         top: 1rem;
         right: 1rem;
     }
+
+    .guide__frame {
+        padding: 1rem;
+        background-color: #dedede;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .guide__frame img {
+        max-height: 350px;
+        object-fit: contain;
+        object-position: left center;
+    }
+
+    .guide__frame ol {
+        margin-left: 1rem;
+    }
 }
 
 @media print {
-    .guide {
+    main:has(.guide) {
+        padding: 0rem;
+        justify-content: flex-start;
+    }
+
+    .guide__frames {
+        display: block;
+    }
+
+    .guide__frame {
+        position: relative;
+        break-inside: avoid;
+        page-break-inside: avoid;
+        background-color: #dedede;
+
+        margin: 2rem 0;
+    }
+
+    .guide__frame img {
+        max-width: 100%;
+        max-height: 100px;
     }
 }
diff --git a/src/styles/App.css b/src/styles/App.css
index 8e1454f..75713d3 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -39,16 +39,18 @@ header {
 
     .create-new-guide-btn {
         padding: 0.5rem 1rem;
-        border: 3px solid var(--color-border);
         border-radius: 4px;
-        background-color: transparent;
+        background-color: #ff7700;
+        color: #fff;
         text-decoration: none;
-        color: inherit;
+        font-weight: bold;
+        text-align: center;
     }
 
     .guide-list {
         list-style: none;
         padding: 0;
+        margin-top: 0.5rem;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
@@ -74,17 +76,54 @@ footer {
 nav {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 1rem;
     height: 100%;
     padding-bottom: 2rem;
+    width: 100%;
 
-    a:last-of-type {
+    a {
+        padding: 0.6rem 1rem 0.5rem;
+        border-radius: 4px;
+        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: #ff7700;
     }
 
     h2 {
-        margin-top: 1rem;
+        margin-top: 2rem;
+        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 #ff7700;
+    }
+    .guide-list a:hover:not(.active) {
+        border-left: 4px solid #ff9900;
+        opacity: 0.8;
     }
 }
 
@@ -106,6 +145,10 @@ textarea {
     color: inherit;
 }
 
+a {
+    text-decoration: none;
+}
+
 input,
 textarea,
 .file-upload {