app_vue2/components/Layout/Subheader.vue

<template>
  <main>
    <v-card
      class="d-none d-sm-none d-md-flex ot_light_grey text-body-2"
      flat
      tile
    >
      <LayoutSubHeaderBreadcrumbs class="mr-auto"></LayoutSubHeaderBreadcrumbs>

      <v-card
        class="d-md-flex ot_super_light_grey pt-2 mr-6  align-baseline"
        flat
        tile
      >
        <LayoutSubHeaderActivityYear class="activity-year" v-if="!showDateTimeRange"></LayoutSubHeaderActivityYear>
        <LayoutSubHeaderDataTiming v-if="!showDateTimeRange" class="data-timing ml-2"></LayoutSubHeaderDataTiming>
        <LayoutSubHeaderDataTimingRange class="data-timing-range ml-n1" v-on:showDateTimeRange="showDateTimeRange=$event"></LayoutSubHeaderDataTimingRange>
        <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2"></LayoutSubHeaderPersonnalizedList>
      </v-card>
    </v-card>
  </main>
</template>

<script lang="ts">
  import {defineComponent, ref, Ref} from '@nuxtjs/composition-api'

  export default defineComponent({
    setup() {
      const showDateTimeRange:Ref<boolean> = ref(false)
      return {
        showDateTimeRange
      }
    }
  })
</script>


<style scoped>

</style>