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 ot-light_grey text-body-2"
      flat
      tile
    >
      <LayoutSubHeaderBreadcrumbs class="mr-auto d-sm-none d-md-flex d-none d-sm-flex" />

      <v-card
        class="d-md-flex ot-light_grey 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 lang="ts">
import {defineComponent, ref, Ref, useContext} from '@nuxtjs/composition-api'
import {UseAccess} from "~/composables/utils/useAccess";

export default defineComponent({
  setup () {
    const {store} = useContext()
    const {hasMenuOrIsTeacher} = UseAccess(store)
    const showDateTimeRange: Ref<boolean> = ref(false)

    return {
      showDateTimeRange,
      hasMenuOrIsTeacher
    }
  }
})
</script>

<style scoped>

</style>