<template>
  <header class="d-header">
    <div class="flex flex-none h-full d-container-content">
      <NavigationButton v-if="aside" />

      <div :class="[aside ? 'justify-center' : 'justify-start']" class="flex items-center flex-1 lg:flex-none">
        <HeaderLogo />
      </div>

      <div class="items-center hidden lg:flex lg:flex-1">
        <HeaderNavigation />
      </div>

      <!-- Desktop: Right section -->
      <div class="flex items-center justify-end lg:flex-none">
        <!-- Algolia search if settings specified -->
        <AlgoliaSearchBox v-if="settings.algolia" :options="settings.algolia" class="w-14 lg:flex-1 lg:px-2" />

        <!-- Preserve ColorSwitcher on mobile if search does not exist -->
        <div v-else class="flex lg:hidden">
          <ColorSwitcher />
        </div>
        <div class="items-center justify-end hidden lg:flex">
          <ReleaseTag v-if="lastRelease" :version="lastRelease" />
          <LangSwitcher padding="p-1.5" />
          <ColorSwitcher padding="p-1.5" />
          <SocialIcons padding="p-1.5" />
        </div>
      </div>
    </div>
  </header>
</template>

<script>

import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    aside: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const { $docus } = useContext()

    const settings = computed(() => $docus.settings.value)

    const lastRelease = computed(() => $docus.lastRelease?.value)

    return {
      settings,
      lastRelease
    }
  }
})
</script>
