style: fix header responsive

components/layout/LayoutHeader.vue

@@ -4,14 +4,14 @@
     :class="{ '-translate-y-20': scrolled }"
   >
     <nav class="container flex justify-between items-center mx-auto h-16">
-      <LayoutHeaderLogo />
+      <LayoutHeaderLogo :show-title="!searchFocus" />
 
       <div class="flex justify-end items-center relative">
-        <LayoutHeaderMenuSearch />
+        <LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
 
         <LayoutHeaderMenu />
 
-        <AppDarkModeToggle />
+        <AppDarkModeToggle class="hidden lg:inline-flex ml-3" />
 
         <LayoutHeaderMenuAvatar />
       </div>
@@ -27,6 +27,7 @@ export default {
       limitPosition: 64,
       scrolled: false,
       lastPosition: 0,
+      searchFocus: false,
     }
   },
   mounted() {

components/layout/LayoutHeaderLogo.vue

@@ -10,6 +10,7 @@
 
     <span
       class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap"
+      :class="!props.showTitle && 'hidden lg:block'"
     >
       {{ $options.config.site_title }}
     </span>
@@ -24,5 +25,11 @@ export default {
   name: 'LayoutHeaderLogo',
   rawLogo,
   config,
+  props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+  },
 }
 </script>

components/layout/LayoutHeaderMenu.vue

 <template>
-  <div class="flex mr-3">
+  <div class="flex">
     <template v-for="(item, index) of menu">
       <nuxt-link
         v-if="item.url.startsWith('/')"
@@ -13,6 +13,7 @@
 
     <t-dropdown
       toggle-on-hover
+      :hide-on-leave-timeout="0"
       :classes="{
         dropdown:
           'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',

components/layout/LayoutHeaderMenuAvatar.vue

@@ -161,12 +161,14 @@
 
       <hr class="border-t dark:border-gray-500 my-1" />
 
-      <div class="flex">
+      <div class="flex items-center justify-between">
         <nuxt-link to="/aide" class="menu-item">
           <fa icon="info-circle" class="text-gray-400 mr-2" />
           <span>Aide</span>
         </nuxt-link>
 
+        <div><AppDarkModeToggle class="lg:hidden ml-2" /></div>
+
         <AppA11y class="ml-2" />
       </div>
     </div>

components/layout/LayoutHeaderMenuSearch.vue

@@ -17,11 +17,11 @@
       :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',
+          : '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="setVisible()"
+      @click="isVisible = true"
     >
-      <fa slot="icon" icon="search" :class="[isVisible ? `` : '', '']" />
+      <fa slot="icon" icon="search" :class="[isVisible ? `` : '', '-mb-1']" />
     </div>
   </div>
 </template>
@@ -34,6 +34,16 @@ export default {
       isVisible: false,
     }
   },
+  watch: {
+    isVisible(newValue) {
+      this.$emit('search-focus', newValue)
+      if (newValue) {
+        this.$nextTick(() => {
+          this.$refs.search.$el.focus()
+        })
+      }
+    },
+  },
 
   mounted() {
     document.addEventListener('keydown', this.searchShortcut)
@@ -42,12 +52,6 @@ export default {
     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}`)

components/search/SearchContainer.vue

@@ -73,7 +73,7 @@
         </SearchNoResult>
       </div>
 
-      <aside class="sticky h-full top-24 ml-12 bottom-12 z-20">
+      <aside class="sticky h-full top-24 ml-12 bottom-12">
         <slot
           name="sidebar"
           :query="query"