From 8f96398419085b9f1ccf840fde36950090e87ae3 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Tue, 13 Jun 2023 13:59:08 -0700
Subject: [PATCH] Move theme button to side nav

---
 ROADMAP.md             | 1 +
 src/app/SideNav.svelte | 9 ++++++++-
 src/app/TopNav.svelte  | 4 +---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index e5fef3fb..e489da5f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,5 +1,6 @@
 # Current
 
+- [ ] Fix content spacing
 - [ ] List detail pages with follow all and add all to list
 - [ ] Use vida to stream development
 - [ ] Fix connection management stuff. Have GPT help
diff --git a/src/app/SideNav.svelte b/src/app/SideNav.svelte
index fdf226b1..b914e3e5 100644
--- a/src/app/SideNav.svelte
+++ b/src/app/SideNav.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import cx from "classnames"
   import {displayPerson} from "src/util/nostr"
-  import {installPrompt} from "src/partials/state"
+  import {theme, installPrompt} from "src/partials/state"
   import user from "src/agent/user"
   import pool from "src/agent/pool"
   import {routes, menuIsOpen} from "src/app/state"
@@ -11,6 +11,8 @@
 
   const {profile, canPublish} = user
 
+  const toggleTheme = () => theme.update(t => (t === "dark" ? "light" : "dark"))
+
   const install = () => {
     $installPrompt.prompt()
 
@@ -109,6 +111,11 @@
         <i class="fa fa-gear mr-2" /> Settings
       </a>
     </li>
+    <li
+      class="block cursor-pointer px-4 py-2 transition-all hover:bg-accent hover:text-white"
+      on:click={toggleTheme}>
+      <i class="fa fa-lightbulb mr-2" /> Theme
+    </li>
     <li class="cursor-pointer">
       <a class="block px-4 py-2 transition-all hover:bg-accent hover:text-white" href="/logout">
         <i class="fa fa-right-from-bracket mr-2" /> Logout
diff --git a/src/app/TopNav.svelte b/src/app/TopNav.svelte
index b3c77113..e4d77c16 100644
--- a/src/app/TopNav.svelte
+++ b/src/app/TopNav.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {theme, appName} from "src/partials/state"
+  import {appName} from "src/partials/state"
   import Anchor from "src/partials/Anchor.svelte"
   import {menuIsOpen} from "src/app/state"
   import {newNotifications} from "src/app/state"
 
   const logoUrl = import.meta.env.VITE_LOGO_URL || "/images/logo.png"
   const toggleMenu = () => menuIsOpen.update(x => !x)
-  const toggleTheme = () => theme.update(t => (t === "dark" ? "light" : "dark"))
 
   onMount(() => {
     document.querySelector("html").addEventListener("click", e => {
@@ -31,7 +30,6 @@
       <img alt="Coracle Logo" src={logoUrl} class="w-8" />
       <h1 class="staatliches text-3xl">{appName}</h1>
     </Anchor>
-    <i class="fa fa-lightbulb -m-4 cursor-pointer p-4 text-lg" on:click={toggleTheme} />
   </div>
   {#if $newNotifications}
     <div class="absolute top-4 left-12 h-2 w-2 rounded bg-accent lg:hidden" />