fix: Resolve issue with main accordion not working (#2567)

rupali-codes · Dec 11, 2024 · e4cb51d · e4cb51d
2 parents 249e64b + 711fcfc
commit e4cb51d
Showing 1 changed file with 18 additions and 19 deletions.
diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
@@ -1,6 +1,6 @@
-import { FC, useState, useEffect, MutableRefObject } from 'react';
-import { useRouter } from 'next/router';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { type FC, type MutableRefObject, useEffect, useMemo, useState } from 'react';
 
 import { SideNavbarElement } from './SideNavbarElement';
 
@@ -40,18 +40,20 @@ export const SideNavbarCategory: FC<{
   // const [hasUpdated, setHasUpdated] = useState(categoryData);
   const router = useRouter();
   const { category, subcategory } = categoryData;
-  const sortedSubcategoryList = subcategory
-    .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
-    .map((subcategoryData, i) => (
-      <li className="-ml-0.5" key={i}>
-        <SideNavbarElement category={category} subcat={subcategoryData} />
-      </li>
-    ));
+  const sortedSubcategoryList = useMemo(() => {
+    return subcategory
+      .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
+      .map((subcategoryData, i) => (
+        <li className="-ml-0.5" key={i}>
+          <SideNavbarElement category={category} subcat={subcategoryData} />
+        </li>
+      ));
+  }, [category, subcategory])
 
   useEffect(() => {
     setIsOpen(expand);
     // setHasUpdated(categoryData);
-  }, [expand, categoryData]);
+  }, [expand]);
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -78,23 +80,20 @@ export const SideNavbarCategory: FC<{
         href={`/${category}`}
       >
         <h1
-          className={`text-slate-500 dark:text-slate-300 text-lg font-sans font-medium w-4/5 truncate ${
-            category.length < 4 ? 'uppercase' : 'capitalize'
-          }`}
+          className={`text-slate-500 dark:text-slate-300 text-lg font-sans font-medium w-4/5 truncate ${category.length < 4 ? 'uppercase' : 'capitalize'
+            }`}
         >
           {/* { category === 'open-source' ? '<strong>New' : capitalizeCategory(category)} */}
           {capitalizeCategory(category)}
         </h1>
         <Icons.angleDown
-          className={`${
-            isOpen && 'rotate-180'
-          } h-5 w-5 text-slate-500 dark:text-slate-300 self-center transition duration-300 ease-in-out`}
+          className={`${isOpen && 'rotate-180'
+            } h-5 w-5 text-slate-500 dark:text-slate-300 self-center transition duration-300 ease-in-out`}
         />
       </Link>
       <div
-        className={`overflow-hidden transition-all duration-500 ease-in-out max-h-0 ${
-          isOpen ? 'max-h-screen' : ''
-        }`}
+        className={`overflow-hidden transition-all duration-500 ease-in-out max-h-0 ${isOpen ? 'max-h-screen' : ''
+          }`}
       >
         <ul className="">{sortedSubcategoryList}</ul>
       </div>