first commit

resources/js/layouts/components/DefaultLayoutWithHorizontalNav.vue

@@ -0,0 +1,82 @@
+<script setup>
+import navItems from '@/navigation/horizontal'
+import { themeConfig } from '@themeConfig'
+
+// Components
+import Footer from '@/layouts/components/Footer.vue'
+import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue'
+import NavSearchBar from '@/layouts/components/NavSearchBar.vue'
+import NavbarShortcuts from '@/layouts/components/NavbarShortcuts.vue'
+import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import UserProfile from '@/layouts/components/UserProfile.vue'
+import NavBarI18n from '@core/components/I18n.vue'
+import { HorizontalNavLayout } from '@layouts'
+import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
+
+// 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>
+  <HorizontalNavLayout :nav-items="navItems">
+    <!-- 👉 navbar -->
+    <template #navbar>
+      <RouterLink
+        to="/"
+        class="d-flex align-start gap-x-4"
+      >
+        <VNodeRenderer :nodes="themeConfig.app.logo" />
+
+        <h1 class="leading-normal text-xl text-uppercase">
+          {{ themeConfig.app.title }}
+        </h1>
+      </RouterLink>
+      <VSpacer />
+
+      <NavSearchBar />
+
+      <NavBarI18n
+        v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
+        :languages="themeConfig.app.i18n.langConfig"
+      />
+
+      <NavbarThemeSwitcher />
+      <NavbarShortcuts />
+      <NavBarNotifications class="me-2" />
+      <UserProfile />
+    </template>
+
+    <AppLoadingIndicator ref="refLoadingIndicator" />
+
+    <!-- 👉 Pages -->
+    <RouterView v-slot="{ Component }">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+
+    <!-- 👉 Footer -->
+    <template #footer>
+      <Footer />
+    </template>
+
+    <!-- 👉 Customizer -->
+    <TheCustomizer />
+  </HorizontalNavLayout>
+</template>