Fix mobile menu

src/components/Site/Navbar.vue

@@ -8,11 +8,8 @@
 				</NuxtLink>
 			</div>
 			<div class="flex lg:hidden">
-				<button type="button" class="inline-flex items-center justify-center rounded-md p-2.5 text-gray-400 -m-2.5">
+				<button type="button" @click="showSidebar = true" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5">
-					<span class="sr-only">Open main menu</span>
+					<i-heroicons-solid-bars-3 size-6 />
-					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-					</svg>
 				</button>
 			</div>
 			<div hidden lg="flex gap-x-12">
@@ -35,42 +32,12 @@
 				</p>
 			</div>
 		</nav>
-		<!-- Mobile menu, show/hide based on menu open state. -->
-		<!-- <div class="lg:hidden" role="dialog" aria-modal="true">
-			<div class="fixed inset-0 z-10" />
-			<div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
-				<div class="flex items-center justify-between">
-					<a href="#" class="p-1.5 -m-1.5">
-						<span class="sr-only">Your Company</span>
-						<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="">
-					</a>
-					<button type="button" class="rounded-md p-2.5 text-gray-400 -m-2.5">
-						<span class="sr-only">Close menu</span>
-						<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
-				</div>
-				<div class="mt-6 flow-root">
-					<div class="-my-6 divide-y divide-gray-500/25">
-						<div class="py-6 space-y-2">
-							<a href="#" class="block rounded-lg px-3 py-2 text-base text-white font-semibold leading-7 -mx-3 hover:bg-gray-800">Product</a>
-							<a href="#" class="block rounded-lg px-3 py-2 text-base text-white font-semibold leading-7 -mx-3 hover:bg-gray-800">Features</a>
-							<a href="#" class="block rounded-lg px-3 py-2 text-base text-white font-semibold leading-7 -mx-3 hover:bg-gray-800">Marketplace</a>
-							<a href="#" class="block rounded-lg px-3 py-2 text-base text-white font-semibold leading-7 -mx-3 hover:bg-gray-800">Company</a>
-						</div>
-						<div class="py-6">
-							<a href="#" class="block rounded-lg px-3 py-2.5 text-base text-white font-semibold leading-7 -mx-3 hover:bg-gray-800">Log in</a>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div> -->
 	</header>
 </template>
 
 <script lang="ts" setup>
 	const { name } = useConstants();
+	const { showSidebar } = useSidebar();
 	const tauriVersion = await getTauriVersion();
 </script>
 

src/components/Site/Sidebar.vue

@@ -0,0 +1,55 @@
+<template>
+	<Transition
+		enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
+		leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
+	>
+		<div v-if="showSidebar" class="relative z-20 lg:hidden" role="dialog" aria-modal="true">
+			<div class="fixed inset-0 overflow-hidden">
+				<div class="h-full flex flex-col overflow-y-auto bg-neutral-800/70 px-4 py-6 backdrop-blur-md">
+					<div class="flex items-center justify-between">
+						<NuxtLink to="/" class="p-1.5 -m-1.5">
+							<SvgoLogo :filled="true" :font-controlled="false" size-8 />
+						</NuxtLink>
+						<button type="button" class="rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = false">
+							<i-heroicons-solid-x-mark size-6 />
+						</button>
+					</div>
+					<div class="mt-6 flow-root">
+						<div class="-my-6 divide-y divide-gray-500/25">
+							<div class="py-6 space-y-2">
+								<NuxtLink to="/commands" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3">
+									Commands
+								</NuxtLink>
+								<NuxtLink to="/notifications" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3">
+									Notifications
+								</NuxtLink>
+								<NuxtLink to="/os" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3">
+									OS Informations
+								</NuxtLink>
+								<NuxtLink to="/foo" class="block px-3 py-2 text-base text-white font-semibold leading-7 -mx-3">
+									404
+								</NuxtLink>
+							</div>
+							<div class="py-6">
+								<p class="px-3 text-base text-white font-semibold leading-7 -mx-3">
+									v{{ tauriVersion }}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script lang="ts" setup>
+	const tauriVersion = await getTauriVersion();
+	const { showSidebar } = useSidebar();
+</script>
+
+<style scoped>
+	.router-link-exact-active:not(.home){
+		@apply text-emerald-500;
+	}
+</style>

src/composables/sidebar.ts

@@ -0,0 +1,7 @@
+const showSidebar = ref(false);
+
+export const useSidebar = () => {
+	return {
+		showSidebar
+	};
+};

src/layouts/home.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<SiteNavbar class="fixed w-full" />
+		<SiteSidebar />
 
 		<div relative isolate overflow-hidden px-6 lg="px-8">
 			<DesignTopBlob />