When I click the purchasing button nothing happens

dashboard.html

@@ -74,14 +74,14 @@
                     Dashboard
                 </a>
                 <div class="relative">
-                    <button class="nav-link w-full text-left px-3 py-2 text-sm rounded-lg flex items-center justify-between">
+                    <button class="nav-link w-full text-left px-3 py-2 text-sm rounded-lg flex items-center justify-between purchasing-menu-toggle">
                         <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>
+                        <i data-feather="chevron-down" class="w-4 h-4 transition-transform duration-200 purchasing-menu-icon"></i>
                     </button>
-                    <div class="mt-1 ml-6 hidden submenu">
+<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
@@ -310,30 +310,30 @@
             sidebar.classList.toggle('-translate-x-64');
         });
         // Toggle purchasing submenu
-        const purchasingMenu = document.querySelector('.nav-link button');
+        const purchasingMenuToggle = document.querySelector('.purchasing-menu-toggle');
+        const purchasingMenuIcon = document.querySelector('.purchasing-menu-icon');
         const submenu = document.querySelector('.submenu');
         
-        purchasingMenu.addEventListener('click', (e) => {
+        purchasingMenuToggle.addEventListener('click', (e) => {
             e.stopPropagation();
-            const icon = purchasingMenu.querySelector('i:last-child');
+            e.preventDefault();
             submenu.classList.toggle('hidden');
-            icon.classList.toggle('rotate-180');
+            purchasingMenuIcon.classList.toggle('rotate-180');
         });
 
-        // Close sidebar when clicking outside on mobile
-        document.addEventListener('click', (e) => {
+        // Close sidebar and submenu when clicking outside
+document.addEventListener('click', (e) => {
             if (window.innerWidth < 1024 && 
                 !sidebar.contains(e.target) && 
                 !sidebarToggle.contains(e.target)) {
                 sidebar.classList.add('-translate-x-64');
             }
-            
             // Close submenu if clicking outside
-            if (!purchasingMenu.contains(e.target) && !submenu.contains(e.target)) {
+            if (!purchasingMenuToggle.contains(e.target) && !submenu.contains(e.target)) {
                 submenu.classList.add('hidden');
-                purchasingMenu.querySelector('i:last-child').classList.remove('rotate-180');
+                purchasingMenuIcon.classList.remove('rotate-180');
             }
-        });
+});
 </script>
 </body>
 </html>