From 58c2e1b6b2247b555a9cefe090f0327b5fd80b9e Mon Sep 17 00:00:00 2001
From: Adamalfantino <158027358+Adamalfantino@users.noreply.github.com>
Date: Sat, 23 May 2026 00:22:39 +0700
Subject: [PATCH] fix: menu hamburger

---
 resources/views/home.blade.php | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 10a691f..3459c72 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -39,7 +39,7 @@
   </div>
 
   <!-- Hamburger button -->
-  <button id="hamburger-btn" onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg hover:bg-white/20 transition-colors focus:outline-none" aria-label="Toggle menu">
+  <button id="hamburger-btn" onclick="toggleMobileMenu(event)" class="md:hidden p-2 rounded-lg hover:bg-white/20 transition-colors focus:outline-none" aria-label="Toggle menu">
     <i id="hamburger-icon" data-feather="menu" class="w-6 h-6 text-gray-800"></i>
   </button>
 </div>
@@ -351,7 +351,8 @@
 </script>
 
 <script>
-function toggleMobileMenu() {
+function toggleMobileMenu(e) {
+  e.stopPropagation(); // cegah event naik ke document listener
   const menu = document.getElementById('mobile-menu');
   const icon = document.getElementById('hamburger-icon');
   const isOpen = !menu.classList.contains('hidden');
@@ -367,17 +368,19 @@ function toggleMobileMenu() {
 }
 
 function closeMobileMenu() {
-  document.getElementById('mobile-menu').classList.add('hidden');
-  document.getElementById('hamburger-icon').setAttribute('data-feather', 'menu');
-  feather.replace();
+  const menu = document.getElementById('mobile-menu');
+  const icon = document.getElementById('hamburger-icon');
+  if (!menu.classList.contains('hidden')) {
+    menu.classList.add('hidden');
+    icon.setAttribute('data-feather', 'menu');
+    feather.replace();
+  }
 }
 
-// Tutup menu saat klik di luar navbar
+// Tutup menu saat klik/tap di luar navbar
 document.addEventListener('click', function (e) {
   const nav = document.querySelector('nav');
-  if (!nav.contains(e.target)) {
-    closeMobileMenu();
-  }
+  if (!nav.contains(e.target)) closeMobileMenu();
 });
 </script>