Added search in header

components/app/TInputIcon.vue

@@ -8,7 +8,10 @@
       v-bind="$attrs"
       v-on="$listeners"
     />
-    <div class="absolute flex items-center ml-3 bottom-0 top-0">
+    <div
+      class="absolute flex items-center ml-3 bottom-0 top-0"
+      :class="iconWrapperClass"
+    >
       <fa slot="icon" :icon="icon" :class="iconClass" />
     </div>
   </div>
@@ -26,6 +29,10 @@ export default {
       type: String,
       default: null,
     },
+    iconWrapperClass: {
+      type: String,
+      default: null,
+    },
     iconClass: {
       type: String,
       default: null,

components/layout/LayoutHeader.vue

@@ -7,6 +7,8 @@
       <LayoutHeaderLogo />
 
       <div class="flex justify-end items-center relative">
+        <LayoutHeaderMenuSearch />
+
         <LayoutHeaderMenu />
 
         <AppDarkMode />

components/layout/LayoutHeaderMenu.vue

@@ -4,7 +4,7 @@
       <nuxt-link
         v-if="item.url.startsWith('/')"
         :key="index"
-        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
+        class="menu-item"
         :to="item.url"
       >
         {{ item.title }}
@@ -20,7 +20,7 @@
     >
       <a
         slot="trigger"
-        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
+        class="menu-item"
         href="https://forum.monnaie-libre.fr/"
         target="_blank"
         rel="noopener noreferrer"
@@ -49,4 +49,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="postcss" scoped>
+.menu-item {
+  @apply inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2;
+}
+</style>

components/layout/LayoutHeaderMenuAvatar.vue

@@ -15,7 +15,11 @@
         aria-haspopup="true"
         class="h-8 w-8 focus:ring-2 focus:outline-none rounded-full"
       >
-        <img v-if="user" :src="user.avatar_url" class="rounded-full" />
+        <img
+          v-if="user && user.avatar_url"
+          :src="user.avatar_url"
+          class="rounded-full"
+        />
         <fa v-else icon="user-circle" class="text-3xl" />
       </button>
       <fa icon="caret-down" class="pl-1.5" />

components/layout/LayoutHeaderMenuSearch.vue

+<template>
+  <div :class="isVisible && 'mr-2'">
+    <t-input
+      ref="search"
+      v-model="query"
+      :class="!isVisible && 'hidden'"
+      type="search"
+      :placeholder="$t('search') + ' (ctrl + F)'"
+      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 pl-48',
+      ]"
+      @click="setVisible()"
+    >
+      <fa slot="icon" icon="search" :class="[isVisible ? `` : '', '']" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      query: '',
+      isVisible: false,
+    }
+  },
+
+  mounted() {
+    document.addEventListener('keydown', this.searchShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.searchShortcut)
+  },
+  methods: {
+    setVisible() {
+      this.isVisible = true
+      this.$nextTick(() => {
+        this.$refs.search.$el.focus()
+      })
+    },
+    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 === 'f' && e.ctrlKey) {
+        // (e.ctrlKey || e.metaKey)) {
+        e.preventDefault() // present "Save Page" from getting triggered.
+
+        this.setVisible()
+      }
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped></style>

static/settings/menus.json

 {
   "menu_header": [
-    {
-      "title": "Lexique",
-      "url": "/lexique"
-    },
     {
       "title": "FAQ",
       "url": "/faq"
@@ -13,8 +9,8 @@
       "url": "/ressources"
     },
     {
-      "title": "Blog",
-      "url": "/blog"
+      "title": "Lexique",
+      "url": "/lexique"
     },
     {
       "title": "Forum",