Fix mobile menu
This commit is contained in:
Nicola Spadari
@@ -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>
|
||||
|
||||
|
||||
55
src/components/Site/Sidebar.vue
Normal file
55
src/components/Site/Sidebar.vue
Normal file
@@ -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>
|
||||
7
src/composables/sidebar.ts
Normal file
7
src/composables/sidebar.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
const showSidebar = ref(false);
|
||||
|
||||
export const useSidebar = () => {
|
||||
return {
|
||||
showSidebar
|
||||
};
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<SiteNavbar class="fixed w-full" />
|
||||
<SiteSidebar />
|
||||
|
||||
<div relative isolate overflow-hidden px-6 lg="px-8">
|
||||
<DesignTopBlob />
|
||||
|
||||
Reference in New Issue
Block a user