fix device detection with SSR

components/Layout/Navigation.vue

@@ -4,7 +4,7 @@ Menu Navigation
 <template>
   <div v-intersect="onIntersect">
     <!-- Navigation (écran large) -->
-    <div v-if="lgAndUp || (isLargeScreen && !nuxtReady)">
+    <div v-if="lgAndUp || (!isMobileDevice() && !nuxtReady)">
       <LayoutNavigationLg :menu="menu" />
     </div>
 
@@ -19,13 +19,7 @@ Menu Navigation
 import { useDisplay } from 'vuetify'
 import type { MainMenuItem } from '~/types/interface'
 import { useLayoutStore } from '~/stores/layoutStore'
-
-// Get the initial width (useDisplay won't work during SSR)
-const isLargeScreen =
-  ((typeof window === 'undefined' && 1024) ||
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth) >= 1280
+import { useClientDevice } from '~/composables/useClientDevice'
 
 // On force la version écran large au build côté serveur si l'écran fait plus de 1280px de large
 const nuxtReady = ref(false)
@@ -35,6 +29,8 @@ onNuxtReady(() => {
 
 const { lgAndUp } = useDisplay()
 
+const { isMobileDevice } = useClientDevice()
+
 const menu: Array<MainMenuItem> = [
   {
     label: 'Nos logiciels',

composables/useClientDevice.ts

@@ -1,7 +1,20 @@
+import { useRequestHeaders } from '#app'
+
 export function useClientDevice() {
   const isMobileDevice = () => {
+    let userAgent = navigator ? navigator.userAgent : null
+
+    if (userAgent === null) {
+      const headers = useRequestHeaders()
+      userAgent = headers.userAgent
+    }
+
+    if (!userAgent) {
+      return false
+    }
+
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
+      userAgent
     )
   }