app_vue2/components/Layout/Subheader.vue

<template>
  <main>
    <v-card
      v-if="displayedSubHeader"
      class="d-none d-sm-none d-md-flex ot_super_light_grey text-body-2"
      flat
      tile
    >
      <LayoutBreadcrumbs class="mr-auto"></LayoutBreadcrumbs>
      <v-card
        class="d-md-flex ot_super_light_grey pt-2 mr-6  align-baseline"
        flat
        tile
      >
        <LayoutActivityYear v-if="!showDateTimeRange"></LayoutActivityYear>
        <LayoutDataTiming v-if="!showDateTimeRange" class="ml-2"></LayoutDataTiming>
        <LayoutDataTimingRange class="ml-n1" v-on:showDateTimeRange="showDateTimeRange=$event"></LayoutDataTimingRange>
      </v-card>
    </v-card>
  </main>
</template>

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

  export default defineComponent({
    setup() {
      const {store} = useContext()
      const showDateTimeRange:Ref<boolean> = ref(false)
      const displayedSubHeader:ComputedRef<boolean> = computed(()=>store.state.profile.access.hasLateralMenu || store.state.profile.access.isTeacher)
      return {
        displayedSubHeader,
        showDateTimeRange
      }
    }
  })
</script>


<style scoped>

</style>