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-font">
        TITLE
      </div>

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

<script>
import { Component, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue";

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

<style lang="css" scoped>
.slim {
  max-width: 0;
}

.thw-font {
  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
}
</style>