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
        v-if="!organizationProfile.isFreemiumProduct"
        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 { computed, ref } from 'vue'
import type { ComputedRef, Ref } from 'vue'
import { useDisplay } from 'vuetify'
import { useMenu } from '~/composables/layout/useMenu'
import { useAccessProfileStore } from '~/stores/accessProfile'

const { smAndUp, lgAndUp } = useDisplay()
const accessProfile = useAccessProfileStore()
const organizationProfile = useOrganizationProfileStore()
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: 13px;
}

#subheader {
  max-height: 36px;
}

:deep(#subheader .v-card) {
  min-height: 36px;
  max-height: 36px;
  background-color: transparent !important;
}

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