From df0c00a2f91edf3021d6f6d80e177297630d2184 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 24 May 2026 20:07:09 +0200
Subject: [PATCH] feat: add theme toggle to sidebar

---
 templates/components/navigation.gohtml | 30 +++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/templates/components/navigation.gohtml b/templates/components/navigation.gohtml
index 186e808..25e2766 100644
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -8,8 +8,9 @@
   "watchlist" (dict "href" "/watchlist" "label" "Watchlist")
 }}
 
-<nav class="bg-background-sidebar h-full border-r border-border">
-  <div class="flex flex-col">
+<nav class="bg-background-sidebar h-full">
+  <div class="flex h-full flex-col justify-between">
+    <div class="flex flex-col">
     <button type="button" data-unstyled-button class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" data-command-palette-open {{if $isCollapsed}}title="Search"{{end}}>
       <svg class="size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="11" cy="11" r="8" />
@@ -18,7 +19,7 @@
       <div class="nav-label-container ml-4 grid min-w-0 flex-1 grid-cols-[1fr] opacity-100">
         <div class="flex min-w-0 items-center justify-between gap-3 overflow-hidden">
           <span class="whitespace-nowrap text-sm font-medium text-foreground-muted transition-colors duration-200 group-hover:text-foreground">Search</span>
-          <kbd class="hidden whitespace-nowrap border border-border bg-background-surface px-1.5 py-0.5 text-[0.65rem] font-medium text-foreground-muted lg:inline" data-command-palette-shortcut>⌘P</kbd>
+          <kbd class="hidden whitespace-nowrap bg-background-surface px-1.5 py-0.5 text-[0.65rem] font-medium text-foreground-muted lg:inline" data-command-palette-shortcut>⌘P</kbd>
         </div>
       </div>
     </button>
@@ -95,6 +96,29 @@
         </div>
       </div>
     </a>
+    </div>
+
+    <button
+      id="theme-toggle"
+      type="button"
+      data-unstyled-button
+      class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover"
+      aria-label="Toggle theme"
+      {{if $isCollapsed}}title="Toggle theme"{{end}}
+    >
+      <svg class="theme-icon-dark size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+      <svg class="theme-icon-light hidden size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="5"/>
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+      </svg>
+      <div class="nav-label-container ml-4 grid min-w-0 flex-1 grid-cols-[1fr] opacity-100">
+        <div class="overflow-hidden min-w-0">
+          <span class="whitespace-nowrap text-sm font-medium text-foreground-muted transition-colors duration-200 group-hover:text-foreground">Theme</span>
+        </div>
+      </div>
+    </button>
   </div>
 </nav>
 {{end}}