Merge pull request #143 from bennymi/fix/nav

Update mobile nav menu

src/docs/components/layout/nav-bar.svelte

@@ -66,17 +66,18 @@
 				<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
 						>
 					{/each}
 				</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">

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}