95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
const menuOpen = ref(false);
|
|
|
|
const handleMenuChange = () => {
|
|
menuOpen.value = !menuOpen.value;
|
|
};
|
|
|
|
const route = useRoute();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex-[0_0_auto] h-10 flex items-center bg-base-200">
|
|
<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" />
|
|
<Icon name="material-symbols:menu-rounded" class="swap-off w-6 h-6" />
|
|
<Icon name="material-symbols:close-rounded" class="swap-on w-6 h-6" />
|
|
</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-300 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 overflow-x-hidden overflow-y-auto bg-base-100">
|
|
<section class="min-h-full relative p-4 pb-8">
|
|
<Breadcrumbs />
|
|
<slot />
|
|
<footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
|
|
©powered by maptile
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
:global(.main) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|