From 796037c887756c03be7be457549d6e9efa33e6f3 Mon Sep 17 00:00:00 2001
From: Nicola Spadari <NicolaSpadari@users.noreply.github.com>
Date: Sun, 16 Jun 2024 19:53:57 +0200
Subject: [PATCH] Fix mobile menu

---
 src/components/Site/Navbar.vue  | 39 ++---------------------
 src/components/Site/Sidebar.vue | 55 +++++++++++++++++++++++++++++++++
 src/composables/sidebar.ts      |  7 +++++
 src/layouts/home.vue            |  1 +
 4 files changed, 66 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Site/Sidebar.vue
 create mode 100644 src/composables/sidebar.ts

diff --git a/src/components/Site/Navbar.vue b/src/components/Site/Navbar.vue
index ffd0f0f..866d97c 100644
--- a/src/components/Site/Navbar.vue
+++ b/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">
-					<span class="sr-only">Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-					</svg>
+				<button type="button" @click="showSidebar = true" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5">
+					<i-heroicons-solid-bars-3 size-6 />
 				</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>
 
diff --git a/src/components/Site/Sidebar.vue b/src/components/Site/Sidebar.vue
new file mode 100644
index 0000000..26b8c2d
--- /dev/null
+++ b/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>
diff --git a/src/composables/sidebar.ts b/src/composables/sidebar.ts
new file mode 100644
index 0000000..5066096
--- /dev/null
+++ b/src/composables/sidebar.ts
@@ -0,0 +1,7 @@
+const showSidebar = ref(false);
+
+export const useSidebar = () => {
+	return {
+		showSidebar
+	};
+};
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
index 80e49f1..7a6ade0 100644
--- a/src/layouts/home.vue
+++ b/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 />