<template>
  <n-layout class="naive-page">
    <n-layout-header
      bordered
      style="display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 16px;"
      class="layout-header"
    >
      <naive-drawer-toggle
        v-if="togglePlacement === 'left'"
        :icon="toggleIcon"
        @click="drawerActive = true"
      />
      <slot name="start" />
      <div style="flex: 1" />
      <slot name="end" />
      <naive-drawer-toggle
        v-if="togglePlacement === 'right'"
        :icon="toggleIcon"
        @click="drawerActive = true"
      />
    </n-layout-header>

    <n-layout
      position="absolute"
      :has-sider="!isMobileOrTablet"
      style="top:56px;"
      class="layout-content"
    >
      <n-layout-sider
        v-if="!isMobileOrTablet"
        class="naive-not-mobile-or-tablet"
        content-style="min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:8px;"
        :native-scrollbar="false"
        bordered
        v-bind="sider"
      >
        <slot name="start" />
        <div style="flex: 1">
          <lazy-naive-menu-link
            :routes="routes"
            mode="vertical"
          />
        </div>
        <slot name="end" />
      </n-layout-sider>

      <n-layout
        content-style="padding: 16px;"
        :native-scrollbar="nativeScrollbar"
      >
        <slot />
      </n-layout>
    </n-layout>

    <lazy-naive-drawer-link
      v-model:show="drawerActive"
      :routes="drawerRoutes"
      :placement="drawerPlacement"
      :closable="drawerClosable"
      :width="drawerWidth"
    >
      <template #header>
        <slot name="drawer-header" />
      </template>
      <template #footer>
        <slot name="drawer-footer" />
      </template>
    </lazy-naive-drawer-link>
  </n-layout>
</template>

<script setup>
import NaiveDrawerToggle from "./internals/NaiveDrawerToggle.vue";
import { ref, useNaiveDevice } from "#imports";
defineProps({
  toggleIcon: { type: String, required: false, default: "ph:equals" },
  togglePlacement: { type: String, required: false, default: "right" },
  routes: { type: Array, required: false, default: () => [] },
  drawerRoutes: { type: Array, required: false, default: () => [] },
  drawerPlacement: { type: String, required: false, default: "left" },
  drawerClosable: { type: Boolean, required: false, default: true },
  drawerWidth: { type: [String, Number], required: false, default: "100%" },
  nativeScrollbar: { type: Boolean, required: false, default: false },
  sider: { type: Object, required: false }
});
const { isMobileOrTablet } = useNaiveDevice();
const drawerActive = ref(false);
</script>

<style scoped>
@media screen and (min-width:768px){.layout-header{display:none!important}.layout-content{top:0!important}}
</style>
