Bug: #1281 fixed, [Dark/Light Mode Toggle Doesn't Close Automatically on Mobile]

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 '

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 = [