From 7a510fbf4b8f0acafcf14a02f78167996bee01ed Mon Sep 17 00:00:00 2001
From: Toufiq Amin <toufiqsuri2006@gmail.com>
Date: Mon, 15 Jun 2026 08:54:28 +0530
Subject: [PATCH] fix: close theme dropdown when clicking outside

---
 .../friends/header/TopnavDashboard.jsx          | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/friends/header/TopnavDashboard.jsx b/frontend/src/components/friends/header/TopnavDashboard.jsx
index e94f31f..eff0561 100644
--- a/frontend/src/components/friends/header/TopnavDashboard.jsx
+++ b/frontend/src/components/friends/header/TopnavDashboard.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState, useEffect, useRef } from 'react';
 import friends_icon from "../../../images/friends.svg";
 import {
   Inbox,
@@ -30,6 +30,19 @@ function TopnavDashboard({button_status, onToggleSidebar}) {
     const active = useSelector((state) => state.selected_option.value);
     const { setTheme } = useTheme();
     const [showThemes, setShowThemes] = useState(false);
+    const themesRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (showThemes && themesRef.current && !themesRef.current.contains(event.target)) {
+        setShowThemes(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showThemes]);
 
   function change_option_value(option_number,option_name,status,text){
     dispatch(close_direct_message())
@@ -174,7 +187,7 @@ function TopnavDashboard({button_status, onToggleSidebar}) {
 
       <div className="flex items-center gap-2">
 
-  <div className="relative">
+  <div ref={themesRef} className="relative">
     <button
       type="button"
       onClick={() => setShowThemes(!showThemes)}