From 7d4f429b0d9f9ee9252ea2f3ed2673e898993ccf Mon Sep 17 00:00:00 2001
From: bennymi <xbenmmusicx@gmail.com>
Date: Mon, 2 Oct 2023 18:58:19 +0200
Subject: [PATCH] update mobile nav menu behaviour

---
 src/docs/components/layout/nav-bar.svelte         | 5 +++--
 src/docs/components/layout/nav-lightswitch.svelte | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/docs/components/layout/nav-bar.svelte b/src/docs/components/layout/nav-bar.svelte
index e49fe9ab..ba976cd7 100644
--- a/src/docs/components/layout/nav-bar.svelte
+++ b/src/docs/components/layout/nav-bar.svelte
@@ -66,6 +66,7 @@
 				<nav class="flex flex-col text-surface-900-50">
 					{#each navigation as { navTitle, landingPath }}
 						<a
+							on:click={() => (revealNavItems = false)}
 							class="font-semibold py-2 border-b-1 border-surface-100/60 hover:text-primary-500"
 							href={landingPath}>{navTitle}</a
 						>
@@ -73,10 +74,10 @@
 				</nav>
 			</div>
 			<div
-				class="flex flex justify-around w-full items-center bg-surface-100-700 py-4 rounded-container text-surface-900-50"
+				class="flex flex-col gap-2 justify-around w-full items-center bg-surface-100-700 py-4 rounded-container text-surface-900-50"
 			>
 				<ThemeDropdown />
-				<NavLightSwitch />
+				<NavLightSwitch isMobile={true} />
 			</div>
 			{#if icons.length > 0}
 				<div class="w-full py-4 gap-x-2 inline-flex justify-center items-center">
diff --git a/src/docs/components/layout/nav-lightswitch.svelte b/src/docs/components/layout/nav-lightswitch.svelte
index 0820cdcd..bbd6e08e 100644
--- a/src/docs/components/layout/nav-lightswitch.svelte
+++ b/src/docs/components/layout/nav-lightswitch.svelte
@@ -9,6 +9,8 @@
 
 	import { tick } from 'svelte';
 
+	export let isMobile = false;
+
 	const isLandingPage = () => $page.route.id === '/';
 
 	function addOrRemoveClass() {
@@ -72,10 +74,14 @@
 
 		// transition.finished.then(() => ($darkTheme = !$darkTheme));
 	}
+
+	$: btnClasses = isMobile
+		? 'inline-flex'
+		: 'border-x-1 hidden md:inline-flex border-surface-400/50 mx-2';
 </script>
 
 <button
-	class="border-x-1 px-4 mx-2 border-surface-400/50 text-surface-400-900-200-50 hidden md:inline-flex"
+	class="px-4 text-surface-400-900-200-50 {btnClasses}"
 	on:click={toggle}
 	aria-label="dark-theme"
 	aria-pressed={$darkTheme}