From 387038cb2a1d6098e8d0933f33e2988a705f214c Mon Sep 17 00:00:00 2001
From: Sas Andy <alfiantoandy6@gmail.com>
Date: Wed, 14 Aug 2024 08:21:56 +0700
Subject: [PATCH] global component menu dan navbar

---
 globalcomponent/one-menu.vue   | 54 +++++++++++++++++++++++++++++++
 globalcomponent/one-navbar.vue | 58 ++++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 globalcomponent/one-menu.vue
 create mode 100644 globalcomponent/one-navbar.vue

diff --git a/globalcomponent/one-menu.vue b/globalcomponent/one-menu.vue
new file mode 100644
index 0000000..2b8ce03
--- /dev/null
+++ b/globalcomponent/one-menu.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <!-- :location="$vuetify.display.mobile ? 'bottom' : undefined" -->
+    <v-navigation-drawer style="border: 0;" v-model="drawer">
+      <v-list-item class="ml-2 mt-3">
+        <v-img
+          :aspect-ratio="1"
+          max-height="42px"
+          max-width="132px"
+          class="bg-white"
+          src="images/logo.png"
+        ></v-img>
+      </v-list-item>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "MenuComponent",
+    data() {
+      return {};
+    },
+    computed: {
+      // Akses state dari store
+      drawer: {
+        get() {
+          return this.$store.state.system.drawer;
+        },
+        set(val) {
+          this.$store.commit("system/setDrawer", val);
+        },
+      },
+      count() {
+        return this.$store.state.coba2.count;
+      },
+      email() {
+        return this.$store.state.coba2.email;
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  h1 {
+    color: blue;
+  }
+</style>
diff --git a/globalcomponent/one-navbar.vue b/globalcomponent/one-navbar.vue
new file mode 100644
index 0000000..1a2713f
--- /dev/null
+++ b/globalcomponent/one-navbar.vue
@@ -0,0 +1,58 @@
+<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>Application</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("drawer");
+      console.log(this.$store.state.system.drawer);
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.coba2.count;
+      },
+      drawer: {
+        get() {
+          return this.$store.state.system.drawer;
+        },
+        set(val) {
+          this.$store.commit("system/setDrawer", 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>