mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-03 11:35:00 +01:00
Code Issues Projects Releases Wiki Activity

Finishes menu

Browse Source
This commit is contained in:
Amir Raminfar
2023-03-06 09:27:33 -08:00
parent 5f2420960b
commit 089c2e9b17
6 changed files with 424 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/src/layouts/docs.vue
View File

@@ -21,12 +21,14 @@ const menu = [
useHead({
titleTemplate: '%s | Dozzle',
})
const showMenu = ref(false)
</script>
<template>
<header py-2 px-4 bg-light dark:bg-dark z-10 container mx-auto sticky top-0>
<header py-2 lg:px-4 bg-light dark:bg-dark container mx-auto sticky top-0>
<nav flex my-3 gap-x-4 justify-end items-center>
<a v-if="isMobile" text-2xl i-mdi-menu />
<a v-if="isMobile" cursor-pointer text-2xl i-mdi-menu @click="showMenu = !showMenu" />
<h1 font-playfair mr-auto text-4xl dark:text-brand>
<a href="/">Dozzle</a>
</h1>
@@ -50,27 +52,30 @@ useHead({
</nav>
</header>
<div flex container mx-auto px-4 gap-4>
<aside bg-light dark:bg-dark :class="{ fixed: isMobile }">
<nav w-64>
<ul>
<li
v-for="m in menu"
:key="m.name"
>
<h2 class="text-lg font-bold">
{{ m.name }}
</h2>
<ul mt-4 space-y-4 border="l-2 dark-50/50">
<li v-for="item in m.subMenu" :key="item.path" pl-3>
<router-link :to="item.path" active-class="text-teal-600" hover:text-teal-600>
{{ item.name }}
</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<Teleport to="body" :disabled="!isMobile">
<div v-if="showMenu" backdrop-blur-sm inset-0 fixed @click="showMenu = false" />
<aside class="transition-transform lg:translate-x-0" main-bg :class="isMobile ? 'fixed inset-y-0 left-0 p-4' : ''" :translate-x="showMenu ? 0 : -64">
<nav w-64>
<ul>
<li
v-for="m in menu"
:key="m.name"
>
<h2 class="text-lg font-bold">
{{ m.name }}
</h2>
<ul mt-4 space-y-4 border="l-2 dark-50/50">
<li v-for="item in m.subMenu" :key="item.path" pl-3>
<router-link :to="item.path" active-class="text-teal-600" hover:text-teal-600>
{{ item.name }}
</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</Teleport>
<main>
<article prose text-lg max-w-full>
<RouterView />