58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
|
<script setup>
|
|||
|
|
import { useConfigStore } from '@core/stores/config'
|
|||
|
|
import { AppContentLayoutNav } from '@layouts/enums'
|
|||
|
|
import { switchToVerticalNavOnLtOverlayNavBreakpoint } from '@layouts/utils'
|
|||
|
|
|
|||
|
|
const DefaultLayoutWithHorizontalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithHorizontalNav.vue'))
|
|||
|
|
const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithVerticalNav.vue'))
|
|||
|
|
const configStore = useConfigStore()
|
|||
|
|
|
|||
|
|
// ℹ️ This will switch to vertical nav when define breakpoint is reached when in horizontal nav layout
|
|||
|
|
|
|||
|
|
// Remove below composable usage if you are not using horizontal nav layout in your app
|
|||
|
|
switchToVerticalNavOnLtOverlayNavBreakpoint()
|
|||
|
|
|
|||
|
|
const { layoutAttrs, injectSkinClasses } = useSkins()
|
|||
|
|
|
|||
|
|
injectSkinClasses()
|
|||
|
|
|
|||
|
|
// SECTION: Loading Indicator
|
|||
|
|
const isFallbackStateActive = ref(false)
|
|||
|
|
const refLoadingIndicator = ref(null)
|
|||
|
|
|
|||
|
|
watch([
|
|||
|
|
isFallbackStateActive,
|
|||
|
|
refLoadingIndicator,
|
|||
|
|
], () => {
|
|||
|
|
if (isFallbackStateActive.value && refLoadingIndicator.value)
|
|||
|
|
refLoadingIndicator.value.fallbackHandle()
|
|||
|
|
if (!isFallbackStateActive.value && refLoadingIndicator.value)
|
|||
|
|
refLoadingIndicator.value.resolveHandle()
|
|||
|
|
}, { immediate: true })
|
|||
|
|
// !SECTION
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<Component
|
|||
|
|
v-bind="layoutAttrs"
|
|||
|
|
:is="configStore.appContentLayoutNav === AppContentLayoutNav.Vertical ? DefaultLayoutWithVerticalNav : DefaultLayoutWithHorizontalNav"
|
|||
|
|
>
|
|||
|
|
<AppLoadingIndicator ref="refLoadingIndicator" />
|
|||
|
|
|
|||
|
|
<RouterView v-slot="{ Component }">
|
|||
|
|
<Suspense
|
|||
|
|
:timeout="0"
|
|||
|
|
@fallback="isFallbackStateActive = true"
|
|||
|
|
@resolve="isFallbackStateActive = false"
|
|||
|
|
>
|
|||
|
|
<Component :is="Component" />
|
|||
|
|
</Suspense>
|
|||
|
|
</RouterView>
|
|||
|
|
</Component>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
// As we are using `layouts` plugin we need its styles to be imported
|
|||
|
|
@use "@layouts/styles/default-layout";
|
|||
|
|
</style>
|