<script setup lang="ts">
import Sidebar from './components/sidebar/sidebar.vue'

const layoutSideWidth = 243
</script>

<template>
  <NLayout has-sider class="h-full">
    <NLayoutSider
      class="border-r border-[#e8e9eb] px-2"
      collapse-mode="width"
      :collapsed-width="64"
      :width="layoutSideWidth"
    >
      <Sidebar />
    </NLayoutSider>

    <NLayoutContent class="bg-[#f3f6f9]! flex-1">
      <main class="box-border h-full px-6 py-4">
        <RouterView v-slot="{ Component }">
          <Transition appear name="fade-slide" mode="out-in">
            <Component :is="Component" />
          </Transition>
        </RouterView>
      </main>
    </NLayoutContent>
  </NLayout>
</template>

<style lang="scss" scoped>
:deep(.layout-content) {
  @apply flex flex-col bg-[#f5f7f9];
}

.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
