<script setup lang="ts">
import { computed } from 'vue';
import { RouterView, useRoute } from 'vue-router';
import LayoutHeader from '@KTXC/layouts/header/LayoutHeader.vue';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import LayoutSystemMenu from '@KTXC/layouts/menus/LayoutSystemMenu.vue';
import { useL10nStore } from '@KTXC/stores/l10nStore';

const layoutStore = useLayoutStore();
const l10nStore = useL10nStore();
const route = useRoute();

const isFixedLayout = computed(() => route.meta.layout === 'fixed');
</script>

<template>
  <v-locale-provider :rtl="l10nStore.isRtl">
    <v-app :class="[layoutStore.miniSidebar ? 'mini-sidebar' : '']">  
      <LayoutHeader />
      <LayoutSystemMenu />

      <v-main
        class="page-wrapper"
        :class="{ 'page-wrapper--fixed': isFixedLayout }"
      >
        <RouterView />
      </v-main>
    </v-app>
  </v-locale-provider>
</template>

<style>
.v-main.page-wrapper {
  height: 100dvh !important;
  min-height: 0;
  overflow-y: auto !important;
}

.v-main.page-wrapper--fixed {
  overflow: hidden !important;
}
</style>
