From e80be7e0d907451576ff6a19527a64d03b2367a6 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@Saurabhs-MacBook-Air.local>
Date: Wed, 17 Jun 2026 11:38:27 +0530
Subject: [PATCH] fix: prevent duplicate notification panels on rapid bell
 clicks

- Add useRef debounce guard to prevent AnimatePresence panel stacking
- Use functional state update for reliable toggle behavior
---
 src/components/layout/Navbar.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index 4adaf18..68c6f75 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -22,6 +22,7 @@ export const Navbar = ({ toggleMobile, isMobileOpen }) => {
     return "Good evening";
   })();
   const notificationRef = useRef(null);
+  const notificationToggleRef = useRef(false);
   const navigate = useNavigate();
 
   const hasSearchQuery = searchQuery.trim().length > 0;
@@ -283,7 +284,12 @@ export const Navbar = ({ toggleMobile, isMobileOpen }) => {
           <motion.button
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
-            onClick={() => setShowNotifications(!showNotifications)}
+            onClick={() => {
+              if (notificationToggleRef.current) return;
+              notificationToggleRef.current = true;
+              setShowNotifications(prev => !prev);
+              setTimeout(() => { notificationToggleRef.current = false; }, 300);
+            }}
             className="p-2 rounded-xl border border-slate-200/50 dark:border-slate-800/50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md text-slate-700 dark:text-slate-300 w-10 h-10 flex items-center justify-center cursor-pointer hover:shadow-sm relative"
           >
             <Bell className="w-5 h-5" />