Make the purchasing button in nav bar when you click it it expendes and you choose to enter suppliers or purchases orders

dashboard.html

@@ -32,7 +32,10 @@
             background: rgba(59, 130, 246, 0.2);
             border-left: 3px solid #3b82f6;
         }
-        .kpi-card {
+        .rotate-180 {
+            transform: rotate(180deg);
+        }
+.kpi-card {
             transition: all 0.3s ease;
         }
         .kpi-card:hover {
@@ -71,11 +74,26 @@
                     <i data-feather="home" class="w-4 h-4 inline mr-2"></i>
                     Dashboard
                 </a>
-                <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg">
-                    <i data-feather="shopping-cart" class="w-4 h-4 inline mr-2"></i>
-                    Purchasing
-                </a>
-                <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg">
+                <div class="relative">
+                    <button class="nav-link w-full text-left px-3 py-2 text-sm rounded-lg flex items-center justify-between">
+                        <span class="flex items-center">
+                            <i data-feather="shopping-cart" class="w-4 h-4 inline mr-2"></i>
+                            Purchasing
+                        </span>
+                        <i data-feather="chevron-down" class="w-4 h-4 transition-transform duration-200"></i>
+                    </button>
+                    <div class="mt-1 ml-6 hidden submenu">
+                        <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg">
+                            <i data-feather="users" class="w-4 h-4 inline mr-2"></i>
+                            Suppliers
+                        </a>
+                        <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg">
+                            <i data-feather="file-text" class="w-4 h-4 inline mr-2"></i>
+                            Purchase Orders
+                        </a>
+                    </div>
+                </div>
+<a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg">
                     <i data-feather="truck" class="w-4 h-4 inline mr-2"></i>
                     Logistics
                 </a>
@@ -292,6 +310,16 @@
         sidebarToggle.addEventListener('click', () => {
             sidebar.classList.toggle('-translate-x-64');
         });
+        // Toggle purchasing submenu
+        const purchasingMenu = document.querySelector('.nav-link button');
+        const submenu = document.querySelector('.submenu');
+        
+        purchasingMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const icon = purchasingMenu.querySelector('i:last-child');
+            submenu.classList.toggle('hidden');
+            icon.classList.toggle('rotate-180');
+        });
 
         // Close sidebar when clicking outside on mobile
         document.addEventListener('click', (e) => {
@@ -300,7 +328,13 @@
                 !sidebarToggle.contains(e.target)) {
                 sidebar.classList.add('-translate-x-64');
             }
+            
+            // Close submenu if clicking outside
+            if (!purchasingMenu.contains(e.target) && !submenu.contains(e.target)) {
+                submenu.classList.add('hidden');
+                purchasingMenu.querySelector('i:last-child').classList.remove('rotate-180');
+            }
         });
-    </script>
+</script>
 </body>
 </html>