feat: Made the categories collapsible (#207)

* feat: Made the categories collapsible

* Fixed the name of the  SideNavbarCategory component

* Fixed the gap between the categories

components/SideNavbar/SideNavbar.tsx

@@ -5,9 +5,9 @@ import { createRef, useContext, useEffect } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import { GlobalContext } from "context/GlobalContext";
 import Logo from "../logo";
-import { SideNavbarElement } from "./SideNavbarElement";
 import classNames from "classnames";
 import { useTheme } from "next-themes";
+import { SideNavbarCategoryList } from "./SideNavbarCategoryList";
 
 export const SideNavbar = () => {
   const { toggleNav, sidebar, openNav, closeNav } = useContext(GlobalContext);
@@ -80,24 +80,7 @@ export const SideNavbar = () => {
         <div className="sticky top-0 left-0 right-0 p-4 w-full z-10 bg-base-200 dark:bg-gray-900 transiton-all duration-300 ease-in">
           <Searchbar setSearch={setSearch} />
         </div>
-        <div className="flex flex-col justify-center px-4 gap-8 pb-24">
-          {searchResults.map((item, index) => {
-            return (
-              <div key={index}>
-                <h2 key={index} className="uppercase mb-3 font-bold text-xl">
-                  {item.category}
-                </h2>
-                {item.subcategory
-                  .sort((a, b) =>
-                    a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
-                  )
-                  .map((list, i) => {
-                    return <SideNavbarElement key={i} {...list} />;
-                  })}
-              </div>
-            );
-          })}
-        </div>
+        <SideNavbarCategoryList items={searchResults} openByDefault={'frontend'} />
       </div>
     </div>
   );

components/SideNavbar/SideNavbarCategory.tsx

@@ -0,0 +1,51 @@
+import { FC, useEffect, useState } from "react";
+import { FaAngleDown } from "react-icons/fa";
+import { SideNavbarElement } from "./SideNavbarElement";
+import type { ISidebar } from "../../types";
+
+export const SideNavbarCategory: FC<{item: ISidebar, openByDefault: string}> = (props) => {
+  const { item, openByDefault } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (openByDefault === item.category) {
+      setIsOpen(true);
+    }
+  }, [item.category, openByDefault]);
+
+  const handleToggle = () => {
+    setIsOpen((prevState) => !prevState);
+  }
+
+  let subcategoryList = null;
+
+  if (isOpen) {
+    subcategoryList = (
+      <ul>
+      {item.subcategory
+        .sort((a, b) =>
+          a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+        )
+        .map((list, i) => {
+          return <li key={i}><SideNavbarElement {...list} /></li>;
+        })}
+      </ul>
+    );
+  }
+
+  return (
+    <li>
+      <button 
+        className="flex w-full cursor-pointer justify-between py-2 hover:text-violet-500 focus-visible:rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-500" 
+        onClick={handleToggle}
+      >
+        <h2 className="text-xl font-bold uppercase">
+          {item.category}
+        </h2>
+        <FaAngleDown className={`${isOpen && 'rotate-180'} self-center transition duration-300 ease-in-out`}/>  
+      </button>
+      {subcategoryList}
+    </li>
+  );
+}

components/SideNavbar/SideNavbarCategoryList.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import type { ISidebar } from "../../types";
+import { SideNavbarCategory } from "./SideNavbarCategory";
+
+export const SideNavbarCategoryList: FC<{items: ISidebar[], openByDefault: string}> = (props) => {
+  const { items, openByDefault } = props;
+
+  return (
+    <ul className="mt-2 flex flex-col justify-center gap-4 px-4 pb-24">
+      {items.map((item, index) => {
+        return (
+          <SideNavbarCategory key={index} item={item} openByDefault={openByDefault} />
+        );
+      })}
+    </ul>
+  );
+};

components/SideNavbar/SideNavbarElement.tsx

@@ -18,7 +18,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
           : ""
       } collapse w-full hover:bg-gradient-to-l hover:text-gray-200 from-violet-900 to-violet-500 text-start rounded `}
     >
-      <div className="text-md hover:pl-5 duration-300 transition-all font-medium py-3 border-b dark:border-gray-600 uppercase">{name}</div>
+      <div className="text-md border-b py-3 font-medium uppercase transition-all duration-300 hover:pl-5 dark:border-gray-600">{name}</div>
     </Link>
   );
 };