mirror of https://github.com/nuxt/nuxt.git
62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<template>
|
|
<header class="d-header">
|
|
<div class="flex items-center h-full px-1 mx-auto max-w-7xl sm:px-3 lg:px-6">
|
|
<NavigationButton
|
|
aria-label="mobileMenu"
|
|
class="w-12 h-12 lg:hidden text-gray-300 hover:text-cloud-lighter"
|
|
/>
|
|
|
|
<div class="flex items-center flex-1 justify-center lg:justify-start">
|
|
<Link :to="localePath('/')" aria-label="homeLink">
|
|
<Logo :settings="settings" class="h-8 md:h-9" />
|
|
</Link>
|
|
</div>
|
|
|
|
<nav class="items-center hidden h-full lg:flex gap-4">
|
|
<NuxtLink v-for="(link, index) in links" :key="index" :to="link.to" class="font-medium px-2 py-1" :class="{ 'text-primary' : isActive(link) }">
|
|
{{ link.title }}
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="flex items-center justify-end gap-1 lg:flex-1">
|
|
<GitHubButton />
|
|
<TwitterButton class="hidden lg:block" />
|
|
<ColorSwitcher class="hidden lg:block" padding="p-3" />
|
|
<AlgoliaSearchBox v-if="settings && settings.algolia" :options="settings.algolia" :settings="settings" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, useContext, useRoute, computed } from '@nuxtjs/composition-api'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
links: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
setup () {
|
|
const { $docus } = useContext()
|
|
const route = useRoute()
|
|
const currentSlug = computed(() => {
|
|
return route.value.path !== '/' && route.value.params?.pathMatch
|
|
? route.value.params.pathMatch.split('/')[0]
|
|
: null
|
|
})
|
|
const settings = computed(() => $docus.settings.value)
|
|
|
|
function isActive (link) {
|
|
return `/${currentSlug.value}` === link.to
|
|
}
|
|
|
|
return {
|
|
settings,
|
|
isActive
|
|
}
|
|
}
|
|
})
|
|
</script>
|