LayoutHeaderMenuSearch.vue

<template>
  <div :class="isVisible && 'mr-2'">
    <t-input
      ref="search"
      v-model="query"
      :class="!isVisible && 'hidden'"
      type="search"
      :placeholder="$t('search') + ` [${isMac ? 'cmd' : 'ctrl'} K]`"
      class="pl-12 w-full text-base rounded-full"
      @keyup.enter="search()"
      @blur="isVisible = false"
      @focus="$event.target.select()"
    />

    <div
      class="flex items-center bottom-0 top-0"
      :class="[
        isVisible
          ? `absolute ml-3 text-2xl text-blue-100 dark:text-gray-600`
          : 'text-2xl text-blue-300 dark:text-blue-800 hover:text-blue-400 dark-hover:text-blue-700 cursor-text py-3 pr-3 lg:pl-48',
      ]"
      @click="isVisible = true"
    >
      <fa slot="icon" icon="search" :class="[isVisible ? `` : '', '-mb-1']" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      isVisible: false,
      isMac: false,
    }
  },
  watch: {
    isVisible(newValue) {
      this.$emit('search-focus', newValue)
      if (newValue) {
        this.$nextTick(() => {
          this.$refs.search.$el.focus()
        })
      }
    },
  },

  mounted() {
    this.isMac = /(macintosh|macintel|macppc|mac68k|macos)/i.test(
      navigator.userAgentData.platform
    )
    document.addEventListener('keydown', this.searchShortcut)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.searchShortcut)
  },
  methods: {
    search() {
      if (this.$route.path !== '/recherche') {
        this.$router.push(`/recherche?q=${this.query}`)
      } else {
        this.$nuxt.$emit('global-search', this.query)
      }
    },
    searchShortcut(e) {
      if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
        e.preventDefault() // present "Save Page" from getting triggered.

        this.isVisible = !this.isVisible
      }
    },
  },
}
</script>

<style lang="postcss" scoped></style>