feat: fixed only one dropdown is open at a time in the sidebar

Author: chauhan-varun

pages/tools/components/SearchBar.tsx

@@ -17,13 +17,13 @@ const SearchBar = ({ transform }: { transform: Transform }) => {
       <div className='relative'>
         <input
           type='text'
-          className='w-full px-4 py-2 border dark:border-slate-900 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300 bg-slate-800 text-white dark:bg-slate-900 hover:scale-[0.94] transition-all duration-200'
+          className='w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring bg-slate-800 text-white dark:border-slate-900 focus:border-blue-300 dark:bg-slate-900 transition-all duration-200'
           placeholder='Search'
           name='query'
           value={query}
           onChange={changeHandler}
           style={{
-            transition: 'all 0.2s ease-in-out !important',
+            transition: 'all 0.2s ease-in-out',
           }}
         />
       </div>

pages/tools/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useRef } from 'react';
+import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
 import LanguageIcon from '~/public/icons/language.svg';
 import ToolingIcon from '~/public/icons/tooling.svg';
 import EnvironmentIcon from '~/public/icons/environment.svg';
@@ -36,6 +36,7 @@ export default function Sidebar({
   setIsSidebarOpen,
 }: SidebarProps) {
   const filterFormRef = useRef<HTMLFormElement>(null);
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
 
   const filters = [
     { label: 'Language', accessorKey: 'languages' },
@@ -96,8 +97,11 @@ export default function Sidebar({
           return (
             <DropdownMenu
               key={accessorKey}
+              id={accessorKey}
               label={label}
               icon={<IconComponent />}
+              activeDropdown={activeDropdown}
+              setActiveDropdown={setActiveDropdown}
             >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)

pages/tools/components/ui/DropdownMenu.tsx

@@ -4,26 +4,39 @@ import React, {
   type ReactElement,
   type ReactNode,
   useEffect,
-  useState,
 } from 'react';
 
 interface DropdownMenuProps {
   children: ReactNode;
   label: string;
   icon: ReactElement;
+  id: string;
+  activeDropdown: string | null;
+  setActiveDropdown: (id: string | null) => void;
 }
 
 export default function DropdownMenu({
   children,
   label,
   icon,
+  id,
+  activeDropdown,
+  setActiveDropdown,
 }: DropdownMenuProps) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const isDropdownOpen = activeDropdown === id;
   const router = useRouter();
 
   useEffect(() => {
-    setIsDropdownOpen(false);
-  }, [router]);
+    setActiveDropdown(null);
+  }, [router, setActiveDropdown]);
+
+  const toggleDropdown = () => {
+    if (isDropdownOpen) {
+      setActiveDropdown(null);
+    } else {
+      setActiveDropdown(id);
+    }
+  };
 
   return (
     <div
@@ -34,9 +47,7 @@ export default function DropdownMenu({
     >
       <div
         className='w-full flex justify-between items-center align-middle cursor-pointer group'
-        onClick={() => {
-          setIsDropdownOpen((prev) => !prev);
-        }}
+        onClick={toggleDropdown}
       >
         {React.cloneElement(icon, {
           className: 'mr-2 ml-2 group-hover:scale-60 transition-all duration-200',