34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<script setup>
|
|
import { useSkins } from '@core/composable/useSkins'
|
|
import { useThemeConfig } from '@core/composable/useThemeConfig'
|
|
|
|
// @layouts plugin
|
|
import { AppContentLayoutNav } from '@layouts/enums'
|
|
|
|
const DefaultLayoutWithHorizontalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithHorizontalNav.vue'))
|
|
const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithVerticalNav.vue'))
|
|
const { width: windowWidth } = useWindowSize()
|
|
const { appContentLayoutNav, switchToVerticalNavOnLtOverlayNavBreakpoint } = useThemeConfig()
|
|
|
|
// Remove below composable usage if you are not using horizontal nav layout in your app
|
|
switchToVerticalNavOnLtOverlayNavBreakpoint(windowWidth)
|
|
|
|
const { layoutAttrs, injectSkinClasses } = useSkins()
|
|
|
|
injectSkinClasses()
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="appContentLayoutNav === AppContentLayoutNav.Vertical">
|
|
<DefaultLayoutWithVerticalNav v-bind="layoutAttrs" />
|
|
</template>
|
|
<template v-else>
|
|
<DefaultLayoutWithHorizontalNav v-bind="layoutAttrs" />
|
|
</template>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// As we are using `layouts` plugin we need its styles to be imported
|
|
@use "@layouts/styles/default-layout";
|
|
</style>
|