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"
      @click="onClick !== undefined ? onClick() : null"
  >
    <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: '#eeeeee'
    },
    textColor: {
      type: String,
      required: false,
      default: '#5f5f5f'
    },
    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>