<template>
  <div>
    <one-menu></one-menu>

    <v-app-bar class="elevation-0">
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
    </v-app-bar>
  </div>
</template>

<script type="module">
import MenuComponent from "./one-menu.vue";

export default {
  name: "NavbarComponent",
  components: {
    "one-menu": MenuComponent,
  },
  mounted() {
    // console.log(this.$store.state.system.drawer);
  },
  data() {
    return {};
  },
  computed: {
    // Akses state dari store
    bread_crumb() {
      return this.$store.state.system.bread_crumb
    },  
    count() {
      return this.$store.state.coba2.count;
    },
    drawer: {
      get() {
        return this.$store.state.system.drawer;
      },
      set(val) {
        this.$store.commit("system/update_drawer", val);
      },
    },
    email() {
      return this.$store.state.coba2.email;
    },
  },
  methods: {
    // Dispatch action ke store
    increment() {
      this.$store.dispatch("increment");
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
