Updated Handbook TOC for improved mobile compatibility

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/sections/Community/Handbook/handbook-single/HandbookTOC.js

@@ -1,19 +1,40 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "gatsby";
 import TOCWrapper from "../../../../components/handbook-navigation/toc.style";
 import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
+import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
 
 const HandbookTOC = ({ pages, currentSlug }) => {
+  const [expand, setExpand] = useState(false);
+
   return (
     <TOCWrapper>
       <div className="go-back">
         <Link to="/community/handbook">
           <HiOutlineChevronLeft />
           <h4>Table of Contents</h4>
         </Link>
+        <div className="toc-toggle-btn">
+          {expand ? (
+            <IoMdClose
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          ) : (
+            <IoIosArrowDropdownCircle
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          )}
+        </div>
       </div>
       <div className="toc-list">
-        <ul className="toc-ul">
+        <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
           {pages.map((page, index) => (
             <li key={index}>
               <Link