update navigation all

globalcomponent/one-navbar.vue

@@ -1,45 +1,135 @@
 <template>
   <div>
-    <one-menu></one-menu>
+    <v-app-bar>
+      <!-- Slot prepend -->
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      </template>
 
-    <v-app-bar class="elevation-0">
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-app-bar-title>WESTONE</v-app-bar-title>
 
-      <v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
+      <!-- Slot append -->
+      <template v-slot:append>
+        <v-menu v-model="menu" location="top start" origin="top start" transition="scale-transition">
+          <template v-slot:activator="{ props }">
+            <v-chip v-bind="props" class="ma-2" variant="text">
+              <v-icon icon="mdi-account-circle-outline" start></v-icon>
+              John Leider
+            </v-chip>
+          </template>
+
+          <v-card width="300">
+            <v-list bg-color="black">
+              <v-list-item>
+                <template v-slot:prepend>
+                  <v-avatar image="https://cdn.vuetifyjs.com/images/john.png"></v-avatar>
+                </template>
+
+                <v-list-item-title>John Leider</v-list-item-title>
+
+                <v-list-item-subtitle>john@google.com</v-list-item-subtitle>
+
+                <template v-slot:append>
+                  <v-list-item-action>
+                    <v-btn variant="text" icon @click="menu = false">
+                      <v-icon>mdi-close-circle</v-icon>
+                    </v-btn>
+                  </v-list-item-action>
+                </template>
+              </v-list-item>
+            </v-list>
+
+            <v-list>
+              <v-list-item prepend-icon="mdi-briefcase" link>
+                <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+
+       
+        <v-divider class="mx-2 " vertical></v-divider>
+        <v-menu :close-on-content-click="false" location="center">
+          <template v-slot:activator="{ props }">
+            <v-btn variant="tonal"  append-icon="mdi-open-in-new" class="text-none text-subtitle-1 ma-2" color="primary" flat small v-bind="props">
+              Quick Menu
+            </v-btn>
+          </template>
+          <v-card min-width="200" class="mx-auto">
+            <v-list density="compact" nav>
+              <v-list-subheader
+                class="font-bold text-high-emphasis text-uppercase font-weight-black">REPORTS</v-list-subheader>
+
+              <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary">
+                <template v-slot:prepend>
+                  <v-icon :icon="item.icon"></v-icon>
+                </template>
+
+                <v-list-item-title v-text="item.text"></v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+
+        </v-menu>
+      </template>
     </v-app-bar>
+
+
+    <!-- Bind v-model ke drawer dari Vuex -->
+    <v-navigation-drawer temporary v-model="drawer">
+      <v-list :lines="false" density="compact" nav>
+        <v-list-group active-color="primary" value="Admin">
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" title="Admin" prepend-icon="mdi-account-multiple-outline"></v-list-item>
+          </template>
+
+          <v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
+        </v-list-group>
+      </v-list>
+
+    </v-navigation-drawer>
+
   </div>
 </template>
+<script setup>
+import { ref } from 'vue'
 
+const menu = ref(false)
+const items = [
+  { text: 'Real-Time', icon: 'mdi-clock' },
+  { text: 'Audience', icon: 'mdi-account' },
+  { text: 'Conversions', icon: 'mdi-flag' },
+]
+</script>
 <script type="module">
 import MenuComponent from "./one-menu.vue";
+import QuickMenu from "./quick-menu.vue";
 
 export default {
   name: "NavbarComponent",
   components: {
     "one-menu": MenuComponent,
-  },
-  mounted() {
-    // console.log(this.$store.state.system.drawer);
+    "quick-menu": QuickMenu,
   },
   data() {
-    return {};
+    return {
+      drawer: false,
+      isUsersOpen: true,
+      admins: [
+        ['Management', 'mdi-account-multiple-outline'],
+        ['Settings', 'mdi-cog-outline'],
+      ],
+
+    };
   },
   computed: {
-    // Akses state dari store
+    // Akses state dari Vuex
     bread_crumb() {
-      return this.$store.state.system.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;
     },
@@ -49,6 +139,10 @@ export default {
     increment() {
       this.$store.dispatch("increment");
     },
+    toggleDrawer() {
+      this.drawer = !this.drawer;
+      console.log(this.drawer)
+    },
   },
 };
 </script>