113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const menuOpen = ref(false);
|
|
|
|
const handleMenuChange = () => {
|
|
menuOpen.value = !menuOpen.value;
|
|
};
|
|
|
|
const route = useRoute();
|
|
|
|
console.log(route);
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex-[0_0_auto] h-10 flex items-center">
|
|
<div class="w-56 h-10 flex items-center justify-center max-md:hidden">
|
|
<div class="avatar">
|
|
<div class="mask mask-squircle w-8">
|
|
<img src="/favicon.ico" />
|
|
</div>
|
|
</div>
|
|
<h1 class="ml-2">maptile</h1>
|
|
</div>
|
|
<label
|
|
for="menu-drawer"
|
|
class="btn btn-circle w-8 h-8 min-h-8 p-2 ml-2 swap swap-rotate md:hidden"
|
|
>
|
|
<input type="checkbox" :checked="menuOpen" />
|
|
<svg
|
|
class="swap-off fill-current w-6 h-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path
|
|
d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
class="swap-on fill-current w-6 h-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<polygon
|
|
points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
|
|
/>
|
|
</svg>
|
|
</label>
|
|
<div class="dropdown dropdown-end ml-auto mr-2">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="avatar online placeholder sm-auto"
|
|
>
|
|
<div class="bg-neutral text-neutral-content w-8 rounded-full">
|
|
<span class="text-sm">AI</span>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-24 p-2 shadow"
|
|
>
|
|
<li><a>退出</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<section class="flex-auto flex overflow-hidden drawer md:drawer-open">
|
|
<input
|
|
id="menu-drawer"
|
|
type="checkbox"
|
|
class="drawer-toggle"
|
|
:checked="menuOpen"
|
|
@change="handleMenuChange"
|
|
/>
|
|
<nav class="drawer-side top-10 z-30 overflow-x-hidden overflow-y-auto">
|
|
<label
|
|
for="menu-drawer"
|
|
aria-label="close sidebar"
|
|
class="drawer-overlay"
|
|
></label>
|
|
<ul class="menu bg-base-200 text-base-content min-h-full w-56 p-2">
|
|
<li>
|
|
<a href="/" :class="route.path === '/' ? 'active' : ''"
|
|
><Icon name="material-symbols:home-outline-rounded" />首页</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<details>
|
|
<summary class="group">hello</summary>
|
|
<ul>
|
|
<li><a>Sidebar Item 1</a></li>
|
|
<li><a>Sidebar Item 2</a></li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
<li><a>Sidebar Item 1</a></li>
|
|
<li><a>Sidebar Item 2</a></li>
|
|
</ul>
|
|
</nav>
|
|
<main class="drawer-content flex-auto relative overflow-auto">
|
|
<slot />
|
|
<footer class="w-full h-4 my-2 text-center text-xs">
|
|
©powered by maptile
|
|
</footer>
|
|
</main>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
:global(.main) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|