telws-common-frontend/src/App.vue

<template>
  <v-app>
    <v-app-bar
      app
      :color="getAppBarColor()"
      dark
      clipped-left
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <div class="d-flex align-center">
        <v-toolbar-title>
          {{ getTitle() }}
        </v-toolbar-title>
      </div>
    </v-app-bar>
    <v-navigation-drawer
      app
      clipped
      v-model="drawer"
    >
      <v-list
        dense
        nav
      >
        <v-list-item
          v-for="item in navItems"
          :key="item.title"
          router
          :to="item.to"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "App",

  components: {},

  data: () => ({
    drawer: null,
    navItems: [
      { title: "Home", icon: "mdi-home", to: "/"},
      { title: "Console", icon: "mdi-console-line", to: "/telws/" },
    ]
  }),

  computed: {
    ...mapGetters(["getAppBarColor", "getTitle"])
  }
};
</script>