<template>
  <n-drawer
    :show="show"
    :width="width"
    :placement="placement"
    :on-update:show="(v) => emits('update:show', v)"
  >
    <n-drawer-content
      :body-content-style="{ padding: '8px' }"
      :header-style="{ padding: '16px' }"
      :footer-style="{ justifyContent: 'start' }"
      :closable="closable"
    >
      <template #header>
        <slot name="header" />
      </template>

      <slot />

      <lazy-naive-menu-link
        mode="vertical"
        :routes="routes"
      />

      <template #footer>
        <slot name="footer" />
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { useRouter } from "#imports";
defineProps({
  show: { type: Boolean, required: false, default: false },
  routes: { type: Array, required: false, default: () => [] },
  closable: { type: Boolean, required: false, default: true },
  placement: { type: String, required: false, default: "left" },
  width: { type: [String, Number], required: false, default: "100%" }
});
const emits = defineEmits(["update:show"]);
useRouter().afterEach(() => emits("update:show", false));
</script>
