Add search to header menu (#239)

components/MenuSearch/MenuSearch.vue

@@ -0,0 +1,136 @@
+<template>
+  <Combobox
+    as="div"
+    class="relative"
+  >
+    <div
+      class="relative w-full bg-white sm:text-sm"
+    >
+      <ComboboxInput
+        class="w-full border-none bg-gray-lower rounded-tl py-2 px-4 text-base text-gray-plain focus:outline-offset-2 focus:outline-2 focus:outline-blue-outline shadow-[inset_0_-2px_0_0] shadow-datagouv placeholder:italic placeholder:text-gray-medium"
+        :display-value="() => ''"
+        :placeholder="$t('Search')"
+        @change="query = $event.target.value"
+      />
+      <ComboboxButton
+        class="absolute right-0 p-2 bg-datagouv rounded-tr hover:!bg-datagouv-hover"
+      >
+        <RiSearchLine
+          class="h-6 w-6 text-white"
+          aria-hidden="true"
+        />
+      </ComboboxButton>
+    </div>
+    <TransitionRoot
+      leave="transition ease-in duration-100"
+      leave-from="opacity-100"
+      leave-to="opacity-0"
+      class="absolute z-10 w-full"
+      @after-leave="query = ''"
+    >
+      <ComboboxOptions
+        class="text-left mt-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg focus:outline-none sm:text-sm"
+      >
+        <ComboboxOption
+          v-for="item in menu"
+          :key="item.type"
+          v-slot="{ active }"
+          as="template"
+        >
+          <li
+            class="relative cursor-default select-none px-4 hover:bg-gray-some *:last:border-0"
+            :class="{ 'text-datagouv': active }"
+          >
+            <NuxtLink
+              :to="item.to"
+              :external="item.external"
+              class="flex items-center space-x-2 border-b py-3"
+            >
+              <component
+                :is="item.icon"
+                class="h-4 w-4"
+              />
+              <i18n-t
+                v-if="query"
+                keypath="Search “{query}” in {type}"
+                class="flex-1"
+                tag="div"
+                scope="global"
+              >
+                <template #query>
+                  <em>{{ query }}</em>
+                </template>
+                <template #type>
+                  <strong>{{ item.type }}</strong>
+                </template>
+              </i18n-t>
+              <i18n-t
+                v-else
+                keypath="Start typing to search in {type}"
+                class="flex-1"
+                tag="div"
+                scope="global"
+              >
+                <template #type>
+                  <strong>{{ item.type }}</strong>
+                </template>
+              </i18n-t>
+              <div aria-hidden="true">
+                <RiArrowRightSLine class="h-4 w-4" />
+              </div>
+            </NuxtLink>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </TransitionRoot>
+  </Combobox>
+</template>
+
+<script setup lang="ts">
+import { RiArrowRightSLine, RiDatabase2Line, RiGovernmentLine, RiLineChartLine, RiRobot2Line, RiSearchLine } from '@remixicon/vue'
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, TransitionRoot } from '@headlessui/vue'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const query = ref('')
+const menu = computed(() => {
+  return [
+    {
+      icon: RiDatabase2Line,
+      type: t('datasets'),
+      to: localePath({
+        path: '/datasets/',
+        query: { q: query.value.trim() },
+      }),
+      external: true,
+    },
+    {
+      icon: RiRobot2Line,
+      type: t('dataservies'),
+      to: localePath({
+        path: '/dataservices/',
+        query: { q: query.value.trim() },
+      }),
+      external: true,
+    },
+    {
+      icon: RiLineChartLine,
+      type: t('reuses'),
+      to: localePath({
+        path: '/reuses/',
+        query: { q: query.value.trim() },
+      }),
+      external: true,
+    },
+    {
+      icon: RiGovernmentLine,
+      type: t('organizations'),
+      to: localePath({
+        path: '/organizations/',
+        query: { q: query.value.trim() },
+      }),
+      external: true,
+    },
+  ]
+})
+</script>

components/SiteHeader/SiteHeader.vue

@@ -6,7 +6,7 @@
     <div class="fr-header__body">
       <div
         class="fr-container"
-        :class="{ '!max-w-none !overflow-hidden': fluid }"
+        :class="{ '!max-w-none': fluid }"
       >
         <div class="fr-header__body-row">
           <div class="fr-header__brand fr-enlarge-link">
@@ -325,26 +325,8 @@
             <div
               class="fr-header__search"
             >
-              <div class="fr-container hidden lg:block fr-container-lg--fluid">
-                <div
-                  class="fr-search-bar"
-                  role="search"
-                >
-                  <label
-                    class="fr-label"
-                    :for="searchInputId"
-                  > {{ $t('Search') }} </label> <input
-                    :id="searchInputId"
-                    class="fr-input"
-                    :placeholder="$t('Search')"
-                    type="search"
-                  > <button
-                    class="fr-btn"
-                    :title="$t('Search')"
-                  >
-                    {{ $t('Search') }}
-                  </button>
-                </div>
+              <div class="!hidden lg:!block">
+                <MenuSearch />
               </div>
             </div>
           </div>

i18n/locales/en-US.json

@@ -794,5 +794,7 @@
   "Dataset unarchived!": "Dataset unarchived!",
   "Dataset archived!": "Dataset archived!",
   "{n} items": "{n} items | {n} item | {n} items",
+  "Start typing to search in {type}": "Start typing to search in {type}",
+  "Search “{query}” in {type}": "Search “{query}” in {type}",
   "": ""
 }

i18n/locales/es-ES.json

@@ -787,5 +787,7 @@
   "Dataset unarchived!": "Dataset unarchived!",
   "Dataset archived!": "Dataset archived!",
   "{n} items": "{n} items | {n} item | {n} items",
+  "Start typing to search in {type}": "Start typing to search in {type}",
+  "Search “{query}” in {type}": "Search “{query}” in {type}",
   "": ""
 }

i18n/locales/fr-FR.json

@@ -815,5 +815,7 @@
   "Dataset unarchived!": "Jeu de données désarchivé!",
   "Dataset archived!": "Jeu de données archivé!",
   "{n} items": "{n} éléments | {n} élément | {n} éléments",
+  "Start typing to search in {type}": "Commencer à taper pour rechercher parmi les {type}",
+  "Search “{query}” in {type}": "Rechercher « {query} » dans les {type}",
   "": ""
 }

tailwind.config.js

@@ -48,6 +48,7 @@ export default {
         blue: {
           light: '#e3e3fd',
           tint: '#c1c1fd',
+          outline: '#0a76f6',
         },
         secondary: {
           lightest: '#EEEEEE',