Initial commit

resources/js/layouts/components/DefaultLayoutWithHorizontalNav.vue

@@ -0,0 +1,57 @@
+<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'
+</script>
+
+<template>
+  <HorizontalNavLayout :nav-items="navItems">
+    <!-- 👉 navbar -->
+    <template #navbar>
+      <RouterLink
+        to="/"
+        class="app-logo d-flex align-center gap-x-3"
+      >
+        <VNodeRenderer :nodes="themeConfig.app.logo" />
+
+        <h1 class="app-title font-weight-bold leading-normal text-xl text-capitalize">
+          {{ themeConfig.app.title }}
+        </h1>
+      </RouterLink>
+      <VSpacer />
+
+      <NavSearchBar trigger-btn-class="ms-lg-n3" />
+
+      <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>
+
+    <!-- 👉 Pages -->
+    <slot />
+
+    <!-- 👉 Footer -->
+    <template #footer>
+      <Footer />
+    </template>
+
+    <!-- 👉 Customizer -->
+    <TheCustomizer />
+  </HorizontalNavLayout>
+</template>