complete responsiveness for footer

app.vue

@@ -10,6 +10,10 @@
 
 <script setup lang="ts">
 
+import { useDisplay } from "vuetify";
+
+const { mdAndDown } = useDisplay()
+
 const layoutStore = useLayoutStore()
 
 layoutStore.resetAnchoredSections()

components/Common/ActionMenu.vue

@@ -159,7 +159,8 @@ const onActionClick = (action: ActionMenuItem) => {
   background-color: var(--neutral-color);
 
   .v-btn {
-    margin: 4px 6px;
+    margin: 6px 2%;
+    width: 46%;
   }
 }
 

components/Layout/Footer/Footer.vue

@@ -187,35 +187,35 @@
       </div>
 
       <!-- Troisième section alt : version petits écrans -->
-<!--      <v-row v-if="mdAndDown">-->
-<!--        <v-col cols="12" >-->
-<!--          <div v-for="(item, index) in footerLinks" :key="index">-->
-<!--            <v-container>-->
-<!--              <div class="section" @click="toggleSection(index)">-->
-<!--                <div class="d-flex flex-row justify-space-between">-->
-<!--                  {{ item.label }}-->
-
-<!--                  <v-icon-->
-<!--                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"-->
-<!--                  />-->
-<!--                </div>-->
-
-<!--                <div-->
-<!--                  v-show="isActive(index)"-->
-<!--                  v-for="(sublink, sublinkIndex) in item.sublink"-->
-<!--                  :key="sublinkIndex"-->
-<!--                  class="mt-3"-->
-<!--                >-->
-<!--                  <nuxt-link :href="sublink.link">-->
-<!--                    {{ sublink.label }}-->
-<!--                  </nuxt-link>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </v-container>-->
-
-<!--          </div>-->
-<!--        </v-col>-->
-<!--      </v-row>-->
+      <v-row v-if="mdAndDown">
+        <v-col cols="12" >
+          <div v-for="(item, index) in footerLinks" :key="index">
+            <v-container>
+              <div class="section" @click="toggleSection(index)">
+                <div class="d-flex flex-row justify-space-between">
+                  {{ item.label }}
+
+                  <v-icon
+                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
+                  />
+                </div>
+
+                <div
+                  v-show="isActive(index)"
+                  v-for="(sublink, sublinkIndex) in item.sublink"
+                  :key="sublinkIndex"
+                  class="mt-3"
+                >
+                  <nuxt-link :href="sublink.link">
+                    {{ sublink.label }}
+                  </nuxt-link>
+                </div>
+              </div>
+            </v-container>
+
+          </div>
+        </v-col>
+      </v-row>
 
       <div class="footnotes">
         <v-row justify="center">
@@ -427,7 +427,7 @@ a {
     cursor: pointer;
 
     >div:first-child {
-      border-bottom: 1px solid var(--on-secondary-color);
+      border-bottom: 1px solid var(--on-primary-color);
       padding-bottom: 6px;
       text-transform: uppercase;
     }

components/Layout/Footer/Prefooter.vue

@@ -4,9 +4,9 @@ Première section du footer (galerie des logiciels)
 
 <template>
   <footer>
-    <LayoutContainer>
+    <!-- Ecrans larges -->
+    <LayoutContainer v-if="lgAndUp">
       <v-row>
-
         <v-col cols="4" class="text-center">
           <nuxt-link to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png"/>
@@ -42,10 +42,44 @@ Première section du footer (galerie des logiciels)
         </v-col>
       </v-row>
     </LayoutContainer>
+
+    <!-- Petits écrans -->
+    <LayoutContainer v-else>
+      <v-row class="justify-center">
+        <v-col cols="3" class="border-right">
+          <nuxt-link to="/opentalent_artist">
+            <v-img src="/images/logo/logiciels/&_Jaune.png"/>
+          </nuxt-link>
+        </v-col>
+
+        <v-col cols="1">
+          <v-divider :vertical="true" />
+        </v-col>
+
+        <v-col cols="3">
+          <nuxt-link to="/opentalent_school">
+            <v-img src="/images/logo/logiciels/&_Bleu.png"/>
+          </nuxt-link>
+        </v-col>
+
+        <v-col cols="1">
+          <v-divider :vertical="true" />
+        </v-col>
+
+        <v-col cols="3">
+          <nuxt-link to="/opentalent_manager">
+            <v-img src="/images/logo/logiciels/&_Rouge.png"/>
+          </nuxt-link>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
   </footer>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">

components/Layout/Navigation/Md.vue

@@ -1,75 +1,77 @@
 <template>
-  <v-app class="navigation-sm">
-    <!-- Top bar -->
-    <v-app-bar app>
-      <v-app-bar-nav-icon
-        @click="toggleMenu"
-      />
-
-      <nuxt-link to="/">
-        <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
-      </nuxt-link>
-
-      <v-spacer />
-
-      <div class="mx-4">
-        <v-btn
-          href="https://admin.opentalent.fr/#/login/"
-          icon="fas fa-user"
-          class="icon"
+  <div class="app-container">
+    <v-app class="navigation-sm">
+      <!-- Top bar -->
+      <v-app-bar app>
+        <v-app-bar-nav-icon
+          @click="toggleMenu"
         />
 
-        <v-btn
-          to="/nous-contacter"
-          icon="fas fa-phone"
-          class="icon"
-        />
+        <nuxt-link to="/">
+          <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
+        </nuxt-link>
+
+        <v-spacer />
 
-        <AgendaLink href="/agenda-culturel">
+        <div class="mx-4">
           <v-btn
-            icon="fas fa-calendar"
+            href="https://admin.opentalent.fr/#/login/"
+            icon="fas fa-user"
             class="icon"
           />
-        </AgendaLink>
-      </div>
-    </v-app-bar>
-
-    <!-- Tiroir de navigation principal -->
-    <v-navigation-drawer
-      v-model="isMenuOpen"
-      app
-      temporary
-    >
-      <v-list nav dense>
-        <v-list-item
-          v-if="isSubMenu"
-          class="menuItem back-item"
-          @click="onBackItemClick"
-        >
-          <v-list-item-title>
-            <v-icon icon="fas fa-caret-left" class="mr-1"/> Retour
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item
-          v-for="(item, index) in activeMenu"
-          :key="item.label"
-          :to="item.to"
-          class="menuItem"
-          @click="onMenuItemClick(index, item)"
-        >
-          <v-list-item-title class="d-flex flex-row w-100">
-            <span class="flex-grow-1">
-              {{ item.label }}
-            </span>
-            <span v-if="item.children?.length! > 0">
-              <v-icon icon="fa fa-angle-right" />
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-  </v-app>
+
+          <v-btn
+            to="/nous-contacter"
+            icon="fas fa-phone"
+            class="icon"
+          />
+
+          <AgendaLink href="/agenda-culturel">
+            <v-btn
+              icon="fas fa-calendar"
+              class="icon"
+            />
+          </AgendaLink>
+        </div>
+      </v-app-bar>
+
+      <!-- Tiroir de navigation principal -->
+      <v-navigation-drawer
+        v-model="isMenuOpen"
+        app
+        temporary
+      >
+        <v-list nav dense>
+          <v-list-item
+            v-if="isSubMenu"
+            class="menuItem back-item"
+            @click="onBackItemClick"
+          >
+            <v-list-item-title>
+              <v-icon icon="fas fa-caret-left" class="mr-1"/> Retour
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-list-item
+            v-for="(item, index) in activeMenu"
+            :key="item.label"
+            :to="item.to"
+            class="menuItem"
+            @click="onMenuItemClick(index, item)"
+          >
+            <v-list-item-title class="d-flex flex-row w-100">
+              <span class="flex-grow-1">
+                {{ item.label }}
+              </span>
+              <span v-if="item.children?.length! > 0">
+                <v-icon icon="fa fa-angle-right" />
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+    </v-app>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -135,6 +137,10 @@ const withAnimation = (callback: () => void) => {
 </script>
 
 <style scoped lang="scss">
+.app-container {
+  height: 54px;
+}
+
 .navigation-sm {
   background-color: var(--neutral-color);
   position: fixed;
@@ -158,6 +164,6 @@ const withAnimation = (callback: () => void) => {
 }
 
 .icon {
-  color: var(--on-neutral-color);
+  color: var(--on-neutral-color-light);
 }
 </style>

pages/index.vue

@@ -27,7 +27,7 @@
 
   <HomeHelp />
 
-  <LayoutFooterPrefooter v-if="lgAndUp" />
+  <LayoutFooterPrefooter />
 </template>
 
 <script setup>