Merge pull request #6643 from ARYANSHAH1567/aryanshah/fix_cheveron

Fixed the positioning and click area of cheveron

Author: leecalcote

src/components/SistentNavigation/index.js

@@ -3,6 +3,7 @@ import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevron
 import { Link } from "gatsby";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
+import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
 import { componentsData } from "../../sections/Projects/Sistent/components/content";
 
 import TOCWrapper from "./toc.style";
@@ -35,14 +36,14 @@ const TOC = () => {
         </Link>
         <div className="toc-toggle-btn">
           {expand ? (
-            <IoMdClose
+            <IoIosArrowDown
               className="toc-menu-icon"
               onClick={function () {
                 setExpand(!expand);
               }}
             />
           ) : (
-            <IoIosArrowDropdownCircle
+            <IoIosArrowForward
               className="toc-menu-icon"
               onClick={function () {
                 setExpand(!expand);
@@ -69,7 +70,10 @@ const TOC = () => {
                 onClick={() => setExpandIdentity((prev) => !prev)}
               >
                 Identity
-                {expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
+                {expandIdenity ?
+                  <IoIosArrowDown style={{ zIndex: 2 }} /> :
+                  <IoIosArrowForward style={{ zIndex: 2 }} />
+                }
               </li>
               {expandIdenity && (
                 <div className="identity-sublinks">
@@ -129,7 +133,10 @@ const TOC = () => {
                 onClick={() => setExpandComponent((prev) => !prev)}
               >
                 Components
-                {expandComponent ? <IoIosArrowUp /> : <IoIosArrowDown />}
+                {expandComponent ?
+                  <IoIosArrowDown style={{ zIndex: 2 }} /> :
+                  <IoIosArrowForward style={{ zIndex: 2 }} />
+                }
               </li>
               {expandComponent && (
                 <div className="components-sublinks">

src/components/SistentNavigation/toc.style.js

@@ -104,6 +104,7 @@ const TOCWrapper = styled.div`
     width: auto;
     .toc-toggle-btn {
       display: inline-block;
+      z-index: 2;
     }
     .go-back {
       margin-left: 0;