v8-4083_responsive_subheader

components/Layout/Subheader.vue

@@ -11,7 +11,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
       flat
       rounded="0"
     >
-      <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />
+      <LayoutSubHeaderBreadcrumbs v-if="lgAndUp" class="mr-auto d-flex" />
 
       <span class="flex-fill" />
 
@@ -20,11 +20,11 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
         flat
         tile
       >
-        <LayoutSubHeaderActivityYear v-if="!showDateTimeRange" class="activity-year" />
+        <LayoutSubHeaderActivityYear v-if="smAndUp && !showDateTimeRange" class="activity-year" />
 
         <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row">
-          <LayoutSubHeaderDataTiming v-if="!showDateTimeRange" class="data-timing ml-2" />
-          <LayoutSubHeaderDataTimingRange class="data-timing-range ml-n1" @showDateTimeRange="showDateTimeRange=$event" />
+          <LayoutSubHeaderDataTiming v-if="smAndUp && !showDateTimeRange" class="data-timing ml-2" />
+          <LayoutSubHeaderDataTimingRange v-if="smAndUp" class="data-timing-range ml-n1" @showDateTimeRange="showDateTimeRange=$event" />
           <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2" />
         </div>
       </v-card>
@@ -39,7 +39,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
     import {useMenu} from "~/composables/layout/useMenu";
     import {useDisplay} from "vuetify";
 
-    const { mdAndUp } = useDisplay()
+    const { smAndUp, mdAndUp, lgAndUp } = useDisplay()
     const accessProfile = useAccessProfileStore()
     const { hasMenu } = useMenu()