app/components/Layout/Subheader.vue

<!--
Second header de l'application
Contient entre autres le breadcrumb, les commandes de changement d'année et les listes personnalisées
-->

<template>
  <main>
    <v-card
      id="subheader"
      class="d-md-flex theme-neutral text-body-2 px-2"
      flat
      rounded="0"
    >
      <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />

      <v-card
        class="d-md-flex pt-2 mr-6 align-baseline"
        flat
        tile
      >
        <LayoutSubHeaderActivityYear v-if="!showDateTimeRange" class="activity-year" />

        <div v-if="hasMenuOrIsTeacher" class="d-sm-none d-md-flex d-none d-sm-flex">
          <LayoutSubHeaderDataTiming v-if="!showDateTimeRange" class="data-timing ml-2" />
          <LayoutSubHeaderDataTimingRange class="data-timing-range ml-n1" @showDateTimeRange="showDateTimeRange=$event" />
          <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2" />
        </div>
      </v-card>
    </v-card>
  </main>
</template>

<script setup lang="ts">

    import {useAccessProfileStore} from "~/stores/accessProfile";
    import {computed, ComputedRef, ref, Ref} from "@vue/reactivity";
    import {useMenu} from "~/composables/layout/useMenu";
    import {useDisplay} from "vuetify";

    const { mdAndUp } = useDisplay()
    const accessProfile = useAccessProfileStore()
    const { hasMenu } = useMenu()

    const hasMenuOrIsTeacher: ComputedRef<boolean> = computed(
        () => hasMenu('Main') || (accessProfile.isTeacher ?? false)
    )

    const showDateTimeRange: Ref<boolean> = ref(false)

</script>

<style scoped lang="scss">

main {
  font-size: 12px;
}

#subheader {
  max-height: 36px;
}

:deep(#subheader .v-card) {
  max-height: 36px;
  background-color: transparent !important;
}

</style>