<template>
  <div class="ais-navbar relative w-full border-b border-ui-gray-100 z-30">
    <div class="flex justify-between items-center gap-8 mx-auto max-w-[1536px] z-30">
      <slot name="default">
        <AisNav v-if="navItems && navItems.length > 0"
                :items="navItems"
                :class="navClass"
                :item-class="itemClass"></AisNav>
      </slot>

      <slot name="secondaryNav">
        <AisNav v-if="secondaryNavItems && secondaryNavItems.length > 0"
                :items="secondaryNavItems"
                :class="navClass"
                :item-class="itemClass"></AisNav>
      </slot>
    </div>
  </div>
</template>


<script setup>
  import AisNav from "@/components/nav/AisNav.vue";
  import { navbarProps } from "@/components/navbar/navbar-props";

  const props = defineProps({
    ...navbarProps,
  })
</script>

<script>
export default {
  name: "AisNavbar"
}
</script>