laravel-nuxt/nuxt/app/components/AppHeader.vue

37 lines
921 B
Vue

<script setup lang="ts">
const items = [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: 'https://ui.nuxt.com/getting-started',
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: 'https://ui.nuxt.com/pro',
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank',
}]
</script>
<template>
<header
class="bg-background/75 backdrop-blur -mb-px sticky top-0 z-50 border-b border-dashed border-gray-200/80 dark:border-gray-800/80"
>
<UContainer class="flex items-center justify-between gap-3 h-16 py-2">
<AppLogo class="lg:flex-1" />
<UNavigationMenu
orientation="horizontal"
:items="items"
class="hidden lg:block"
/>
<div class="flex items-center justify-end gap-3 lg:flex-1">
<UserDropdown />
</div>
</UContainer>
</header>
</template>