Initial commit

resources/js/layouts/default.vue

@@ -0,0 +1,57 @@
+<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>