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-flex theme-neutral text-body-2 px-2"
      flat
      rounded="0"
    >
      <LayoutSubHeaderBreadcrumbs v-if="lgAndUp" class="mr-auto d-flex" />

      <span class="flex-fill" />

      <v-card
        class="d-flex flex-row align-center mr-6"
        flat
        tile
      >
        <LayoutSubHeaderActivityYear v-if="smAndUp && !showDateTimeRange" class="activity-year" />

        <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row">
          <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 d-flex align-center" />
        </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 { smAndUp, mdAndUp, lgAndUp } = useDisplay()
    const accessProfile = useAccessProfileStore()
    const { hasMenu } = useMenu()

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

    const showDateTimeRange: Ref<boolean> = ref(
        accessProfile.historical.dateStart !== null &&
        accessProfile.historical.dateEnd !== null
    )
</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>