From 1f8a01b699d55fa489bef228341660791fb0f5ac Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Tue, 28 Oct 2025 08:30:10 +0100
Subject: [PATCH] Fix dropdown menu behavior

---
 resources/js/csp-safe.js                      | 94 +++++++++++++++----
 .../views/partials/header-menu.blade.php      | 92 +-----------------
 2 files changed, 78 insertions(+), 108 deletions(-)

diff --git a/resources/js/csp-safe.js b/resources/js/csp-safe.js
index 887584831..2e47c9fee 100644
--- a/resources/js/csp-safe.js
+++ b/resources/js/csp-safe.js
@@ -1486,35 +1486,95 @@ function initSidebarToggle() {
 
 // Dropdown Menus for Header Navigation
 function initDropdownMenus() {
-    document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
+    const dropdownContainers = document.querySelectorAll('.dropdown-container');
+
+    dropdownContainers.forEach(function(container) {
+        const toggle = container.querySelector('.dropdown-toggle');
+        const menu = container.querySelector('.dropdown-menu');
+
+        if (!toggle || !menu) return;
+
+        let closeTimeout;
+
+        // Ensure menu is hidden initially
+        menu.style.display = 'none';
+
+        // Toggle on click
         toggle.addEventListener('click', function(e) {
             e.preventDefault();
-            const menu = this.nextElementSibling;
-            if (menu && menu.classList.contains('dropdown-menu')) {
-                // Close all other dropdowns
-                document.querySelectorAll('.dropdown-menu').forEach(function(m) {
-                    if (m !== menu) {
-                        m.classList.remove('show');
-                        m.style.display = 'none';
-                    }
-                });
+            e.stopPropagation();
 
-                // Toggle this dropdown
-                menu.classList.toggle('show');
-                menu.style.display = menu.classList.contains('show') ? 'block' : 'none';
+            const isCurrentlyOpen = menu.style.display === 'block';
+
+            // Close all other dropdowns
+            dropdownContainers.forEach(function(otherContainer) {
+                if (otherContainer !== container) {
+                    const otherMenu = otherContainer.querySelector('.dropdown-menu');
+                    if (otherMenu) {
+                        otherMenu.style.display = 'none';
+                    }
+                }
+            });
+
+            // Toggle this dropdown
+            if (isCurrentlyOpen) {
+                menu.style.display = 'none';
+            } else {
+                menu.style.display = 'block';
             }
         });
+
+        // Keep open on hover over the container
+        container.addEventListener('mouseenter', function() {
+            clearTimeout(closeTimeout);
+        });
+
+        // Close after delay when leaving the container
+        container.addEventListener('mouseleave', function() {
+            closeTimeout = setTimeout(function() {
+                menu.style.display = 'none';
+            }, 300);
+        });
+
+        // Prevent closing when hovering over the menu itself
+        menu.addEventListener('mouseenter', function() {
+            clearTimeout(closeTimeout);
+        });
     });
 
     // Close dropdowns when clicking outside
     document.addEventListener('click', function(e) {
-        if (!e.target.closest('.dropdown-toggle') && !e.target.closest('.dropdown-menu')) {
-            document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
-                menu.classList.remove('show');
-                menu.style.display = 'none';
+        if (!e.target.closest('.dropdown-container')) {
+            dropdownContainers.forEach(function(container) {
+                const menu = container.querySelector('.dropdown-menu');
+                if (menu) {
+                    menu.style.display = 'none';
+                }
             });
         }
     });
+
+    // Mobile menu toggle
+    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+    if (mobileMenuToggle) {
+        mobileMenuToggle.addEventListener('click', function() {
+            const desktopNav = document.querySelector('.md\\:flex.md\\:items-center');
+            if (desktopNav) {
+                desktopNav.classList.toggle('hidden');
+                desktopNav.classList.toggle('flex');
+            }
+        });
+    }
+
+    // Mobile search toggle
+    const mobileSearchToggle = document.getElementById('mobile-search-toggle');
+    const mobileSearchForm = document.getElementById('mobile-search-form');
+    if (mobileSearchToggle && mobileSearchForm) {
+        mobileSearchToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            mobileSearchForm.classList.toggle('hidden');
+        });
+    }
 }
 
 // Image Fallbacks
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index 9a1c1eeb1..fe364b69d 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -83,7 +83,7 @@
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
-                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md shadow-lg z-50" style="display: none;">
+                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md shadow-lg z-50">
                                     <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     <div class="border-t border-gray-700 dark:border-gray-600"></div>
                                     @foreach($parentcat['categories'] as $subcat)
@@ -223,94 +223,4 @@
     </div>
 </nav>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('Header menu script loaded');
-
-    // Dropdown functionality
-    const dropdownContainers = document.querySelectorAll('.dropdown-container');
-    console.log('Found dropdown containers:', dropdownContainers.length);
-
-    dropdownContainers.forEach((container, index) => {
-        const toggle = container.querySelector('.dropdown-toggle');
-        const menu = container.querySelector('.dropdown-menu');
-
-        console.log(`Container ${index}:`, { toggle: !!toggle, menu: !!menu });
-
-        if (!toggle || !menu) return;
-
-        let closeTimeout;
-
-        // Toggle on click
-        toggle.addEventListener('click', function(e) {
-            console.log('Dropdown clicked!');
-            e.preventDefault();
-            e.stopPropagation();
-
-            const isCurrentlyOpen = menu.style.display === 'block';
-            console.log('Currently open:', isCurrentlyOpen, 'Display:', menu.style.display);
-
-            // Close all other dropdowns
-            dropdownContainers.forEach(otherContainer => {
-                if (otherContainer !== container) {
-                    const otherMenu = otherContainer.querySelector('.dropdown-menu');
-                    if (otherMenu) {
-                        otherMenu.style.display = 'none';
-                    }
-                }
-            });
-
-            // Toggle this dropdown
-            if (isCurrentlyOpen) {
-                console.log('Closing dropdown');
-                menu.style.display = 'none';
-            } else {
-                console.log('Opening dropdown');
-                menu.style.display = 'block';
-            }
-        });
-
-        // Keep open on hover over the container
-        container.addEventListener('mouseenter', function() {
-            clearTimeout(closeTimeout);
-        });
-
-        // Close after delay when leaving the container
-        container.addEventListener('mouseleave', function() {
-            closeTimeout = setTimeout(() => {
-                menu.style.display = 'none';
-            }, 300);
-        });
-
-        // Prevent closing when hovering over the menu itself
-        menu.addEventListener('mouseenter', function() {
-            clearTimeout(closeTimeout);
-        });
-    });
-
-    // Close dropdowns when clicking outside
-    document.addEventListener('click', function(e) {
-        if (!e.target.closest('.dropdown-container')) {
-            dropdownContainers.forEach(container => {
-                const menu = container.querySelector('.dropdown-menu');
-                if (menu) {
-                    menu.style.display = 'none';
-                }
-            });
-        }
-    });
-
-    // Mobile menu toggle
-    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
-    if (mobileMenuToggle) {
-        mobileMenuToggle.addEventListener('click', function() {
-            const desktopNav = document.querySelector('.md\\:flex.md\\:items-center');
-            if (desktopNav) {
-                desktopNav.classList.toggle('hidden');
-                desktopNav.classList.toggle('flex');
-            }
-        });
-    }
-});
-</script>