<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">
          &copy;powered by maptile
        </footer>
      </section>
    </main>
  </section>
</template>

<style lang="less" scoped>
:global(.main) {
  display: flex;
  flex-direction: column;
}
</style>
