feat: persist sidebar state in local storage

Author: Nakshatra Sharma

pages/tools/components/Sidebar.tsx

@@ -129,6 +129,7 @@ export default function Sidebar({
               label={label}
               icon={<IconComponent />}
               count={checkedValues.length}
+              id={accessorKey}
             >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)

pages/tools/components/ui/DropdownMenu.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable linebreak-style */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable linebreak-style */
-import { useRouter } from 'next/router';
 import React, {
   type ReactElement,
   type ReactNode,
   useEffect,
   useState,
+  useRef,
 } from 'react';
 import {
   Collapsible,
@@ -20,21 +20,35 @@ interface DropdownMenuProps {
   icon: ReactElement;
   count?: number;
   testMode?: boolean;
+  id?: string;
 }
 
 export default function DropdownMenu({
   children,
   label,
   icon,
   count = 0,
+  id,
 }: DropdownMenuProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const router = useRouter();
-
+  const isFirstRun = useRef(true);
   useEffect(() => {
-    setIsDropdownOpen(false);
-  }, [router]);
-
+    if (id) {
+      const storedState = localStorage.getItem(`sidebar_open_${id}`);
+      if (storedState) {
+        setIsDropdownOpen(storedState === 'true');
+      }
+    }
+  }, [id]);
+  useEffect(() => {
+    if (id) {
+      if (isFirstRun.current) {
+        isFirstRun.current = false;
+        return;
+      }
+      localStorage.setItem(`sidebar_open_${id}`, String(isDropdownOpen));
+    }
+  }, [id, isDropdownOpen]);
   return (
     <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer transition-all duration-200 group'>
       <Collapsible open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>