From aa17005fc4e77dc290147ae5e7272ba6076b367d Mon Sep 17 00:00:00 2001
From: CP-Tiwari <aniket.mishra@pw.live>
Date: Sat, 7 Feb 2026 12:48:26 +0530
Subject: [PATCH] fix(common): close mobile nav drawer when tapping outside
 overlay

Add onClick handler on the navbar-collapse wrapper to close the mobile
navigation drawer when users tap on the dark overlay area outside the
drawer panel. Stop event propagation on header-links to prevent clicks
inside the drawer from closing it.

Add smooth slide and fade transition animation for the drawer panel
(translateX) and overlay (opacity) so the drawer does not just abruptly
appear/disappear. Replace display:none/block toggle with visibility and
pointer-events approach to enable CSS transitions.

Fixes #1659
---
 src/common/header/HeaderNav.jsx | 12 +++++-
 src/common/header/header.css    | 73 +++++++++++++++++++++------------
 2 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index a21947e073..3952f8af71 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -121,8 +121,16 @@ const HeaderNav = ({ showBrowse }) => {
       >
         <span className="navbar-toggler-icon" />
       </button>
-      <div className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}>
-        <ul className="header-links" data-testid="header-links-container">
+      <div
+        className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}
+        role="presentation"
+        onClick={() => setShowToggleMenu(false)}
+      >
+        <ul
+          className="header-links"
+          data-testid="header-links-container"
+          onClick={(e) => e.stopPropagation()}
+        >
           <li className="menu-closer">
             <button
               className="navbar-closer"
diff --git a/src/common/header/header.css b/src/common/header/header.css
index 8324afb537..c9ae6cbe27 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -101,6 +101,51 @@
   display: none;
 }
 
+@media screen and (max-width: 1217px) {
+  .navbar-collapse {
+    display: block !important;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navbar-collapse:before {
+    content: '';
+    background-color: var(--color-neutral-90);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    opacity: 0;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+  }
+
+  .navbar-collapse .header-links {
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+  }
+
+  .navbar-collapse.show {
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .navbar-collapse.show:before {
+    opacity: 60%;
+  }
+
+  .navbar-collapse.show .header-links {
+    transform: translateX(0);
+  }
+}
+
 @media (min-width: 1217px) {
   .navbar-toggler {
     display: none;
@@ -176,28 +221,7 @@
 }
 
 @media screen and (max-width: 1217px) {
-  .navbar-collapse.show {
-    display: block;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .navbar-collapse.show:before {
-    content: '';
-    background-color: var(--color-neutral-90);
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-    opacity: 60%;
-  }
-
-  .navbar-collapse.show .header-links {
+  .navbar-collapse .header-links {
     position: absolute;
     top: 0;
     right: 0;
@@ -214,16 +238,13 @@
 
   .navbar-collapse.show .header-links {
     align-items: stretch;
+    grid-gap: 0.2rem;
   }
 
   .navbar-collapse .menu-closer {
     display: block;
   }
 
-  .navbar-collapse.show .header-links {
-    grid-gap: 0.2rem;
-  }
-
   .header-links > li.menu-spacer {
     margin: 0.4rem 0 1rem 0;
   }