[Fix] Nav dropdown

resources/js/components/NavDesktop.vue

@@ -4,7 +4,7 @@ import { inject } from "vue";
 const {
   logo,
   items,
-  isOpen,
+  openDropdownIndex,
   toggleDropdown,
   logout
 } = inject('navigationData');
@@ -37,11 +37,13 @@ const {
               </button>
 
               <div v-if="openDropdownIndex === index"
-                class="absolute left-0 mt-2 w-full bg-white border rounded-md shadow-lg z-50">
+                class="absolute mt-2 w-full mx-4 bg-white border rounded-md shadow-lg z-50">
                 <ul>
                   <li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
                     class="hover:bg-A transition-colors duration-200">
-                    <router-link :to="sub.route" class="block w-full h-full px-4 py-2 text-D">
+                    <router-link :to="sub.route" 
+                      @click="openDropdownIndex = null"
+                      class="block w-full h-full px-4 py-2 text-D">
                       {{ sub.label }}
                     </router-link>
                   </li>
@@ -65,4 +67,4 @@ const {
       </div>
     </div>
   </div>
-</template>
+</template>

resources/js/components/NavMobile.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { inject } from "vue";
 
+// Mengambil data dan fungsi yang disediakan dari komponen induk
 const {
   logo,
   items,
-  isOpen,
   isMobileMenuOpen,
+  openDropdownIndex,
   toggleDropdown,
   toggleMobileMenu,
   closeMobileMenu,
@@ -15,11 +16,8 @@ const {
 
 <template>
   <div class="md:hidden">
-    <!-- Top Spacer -->
+    <div class="bg-D h-5 shadow-lg"></div>
-    <div class="h-6"></div>
+    <div class="px-4 fixed flex items-center mt-2">
-
-    <div class="px-4 fixed flex items-center">
-      <!-- Hamburger Menu Button -->
       <button @click="toggleMobileMenu"
         class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
         <svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
@@ -33,62 +31,64 @@ const {
       </button>
     </div>
 
-    <!-- Mobile Menu -->
     <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
       class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
-      <!-- Mobile Menu Header -->
+      <div class="px-4 py-3 flex justify-between items-center border-b border-B">
-      <div class="px-4 py-3 flex justify-between items-center">
         <img :src="logo" alt="Logo" class="h-8 w-auto" />
-        <button @click="closeMobileMenu" class="text-D hover:bg-B transition-colors duration-200">
+        <button @click="closeMobileMenu" class="text-D hover:text-red-500 transition-colors duration-200">
           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       </div>
 
-      <!-- Mobile Menu Items -->
+      <nav class="py-4">
-      <div class="py-4">
+        <template v-for="(item, index) in items" :key="index">
-        <!-- Kasir with Dropdown -->
+          <div v-if="item.subItems" class="px-4 py-2">
-        <div class="px-4 py-2">
+            <button @click="toggleDropdown(index)"
-          <button @click="toggleDropdown"
+              class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
-            class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
+              <span>{{ item.label }}</span>
-            {{ items[0].label }}
+              <svg :class="{ 'rotate-180': openDropdownIndex === index }" class="w-4 h-4 transition-transform duration-200"
-            <svg :class="{ 'rotate-180': isOpen }" class="w-4 h-4 transition-transform duration-200" fill="none"
+                fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
-            </svg>
+            </button>
-          </button>
+            
+            <transition
+              enter-active-class="transition-all ease-in-out duration-300"
+              enter-from-class="transform opacity-0 max-h-0"
+              enter-to-class="transform opacity-100 max-h-96"
+              leave-active-class="transition-all ease-in-out duration-200"
+              leave-from-class="transform opacity-100 max-h-96"
+              leave-to-class="transform opacity-0 max-h-0"
+            >
+              <div v-if="openDropdownIndex === index" class="mt-2 ml-4 space-y-1 overflow-hidden">
+                <router-link v-for="(sub, subIndex) in item.subItems" :key="subIndex" :to="sub.route"
+                  @click="closeMobileMenu"
+                  class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
+                  {{ sub.label }}
+                </router-link>
+              </div>
+            </transition>
+            </div>
 
-          <!-- Mobile Dropdown -->
+          <div v-else class="px-4">
-          <div v-if="isOpen" class="mt-2 ml-4 space-y-1">
-            <router-link v-for="(sub, index) in items[0].subItems" :key="index" :to="sub.route" @click="closeMobileMenu"
-              class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
-              {{ sub.label }}
-            </router-link>
-          </div>
-        </div>
-
-        <!-- Other Menu Items -->
-        <div class="px-4 space-y-1">
-          <template v-for="(item, index) in items.slice(1)" :key="index">
             <router-link :to="item.route" @click="closeMobileMenu"
               class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
               {{ item.label }}
             </router-link>
-          </template>
+          </div>
-        </div>
+        </template>
+      </nav>
 
-        <!-- Logout -->
+      <div class="absolute bottom-0 w-full px-4 py-3 bg-A border-t border-B">
-        <div class="fixed bottom-0 w-full px-4 py-3 bg-A border-t border-B">
+        <button @click="logout"
-          <button @click="logout"
+          class="block w-full text-left px-3 py-2 text-lg font-bold text-red-400 hover:text-white hover:bg-red-400 rounded-md transition-colors duration-200">
-            class="block w-full text-left px-3 py-2 text-lg font-bold text-red-400 hover:text-white hover:bg-red-400 rounded-md transition-colors duration-200">
+          Logout
-            Logout
+        </button>
-          </button>
-        </div>
       </div>
     </div>
 
-    <!-- Mobile Menu Overlay -->
     <div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
   </div>
 </template>

resources/js/components/NavigationComponent.vue

@@ -4,11 +4,10 @@ import NavDesktop from "./NavDesktop.vue";
 import NavMobile from "./NavMobile.vue";
 import logo from "../../images/logo.png";
 
-// Shared state
 const isOpen = ref(false);
 const isMobileMenuOpen = ref(false);
+const openDropdownIndex = ref(null);
 
-// Menu items configuration
 const items = [
   { label: "Manajemen Produk", subItems: [
     { label: "Brankas", route: "/brankas" },
@@ -22,19 +21,24 @@ const items = [
   { label: "Akun", route: "/akun" },
 ];
 
-// Shared methods
+const toggleDropdown = (index = null) => {
-const toggleDropdown = () => {
+  if (index !== null) {
-  isOpen.value = !isOpen.value;
+    openDropdownIndex.value = openDropdownIndex.value === index ? null : index;
+  } else {
+    isOpen.value = !isOpen.value;
+  }
 };
 
 const toggleMobileMenu = () => {
   isMobileMenuOpen.value = !isMobileMenuOpen.value;
   isOpen.value = false;
+  openDropdownIndex.value = null;
 };
 
 const closeMobileMenu = () => {
   isMobileMenuOpen.value = false;
   isOpen.value = false;
+  openDropdownIndex.value = null;
 };
 
 const logout = () => {
@@ -48,6 +52,7 @@ provide('navigationData', {
   items,
   isOpen,
   isMobileMenuOpen,
+  openDropdownIndex,
   toggleDropdown,
   toggleMobileMenu,
   closeMobileMenu,
@@ -65,9 +70,9 @@ provide('navigationData', {
     
     <!-- Click Outside Handler for Desktop Dropdown -->
     <div 
-      v-if="isOpen && !isMobileMenuOpen"
+      v-if="openDropdownIndex !== null && !isMobileMenuOpen"
-      @click="isOpen = false"
+      @click="openDropdownIndex = null"
       class="fixed inset-0 z-10"
     ></div>
   </div>
-</template>
+</template>

resources/views/app.blade.php

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable-no" />
         <title>Abbauf App</title>
     </head>
     <body>