feat: menu for mobile

components/layout/LayoutHeader.vue

@@ -16,14 +16,18 @@
     :class="{ '-translate-y-20': scrolled }"
   >
     <nav class="container flex justify-between items-center mx-auto h-16">
+      <LayoutHeaderMenuHamburger class="mr-3 flex lg:hidden">
+        <LayoutHeaderMenu class="flex-col space-y-4" />
+      </LayoutHeaderMenuHamburger>
+
       <LayoutHeaderLogo :show-title="!searchFocus" />
 
       <div class="flex justify-end items-center relative">
         <LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
 
-        <LayoutHeaderMenu />
+        <LayoutHeaderMenu class="hidden lg:flex" />
 
-        <AppDarkModeToggle class="hidden lg:inline-flex ml-3" />
+        <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
 
         <LayoutHeaderMenuAvatar />
       </div>
@@ -75,13 +79,4 @@ export default {
   /* Copied from discourse */
   box-shadow: 0 2px 4px -1px rgb(0 0 0 / 25%);
 }
-.menu-hamburger {
-  display: block;
-  fill: none;
-  height: 16px;
-  width: 16px;
-  stroke: currentcolor;
-  stroke-width: 3;
-  overflow: visible;
-}
 </style>

components/layout/LayoutHeaderMenuAvatar.vue

@@ -69,15 +69,39 @@
           </div>
           <div v-if="git">
             <span
-              class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-purple-200
+                text-purple-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.draft.count"
             />
             <span
-              class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-yellow-200
+                text-yellow-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.pending_review.count"
             />
             <span
-              class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-green-200
+                text-green-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.pending_publish.count"
             />
           </div>
@@ -123,7 +147,15 @@
           >
             <div>Mes tickets</div>
             <div
-              class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+              class="
+                bg-gray-200
+                text-gray-800
+                font-medium
+                w-5
+                h-5
+                text-center text-sm
+                rounded-full
+              "
               v-text="git.my_issues.count"
             />
           </a>
@@ -134,7 +166,15 @@
           >
             <div>Mes demandes de fusion</div>
             <div
-              class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+              class="
+                bg-gray-200
+                text-gray-800
+                font-medium
+                w-5
+                h-5
+                text-center text-sm
+                rounded-full
+              "
               v-text="git.my_merge_requests.count"
             />
           </a>
@@ -167,7 +207,7 @@
           <span>Aide</span>
         </nuxt-link>
 
-        <div><AppDarkModeToggle class="lg:hidden ml-2" /></div>
+        <AppDarkModeToggle class="xl:hidden ml-2" />
 
         <AppA11y class="ml-2" />
       </div>

components/layout/LayoutHeaderMenuForum.vue

 <template>
-  <div v-if="!loading" class="flex items-center">
+  <div v-if="!loading" class="menu-forum flex items-center">
     <MiniMap class="mx-4" style="min-width: 440px" />
 
     <div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
@@ -58,4 +58,7 @@ export default {
   margin-right: 5px;
   display: inline-block;
 }
+.hamburger-menu .menu-forum {
+  display: none;
+}
 </style>

components/layout/LayoutHeaderMenuHamburger.vue

+<script>
+export default {
+  name: 'LayoutHeaderMenuHamburger',
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="hamburger flex flex-col space-between space-y-1.5"
+      :class="isOpen ? 'is-open' : ''"
+      @click="isOpen = !isOpen"
+    >
+      <span class="hamburger-item" />
+      <span class="hamburger-item" />
+      <span class="hamburger-item" />
+    </div>
+
+    <transition :name="isOpen ? 'slideback' : 'slide'">
+      <div
+        v-show="isOpen"
+        class="hamburger-menu fixed bg-white left-0 top-0 w-min z-10 shadow p-8"
+      >
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.hamburger-item {
+  @apply block w-8 h-1 bg-gray-800 dark:bg-gray-300 transition;
+}
+
+.is-open.hamburger > span:nth-child(1) {
+  transform: translate(0, 0.625rem) rotate(-45deg);
+}
+
+.is-open.hamburger > span:nth-child(2) {
+  opacity: 0;
+}
+
+.is-open.hamburger > span:nth-child(3) {
+  transform: translate(0, -0.625rem) rotate(45deg);
+}
+
+.hamburger-menu {
+  top: 65px;
+  height: calc(100vh - 65px);
+}
+
+.slide-leave-active,
+.slide-enter-active {
+  transition: 0.5s;
+}
+.slide-enter {
+  transform: translate(100%, 0);
+}
+.slide-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.slideback-leave-active,
+.slideback-enter-active {
+  transition: 0.5s;
+}
+.slideback-enter {
+  transform: translate(-100%, 0);
+}
+.slideback-leave-to {
+  transform: translate(100%, 0);
+}
+</style>