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="true"
      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="true"
        tile
      >
        <LayoutSubHeaderActivityYear v-if="smAndUp && !showDateTimeRange" class="activity-year" />

        <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row align-center h-100">
          <LayoutSubHeaderDataTiming
              v-if="smAndUp && !showDateTimeRange"
              class="data-timing ml-2"
          />

          <LayoutSubHeaderDataTimingRange
              v-if="smAndUp && showDateTimeRange"
              class="data-timing-range ml-n1"
          />

          <v-btn
              v-if="smAndUp"
              ref="btn"
              class="switch-btn ml-1 theme-neutral-soft"
              height="22" min-height="22" max-height="22"
              width="25" min-width="25" max-width="25"
              elevation="0"
              @click="showDateTimeRange = !showDateTimeRange"
          >
              <v-icon icon="fas fa-history" class="font-weight-normal" style="font-size: 14px;" />
          </v-btn>
          <v-tooltip location="bottom" :activator="btn">
              <span>{{ $t('history_help') }}</span>
          </v-tooltip>

          <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, ref} from "@vue/reactivity";
    import type {ComputedRef, Ref} from "@vue/reactivity";
    import {useMenu} from "~/composables/layout/useMenu";
    import {useDisplay} from "vuetify";

    const { smAndUp, lgAndUp } = useDisplay()
    const accessProfile = useAccessProfileStore()
    const { hasMenu } = useMenu()
    const btn: Ref = ref(null)

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

    const showDateTimeRange: Ref<boolean> = ref(
        Object.hasOwn(accessProfile.historical, 'dateStart') && accessProfile.historical.dateStart !== null &&
        Object.hasOwn(accessProfile.historical, 'dateEnd') && 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;
}

.switch-btn {
  border-width: 1px;
  border-style: solid;
}
</style>