add click outside menu

.eslintrc.js

@@ -29,7 +29,8 @@ module.exports = {
   rules: {
     'vue/require-default-prop': 'off',
     'prettier/prettier': 'error',
-    '@typescript-eslint/no-namespace': 'off'
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off'
     // override/add rules settings here, such as:
     // 'vue/no-unused-vars': 'error'
   }

package.json

@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "@vueuse/components": "^10.2.1",
+    "@vueuse/core": "^10.2.1",
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",

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('')

src/router/index.ts

@@ -8,7 +8,6 @@ import MySettingsView from '../views/MySettingsView.vue'
 import MySequencesView from '../views/MySequencesView.vue'
 import MySequenceView from '../views/MySequenceView.vue'
 import UploadView from '../views/UploadView.vue'
-import { getAuthRoute } from '@/utils/auth'
 const { cookies } = useCookies()
 const routes: Array<RouteRecordRaw> = [
   {
@@ -36,17 +35,6 @@ const routes: Array<RouteRecordRaw> = [
     path: '/partager-des-photos',
     name: 'upload',
     component: UploadView
-  },
-  {
-    path: '/login',
-    name: 'login',
-    beforeEnter(to, from, next) {
-      const nextRoute = `${location.protocol}//${location.host}${to.path}`
-      window.location.replace(
-        `api/auth/login?next_url=${encodeURIComponent(nextRoute)}`
-      )
-    },
-    component: UploadView
   }
 ]
 const router = createRouter({
@@ -61,8 +49,6 @@ router.beforeEach(async (to, from, next) => {
     to.name === 'sequence'
   const url = `${location.protocol}//${location.host}`
   const nextRoute = `${url}${to.path}`
-  console.log(url)
-  console.log(nextRoute)
   if (loggedRoutes) {
     try {
       const loginUrl = `/api/users/me`
@@ -76,10 +62,10 @@ router.beforeEach(async (to, from, next) => {
         next()
       }
     } catch (e) {
-      console.log('CAAAATCH', `${url}/api/auth/login`)
       window.location.replace(
         `${url}/api/auth/login?next_url=${encodeURIComponent(nextRoute)}`
       )
+      next()
     }
   } else next()
 })