app/components/Ui/SystemBar.vue

<!--
System bars
-->

<template>
  <v-system-bar
    height="50"
    :class="
      'd-flex flex-row justify-center align-center text-center ' + classes
    "
    style="z-index: 1006;"
    @click="onClick !== undefined ? onClick() : null"
  >
  <!-- Forcing z-index to avoid this : https://github.com/vuetifyjs/nuxt-module/issues/205 -->
    <slot>
      <v-icon v-if="icon" small :icon="icon" />
      {{ text }}
    </slot>
  </v-system-bar>
</template>

<script setup lang="ts">
const props = defineProps({
  text: {
    type: String,
    required: false,
    default: '',
  },
  icon: {
    type: String,
    required: false,
    default: undefined,
  },
  backgroundColor: {
    type: String,
    required: false,
    default: 'neutral-soft',
  },
  textColor: {
    type: String,
    required: false,
    default: 'on-neutral-soft',
  },
  onClick: {
    type: Function,
    required: false,
    default: undefined,
  },
})

// TODO: voir si possible d'utiliser les variables sass à la place?
const classes = [
  'bg-' + props.backgroundColor,
  'text-' + props.textColor,
  props.onClick !== undefined ? 'clickable' : '',
].join(' ')
</script>

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  text-decoration: underline;
}
</style>