ovdashboard/ui/src/components/TitleBar.vue

<template>
  <v-toolbar color="primary" prominent dark>
    <v-container class="d-flex pa-0" fluid fill-height>
      <div class="d-flex justify-start text-left text-no-wrap">
        <THWLogo :above="logo_above" :below="logo_below" />
      </div>

      <div
        class="d-flex justify-center text-center mx-auto text-h6 text-md-h5"
        v-html="title"
      />

      <div class="d-none d-sm-flex justify-end text-right text-no-wrap">
        <div class="flex-column">
          <Clock
            class="d-flex justify-end font-weight-light text-h6 text-md-h5"
            format="DDD"
          />
          <Clock
            class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
            format="T"
          />
        </div>
      </div>
    </v-container>
  </v-toolbar>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue";
import THWLogo from "./THWLogo.vue";

@Component({
  components: {
    Clock,
    THWLogo,
  },
})
export default class TitleBar extends Vue {
  @Prop({
    default: "Technisches Hilfswerk",
  })
  private readonly logo_above!: string;

  @Prop({
    default: "OV Musterstadt",
  })
  private readonly logo_below!: string;

  @Prop({
    default: "TITLE",
  })
  private readonly title!: string;
}
</script>

<style scoped>
.v-toolbar {
  user-select: none;
}

.container > div:first-child,
.container > div:last-child {
  max-width: 0;
}
</style>