123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <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>
|