From 3086289d6837388e9e38bc8b6647b65e0d3715cd Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Thu, 7 Jul 2022 09:52:28 +0200
Subject: [PATCH] update mobile navbar dark mode

---
 .../src/lib/components/navbar/NavBar.svelte   | 15 ++++++++----
 .../lib/components/navbar/NavBarLink.svelte   |  2 +-
 .../lib/components/navbar/ThemeToggle.svelte  | 23 +++++++++++--------
 webapp/src/routes/__layout.svelte             |  8 ++++++-
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/webapp/src/lib/components/navbar/NavBar.svelte b/webapp/src/lib/components/navbar/NavBar.svelte
index 659b65d..278bf77 100644
--- a/webapp/src/lib/components/navbar/NavBar.svelte
+++ b/webapp/src/lib/components/navbar/NavBar.svelte
@@ -29,7 +29,7 @@
 	>
 		<div id="navbar-left" class="flex gap-4">
 			<a href="/" class="self-center h-full pb-0.5">
-				<span id="name" class="self-center font-bold text-2xl md:text-lg dark:text-white"
+				<span id="name" class="self-center font-bold text-xl md:text-lg dark:text-white"
 					>📝 {import.meta.env.VITE_BRANDING}</span
 				>
 			</a>
@@ -38,7 +38,7 @@
 			</ul>
 		</div>
 		<div id="navbar-right" class="hidden md:block flex gap-8 flex">
-			<ul class="flex gap-2.5 content-center">
+			<ul class="flex gap-4 content-center">
 				<slot name="right" />
 			</ul>
 		</div>
@@ -46,7 +46,7 @@
 			<button
 				aria-label="navigation menu"
 				on:click={() => (showMobileMenu = !showMobileMenu)}
-				class="flex flex-col justify-center"><FaBars /></button
+				class="flex flex-col justify-center text-zinc-500 dark:text-zinc-400"><FaBars /></button
 			>
 		</div>
 	</div>
@@ -58,8 +58,13 @@
 		class="fixed top-[65px] w-full sm:w-72 sm:right-1
 		rounded-lg"
 	>
-		<div class="bg-zinc-200 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg">
-			<div on:click={() => (showMobileMenu = !showMobileMenu)} class="flex flex-col gap-0 text-xl">
+		<div
+			class="bg-zinc-200 dark:bg-zinc-700 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg"
+		>
+			<div
+				on:click={() => (showMobileMenu = !showMobileMenu)}
+				class="flex flex-col gap-0 text-xl dark:text-zinc-200"
+			>
 				<slot name="left" />
 				<slot name="right" />
 			</div>
diff --git a/webapp/src/lib/components/navbar/NavBarLink.svelte b/webapp/src/lib/components/navbar/NavBarLink.svelte
index 6890016..1c6e99b 100644
--- a/webapp/src/lib/components/navbar/NavBarLink.svelte
+++ b/webapp/src/lib/components/navbar/NavBarLink.svelte
@@ -4,7 +4,7 @@
 
 <a
 	{href}
-	class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 border-b md:border-b-0 border-zinc-300"
+	class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-200 md:dark:text-zinc-300 border-b md:border-b-0 border-zinc-300 dark:border-zinc-500"
 >
 	<div class="h-full flex flex-col justify-center">
 		<slot />
diff --git a/webapp/src/lib/components/navbar/ThemeToggle.svelte b/webapp/src/lib/components/navbar/ThemeToggle.svelte
index e9ccd32..f0c3c47 100644
--- a/webapp/src/lib/components/navbar/ThemeToggle.svelte
+++ b/webapp/src/lib/components/navbar/ThemeToggle.svelte
@@ -11,15 +11,18 @@
 
 <button
 	on:click={onClick}
-	class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
+	class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-200 md:dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
 >
-	<div class="h-full flex flex-col justify-center">
-		<span class="h-6 text-black dark:text-zinc-300">
-			{#if dark}
-				<LightIcon />
-			{:else}
-				<DarkIcon />
-			{/if}
-		</span>
-	</div>
+	<span class="flex md:block justify-center items-center gap-2">
+		<span class="text-black dark:text-zinc-200 md:hidden">Toggle dark mode</span>
+		<div class="h-full flex flex-col justify-center">
+			<span class="h-6 text-black dark:text-zinc-300">
+				{#if dark}
+					<LightIcon />
+				{:else}
+					<DarkIcon />
+				{/if}
+			</span>
+		</div>
+	</span>
 </button>
diff --git a/webapp/src/routes/__layout.svelte b/webapp/src/routes/__layout.svelte
index 5ad9742..204a63a 100644
--- a/webapp/src/routes/__layout.svelte
+++ b/webapp/src/routes/__layout.svelte
@@ -46,8 +46,14 @@
 							><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
 						>
 						<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
-							<span class="h-6 text-black dark:text-zinc-300"><LogoGithub /></span>
+							<span class="flex justify-center gap-2 items-center">
+								<span class="text-black dark:text-zinc-200 md:hidden">GitHub</span>
+								<span class="h-6 text-black dark:text-zinc-200 md:dark:text-zinc-300"
+									><LogoGithub /></span
+								>
+							</span>
 						</NavBarLink>
+
 						<ThemeToggle bind:dark />
 					</svelte:fragment>
 					></NavBar