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
      class="d-md-flex bg-ot-light-grey text-body-2"
      flat
    >
      <LayoutSubHeaderBreadcrumbs class="mr-auto d-sm-none d-md-flex d-none d-sm-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";

    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 {
  color: rgb(var(--v-theme-ot-grey));
  font-size: 12px;
}

.v-card {
  max-height: 33px;
  background: transparent;
}
</style>