fix prerendering style

assets/style/main.scss

@@ -36,3 +36,15 @@ body {
 h1, h2, h3, h4, h5, li, .v-btn {
   text-align: start;
 }
+
+.lg-and-up {
+  @media (max-width: 1240px) {
+    display: none !important;
+  }
+}
+
+.md-and-down {
+  @media (min-width: 1240px) {
+    display: none !important;
+  }
+}

components/Layout/Footer/Footer.vue

@@ -15,7 +15,7 @@
           </v-col>
 
           <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
-          <v-col v-if="lgAndUp" cols="7">
+          <v-col class="lg-and-up" cols="7">
             <v-row>
               <v-col cols="3">
                 <v-row>
@@ -96,7 +96,7 @@
           </v-col>
 
           <!-- Sixième section : liens réseaux sociaux (écrans larges seulement) -->
-          <v-col v-if="lgAndUp" cols="2">
+          <v-col class="lg-and-up" cols="2">
             <v-row class="justify-center">
               <h5>Suivez-nous</h5>
             </v-row>
@@ -136,7 +136,7 @@
         </v-row>
 
         <!-- Deuxième section alt : version petits écrans -->
-        <v-row v-if="mdAndDown" class="justify-center social-networks">
+        <v-row class="md-and-down justify-center social-networks">
           <!-- TODO: voir si faisable de fusionner avec la section précédente -->
           <v-col cols="12" class="text-center">
             <nuxt-link
@@ -164,7 +164,7 @@
       </div>
 
       <!-- Troisième section alt : version petits écrans -->
-      <v-row v-if="mdAndDown">
+      <v-row class="md-and-down">
         <v-col cols="12">
           <div v-for="(item, index) in footerLinks" :key="index">
             <v-container>
@@ -187,7 +187,7 @@
                   :key="sublinkIndex"
                   class="mt-3"
                 >
-                  <nuxt-link :href="sublink.link" :target="sublink.target ?? '_self'">
+                  <nuxt-link :href="sublink.link" :target="sublink.target">
                     {{ sublink.label }}
                   </nuxt-link>
                 </div>
@@ -213,9 +213,7 @@
         </v-row>
 
         <v-row class="mb-3" justify="center">
-          <p>
-            2024 © Opentalent est une marque déposée par 2iOPENservice
-          </p>
+          <p>2024 © Opentalent est une marque déposée par 2iOPENservice</p>
         </v-row>
       </div>
     </LayoutContainer>
@@ -223,13 +221,10 @@
 </template>
 
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
 import { useLayoutStore } from '~/stores/layoutStore'
 import AgendaLink from '~/components/Common/AgendaLink.vue'
 import UrlUtils from '~/services/utils/urlUtils.js'
 
-const { mdAndDown, lgAndUp } = useDisplay()
-
 const runtimeConfig = useRuntimeConfig()
 
 const makeAgendaLink = (path: string) => {
@@ -263,14 +258,17 @@ const footerLinks = ref([
       {
         label: 'Opentalent Artist',
         link: '/opentalent-artist',
+        target: 'self',
       },
       {
         label: 'Opentalent School',
         link: '/opentalent-school',
+        target: 'self',
       },
       {
         label: 'Opentalent Manager',
         link: '/opentalent-manager',
+        target: 'self',
       },
     ],
   },
@@ -280,14 +278,17 @@ const footerLinks = ref([
       {
         label: 'Qui sommes-nous',
         link: '/qui-sommes-nous',
+        target: 'self',
       },
       {
         label: 'Nous rejoindre',
         link: '/nous-rejoindre',
+        target: 'self',
       },
       {
         label: 'Nous contacter',
         link: '/nous-contacter',
+        target: 'self',
       },
     ],
   },
@@ -297,10 +298,12 @@ const footerLinks = ref([
       {
         label: 'Foire Aux Questions ',
         link: 'https://ressources.opentalent.fr',
+        target: 'self',
       },
       {
         label: 'Support en ligne ',
         link: 'https://ressources.opentalent.fr/?contact',
+        target: 'self',
       },
     ],
   },
@@ -412,7 +415,7 @@ a {
 
   .social-networks {
     a {
-      font-size: 3rem;
+      font-size: 2rem;
       margin: 0 1rem;
     }
   }

components/Layout/Navigation.vue

@@ -2,35 +2,23 @@
 Menu Navigation
 -->
 <template>
-  <div v-if="nuxtReady" v-intersect="onIntersect">
+  <div v-intersect="onIntersect">
     <!-- Navigation (écran large) -->
-    <div v-if="lgAndUp">
+    <div class="lg-and-up">
       <LayoutNavigationLg :menu="menu" />
     </div>
 
     <!-- Navigation (petit écran) -->
-    <div v-else>
+    <div class="md-and-down">
       <LayoutNavigationMd :menu="menu" />
     </div>
   </div>
-  <div v-else class="loading-screen">
-    <v-progress-circular indeterminate />
-  </div>
 </template>
 
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
 import type { MainMenuItem } from '~/types/interface'
 import { useLayoutStore } from '~/stores/layoutStore'
 
-// On force la version écran large au build côté serveur si l'écran fait plus de 1280px de large
-const nuxtReady = ref(false)
-onNuxtReady(() => {
-  nuxtReady.value = true
-})
-
-const { lgAndUp } = useDisplay()
-
 const menu: Array<MainMenuItem> = [
   {
     label: 'Nos logiciels',
@@ -63,23 +51,3 @@ const onIntersect = (isIntersecting: boolean) => {
   layoutStore.setIsHeaderVisible(isIntersecting)
 }
 </script>
-
-<style scoped lang="scss">
-.loading-screen {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  height: 120px;
-  padding: 16px;
-  margin: 0 10%;
-
-  .v-img {
-    max-width: 300px;
-  }
-
-  .v-progress-circular {
-    color: var(--primary-color);
-  }
-}
-</style>