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 slim text-left text-no-wrap">LOGO</div>

      <div class="d-flex justify-center text-center mx-auto thw-heading-font">
        <slot> <h1>TITLE</h1> </slot>
      </div>

      <div class="d-flex justify-end slim 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, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue";

@Component({
  components: {
    Clock,
  },
})
export default class TitleBar extends Vue {}
</script>

<style scoped>
.slim {
  max-width: 0;
}
</style>