fix: resolve mobile hamburger menu instant outside-click closure bug

Author: RishiGoswami-code

src/app/dashboard/layout.tsx

@@ -36,6 +36,8 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   const [userMenuOpen, setUserMenuOpen] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
+  const mobileBtnRef = useRef<HTMLButtonElement>(null);
 
   /* ── Auth guard ── */
   useEffect(() => {
@@ -58,7 +60,14 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
       if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
         setUserMenuOpen(false);
       }
-      setMobileMenuOpen(false);
+      if (
+        mobileMenuRef.current &&
+        !mobileMenuRef.current.contains(e.target as Node) &&
+        mobileBtnRef.current &&
+        !mobileBtnRef.current.contains(e.target as Node)
+      ) {
+        setMobileMenuOpen(false);
+      }
     };
     document.addEventListener("click", handler);
     return () => document.removeEventListener("click", handler);
@@ -343,6 +352,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
 
             {/* Mobile hamburger */}
             <button
+              ref={mobileBtnRef}
               className="dash-nav-mobile-btn"
               onClick={e => { e.stopPropagation(); setMobileMenuOpen(v => !v); }}
               style={{
@@ -371,6 +381,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
         {/* Mobile dropdown menu */}
         {mobileMenuOpen && (
           <div
+            ref={mobileMenuRef}
             className="dash-nav-mobile-menu"
             style={{
               borderTop: "1px solid var(--border-subtle)",