<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import Sidebar from './components/sidebar/sidebar.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const layoutSideWidth = 243

const isShowMainContentContainerPadding = ref(true)

watchEffect(() => {
  if (route.name === 'Home') {
    isShowMainContentContainerPadding.value = false
  } else if (!isShowMainContentContainerPadding.value) {
    isShowMainContentContainerPadding.value = true
  }
})
</script>

<template>
  <NLayout has-sider class="h-full min-w-[1280px]">
    <NLayoutSider
      class="px-2 shadow-[0_2px_20px_0px_rgba(0,4,65,0.07)]"
      collapse-mode="width"
      :collapsed-width="64"
      :width="layoutSideWidth"
    >
      <Sidebar />
    </NLayoutSider>

    <NLayoutContent class="bg-[#f3f6f9]! flex-1">
      <main
        class="main-content-container m-auto box-border h-full w-full overflow-x-auto transition-[padding] duration-300 ease-in-out"
        :class="{ 'px-6': isShowMainContentContainerPadding, 'py-4': isShowMainContentContainerPadding }"
      >
        <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>
