add click outside menu

src/components/Header.vue

@@ -30,7 +30,7 @@
               :text="$t('general.header.sequences_text')"
               icon="bi bi-images"
               path="/mes-sequences"
-              @click.native="menuIsClosed = true"
+              @click.native="closeModal"
             />
           </li>
           <li v-if="userProfileUrl && isLogged" class="logged-link">
@@ -38,7 +38,7 @@
               path="/mes-informations"
               icon="bi bi-person"
               :text="$t('general.header.my_information_text')"
-              @click.native="menuIsClosed = true"
+              @click.native="closeModal"
             />
           </li>
           <li v-if="userProfileUrl && isLogged" class="logged-link">
@@ -46,7 +46,7 @@
               path="/mes-parametres"
               icon="bi bi-gear"
               :text="$t('general.header.my_settings_text')"
-              @click.native="menuIsClosed = true"
+              @click.native="closeModal"
             />
           </li>
           <li v-if="userProfileUrl && isLogged" class="logged-link">
@@ -55,7 +55,7 @@
               icon="bi bi-power"
               :path="logoutUrl"
               :text="$t('general.header.logout_text')"
-              @click.native="menuIsClosed = true"
+              @click.native="closeModal"
             />
           </li>
         </ul>
@@ -65,13 +65,14 @@
               :text="$t('general.header.contribute_text')"
               look="button white"
               path="/partager-des-photos"
-              @click.native="menuIsClosed = true"
+              @click.native="closeModal"
             />
           </div>
           <button
             v-if="isLogged"
             class="menu-burger"
             :aria-label="ariaLabel"
+            v-on-click-outside="closeModal"
             @click="toggleMenu"
           >
             <div v-if="isLogged" class="item-with-sub">
@@ -97,6 +98,7 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
+import type { vOnClickOutside } from '@vueuse/components'
 import { useCookies } from 'vue3-cookies'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -114,6 +116,10 @@ defineProps({
 
 let menuIsClosed = ref<boolean>(true)
 
+function closeModal() {
+  menuIsClosed.value = true
+}
+
 function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
@@ -125,7 +131,7 @@ const ariaLabel = computed((): string =>
 )
 const logoutUrl = computed((): string => getAuthRoute('/auth/logout', '/'))
 const userName = computed((): string =>
-  cookies
+  cookies!
     .get('user_name')
     .match(/\b(\w)/g)!
     .join('')