<template>
  <div>
    <v-navigation-drawer fixed app>
      <v-list dense rounded>
        <v-list-item v-for="item in items" :key="item.title" link>
          <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-app-bar fixed app>
      <v-toolbar-title v-text="title" />
      <v-spacer />
    </v-app-bar>
  </div>
</template>
<script>
export default {
  name: "NavBarComponent",
  data() {
    return {
      fixed: false,
      title: "Controller",
      items: [
        { title: "Home", icon: "mdi-view-dashboard" },
        { title: "My Tags", icon: "mdi-forum" },
        { title: "My Mapping", icon: "mdi-forum" },        
      ],
    };
  },
};
</script>
