Initial commit

resources/js/@layouts/components/HorizontalNav.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {
+  HorizontalNavGroup,
+  HorizontalNavLink,
+} from '@layouts/components'
+
+const props = defineProps({
+  navItems: {
+    type: null,
+    required: true,
+  },
+})
+
+const resolveNavItemComponent = item => {
+  if ('children' in item)
+    return HorizontalNavGroup
+  
+  return HorizontalNavLink
+}
+</script>
+
+<template>
+  <ul class="nav-items">
+    <Component
+      :is="resolveNavItemComponent(item)"
+      v-for="(item, index) in navItems"
+      :key="index"
+      data-allow-mismatch
+      :item="item"
+    />
+  </ul>
+</template>
+
+<style lang="scss">
+.layout-wrapper.layout-nav-type-horizontal {
+  .nav-items {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>