37 lines
750 B
Vue
37 lines
750 B
Vue
<script lang="ts" setup>
|
|
import { HorizontalNavGroup, HorizontalNavLink } from '@layouts/components'
|
|
import type { HorizontalNavItems, NavGroup, NavLink } from '@layouts/types'
|
|
|
|
defineProps<{
|
|
navItems: HorizontalNavItems
|
|
}>()
|
|
|
|
const resolveNavItemComponent = (item: NavLink | NavGroup) => {
|
|
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>
|