mirror of
https://github.com/amir20/dozzle.git
synced 2026-01-04 20:14:59 +01:00
Finishes menu
This commit is contained in:
Amir Raminfar
2
docs/components.d.ts
vendored
2
docs/components.d.ts
vendored
@@ -12,7 +12,6 @@ declare module '@vue/runtime-core' {
|
||||
BrowserWindow: typeof import('./src/components/BrowserWindow.vue')['default']
|
||||
CodeBlock: typeof import('./src/components/CodeBlock.vue')['default']
|
||||
Features: typeof import('./src/components/Features.vue')['default']
|
||||
Footer: typeof import('./src/components/TheFooter.vue')['default']
|
||||
Hero: typeof import('./src/components/Hero.vue')['default']
|
||||
Installation: typeof import('./src/components/Installation.vue')['default']
|
||||
KeyShortcut: typeof import('./src/components/KeyShortcut.vue')['default']
|
||||
@@ -20,6 +19,5 @@ declare module '@vue/runtime-core' {
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SubSection: typeof import('./src/components/SubSection.vue')['default']
|
||||
TheFooter: typeof import('./src/components/TheFooter.vue')['default']
|
||||
TheInput: typeof import('./src/components/TheInput.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
})()
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-sans antialiased dark:text-white bg-light dark:bg-dark">
|
||||
<body class="font-sans antialiased dark:text-white main-bg">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
@@ -13,18 +13,18 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"@vueuse/head": "^1.1.9",
|
||||
"@vueuse/head": "^1.1.15",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.35.3",
|
||||
"@antfu/eslint-config": "^0.36.0",
|
||||
"@iconify-json/carbon": "^1.1.16",
|
||||
"@iconify-json/mdi": "^1.1.48",
|
||||
"@types/node": "^18.14.2",
|
||||
"@unocss/preset-typography": "^0.50.3",
|
||||
"@unocss/reset": "^0.50.3",
|
||||
"@unocss/transformer-directives": "^0.50.3",
|
||||
"@iconify-json/mdi": "^1.1.49",
|
||||
"@types/node": "^18.14.6",
|
||||
"@unocss/preset-typography": "^0.50.4",
|
||||
"@unocss/reset": "^0.50.4",
|
||||
"@unocss/transformer-directives": "^0.50.4",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue-macros/reactivity-transform": "^0.2.4",
|
||||
"@vue-macros/volar": "^0.8.4",
|
||||
@@ -34,11 +34,11 @@
|
||||
"jsdom": "^21.1.0",
|
||||
"markdown-it-link-attributes": "^4.0.1",
|
||||
"markdown-it-shiki": "^0.8.0",
|
||||
"pnpm": "^7.28.0",
|
||||
"taze": "^0.8.5",
|
||||
"pnpm": "^7.29.0",
|
||||
"taze": "^0.9.0",
|
||||
"typescript": "^4.9.5",
|
||||
"unocss": "^0.50.3",
|
||||
"unplugin-auto-import": "^0.15.0",
|
||||
"unocss": "^0.50.4",
|
||||
"unplugin-auto-import": "^0.15.1",
|
||||
"unplugin-vue-components": "^0.24.0",
|
||||
"unplugin-vue-macros": "^1.9.1",
|
||||
"vite": "^4.1.4",
|
||||
|
||||
843
docs/pnpm-lock.yaml
generated
843
docs/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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 />
|
||||
|
||||
@@ -14,7 +14,7 @@ export default defineConfig({
|
||||
shortcuts: [
|
||||
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
|
||||
['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
|
||||
[/^circle-(\w+)$/, ([, c]) => `rounded-full bg-${c}500 w-3 h-3 `],
|
||||
['main-bg', 'bg-light, dark:bg-dark'],
|
||||
],
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
|
||||
Reference in New Issue
Block a user