From e9663faa42318332937d6d163caacb63b58071b8 Mon Sep 17 00:00:00 2001
From: Rudra Sankha Sinhamahapatra <rssmp120@gmail.com>
Date: Sun, 19 Jan 2025 15:24:03 +0530
Subject: [PATCH 1/2] Bug: #1281 fixed, [Dark/Light Mode Toggle Doesn't Close
 Automatically on Mobile]

---
 components/DarkModeToggle.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
index cadf3b7ac..e3fcfb35b 100644
--- a/components/DarkModeToggle.tsx
+++ b/components/DarkModeToggle.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 import Image from 'next/image';
 
@@ -46,8 +46,30 @@ export default function DarkModeToggle() {
     }
   }, [theme, resolvedTheme]);
 
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setShowSelect(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className='relative w-10 h-10 dark-mode-toggle-container'>
+    <div
+      ref={dropdownRef}
+      className='relative w-10 h-10 dark-mode-toggle-container'
+    >
       <button
         onClick={() => setShowSelect(!showSelect)}
         className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '

From eaa2ef20b0e23728c7d747bb9e3a380ff30b95c2 Mon Sep 17 00:00:00 2001
From: Rudra Sankha Sinhamahapatra <rssmp120@gmail.com>
Date: Sun, 19 Jan 2025 15:57:14 +0530
Subject: [PATCH 2/2] cypress test added

---
 cypress/components/DarkModeToggle.cy.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/cypress/components/DarkModeToggle.cy.tsx b/cypress/components/DarkModeToggle.cy.tsx
index 839e9a06b..26d76f530 100644
--- a/cypress/components/DarkModeToggle.cy.tsx
+++ b/cypress/components/DarkModeToggle.cy.tsx
@@ -68,6 +68,21 @@ describe('DarkModeToggle Component', () => {
     });
   });
 
+  // Test closing the menu when clicking outside
+  it('should close the menu when clicking outside', () => {
+    // Click on the toggle button to open the menu
+    cy.get(TOGGLE_BUTTON).click();
+
+    // Check if the menu is open
+    cy.get(THEME_DROPDOWN).should('have.css', 'display', 'block');
+
+    // Simulate clicking outside the dropdown
+    cy.get('body').click(0, 0); // Click at the top-left corner of the body
+
+    // Check if the menu is closed
+    cy.get(THEME_DROPDOWN).should('have.css', 'display', 'none');
+  });
+
   // Test Theme Selection Functionality
   describe('Theme Selection', () => {
     const themes = [