<script setup lang="ts">
import { useLoadingBar } from 'naive-ui';
import { loadingBarRef } from '../../../core/router/guards';
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useLocalConfigStore } from '../../../stores/useLocalConfigStore';

const { primaryColor } = storeToRefs(useLocalConfigStore());
const loadingBar = useLoadingBar();

onMounted(() => {
  loadingBarRef.value = loadingBar;
});

function pickerThemeColor() {
  loadingBarRef.value?.start();
  setTimeout(() => {
    loadingBarRef.value?.finish();
  }, 500);
}
</script>

<template>
  <n-layout position="absolute">
    <n-layout-header bordered class="h-12"> </n-layout-header>
    <n-layout position="absolute" has-sider class="top-12!">
      <n-layout-sider bordered />
      <n-layout-content>
        <slot />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>
