fix(app): hide Inbox after clicking on Notification Item

Author: chasprowebdev

apps/app/src/components/notifications/notification-bell.tsx

@@ -5,13 +5,33 @@ import { env } from '@/env.mjs';
 import { Inbox } from '@novu/nextjs';
 import { useSession } from '@/utils/auth-client';
 import { Bell, Settings } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
 
 export function NotificationBell() {
   const applicationIdentifier = env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER;
   const { data: session } = useSession();
   const sessionData = session?.session;
   const pathname = usePathname();
   const orgId = pathname?.split('/')[1] || null;
+  const [visible, setVisible] = useState(false);
+  const inboxRef = useRef<HTMLDivElement>(null);
+  
+  // Handle click outside to close inbox
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (inboxRef.current && !inboxRef.current.contains(event.target as Node)) {
+        setVisible(false);
+      }
+    }
+
+    if (visible) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [visible]);
 
   // Don't render if we don't have the required config
   if (!applicationIdentifier || !sessionData?.userId || !orgId) {
@@ -20,7 +40,6 @@ export function NotificationBell() {
 
   const appearance = {
     icons: {
-      bell: () => <Bell size={20} />,
       cogs: () => <Settings size={20} />,
     },
     elements: {
@@ -40,18 +59,33 @@ export function NotificationBell() {
   };
 
   return (
-    <Inbox
-      applicationIdentifier={applicationIdentifier}
-      subscriber={`${sessionData.userId}-${orgId}`}
-      appearance={appearance}
-      renderSubject={(notification) => <strong>{notification.subject}</strong>}
-      renderBody={(notification) => (
-        <div className="mt-1">
-          <p className="text-xs text-muted-foreground">
-            {notification.body}
-          </p>
-        </div>
-      )}
-    />
+    <div ref={inboxRef}>
+      <Inbox
+        applicationIdentifier={applicationIdentifier}
+        subscriber={`${sessionData.userId}-${orgId}`}
+        appearance={appearance}
+        open={visible}
+        renderBell={({ total }) => (
+          <button
+            onClick={() => setVisible(!visible)}
+            className="relative cursor-pointer"
+          >
+            <Bell size={20} />
+            {total > -1 && (
+              <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" />
+            )}
+          </button>
+        )}
+        renderSubject={(notification) => <strong>{notification.subject}</strong>}
+        renderBody={(notification) => (
+          <div className="mt-1">
+            <p className="text-xs text-muted-foreground">
+              {notification.body}
+            </p>
+          </div>
+        )}
+        onNotificationClick={() => setVisible(false)}
+      />
+    </div>
   );
 }