fix: hydration html error

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>

Author: Fireentity

src/components/SistentNavigation/index.js

@@ -1,18 +1,18 @@
-import React, { useState } from "react";
-import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
-import { Link } from "gatsby";
-import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
-import { componentsData } from "../../sections/Projects/Sistent/components/content";
+import React, {useState} from "react";
+import {HiOutlineChevronLeft} from "@react-icons/all-files/hi/HiOutlineChevronLeft";
+import {Link} from "gatsby";
+import {IoIosArrowForward} from "@react-icons/all-files/io/IoIosArrowForward";
+import {componentsData} from "../../sections/Projects/Sistent/components/content";
 
 import TOCWrapper from "./toc.style";
-import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
+import {IoIosArrowDown} from "@react-icons/all-files/io/IoIosArrowDown";
 
-import { useLocation } from "@reach/router";
+import {useLocation} from "@reach/router";
 
 const TOC = () => {
   const [expand, setExpand] = useState(false);
   const location = useLocation();
-  const [expandIdenity, setExpandIdentity] = useState(
+  const [expandIdentity, setExpandIdentity] = useState(
     location.pathname.includes("/identity")
   );
   const [expandComponent, setExpandComponent] = useState(
@@ -28,7 +28,7 @@ const TOC = () => {
     <TOCWrapper>
       <div className="go-back">
         <Link to="/projects/sistent">
-          <HiOutlineChevronLeft />
+          <HiOutlineChevronLeft/>
           <h4>Table of Contents</h4>
         </Link>
         <div className="toc-toggle-btn">
@@ -62,18 +62,19 @@ const TOC = () => {
           </li>
           <li>
             <div>
-              <li
+              <div
+                type="button"
                 className="toc-sub-heading identity"
                 onClick={() => setExpandIdentity((prev) => !prev)}
               >
                 Identity
-                {expandIdenity ?
-                  <IoIosArrowDown style={{ zIndex: 2 }} /> :
-                  <IoIosArrowForward style={{ zIndex: 2 }} />
+                {expandIdentity ?
+                  <IoIosArrowDown style={{zIndex: 2}}/> :
+                  <IoIosArrowForward style={{zIndex: 2}}/>
                 }
-              </li>
-              {expandIdenity && (
-                <div className="identity-sublinks">
+              </div>
+              {expandIdentity && (
+                <ul className="identity-sublinks">
                   <li>
                     <Link
                       to="/projects/sistent/identity/color"
@@ -119,42 +120,40 @@ const TOC = () => {
                       Typography
                     </Link>
                   </li>
-                </div>
+                </ul>
               )}
             </div>
           </li>
           <li>
             <div>
-              <li
+              <div
                 className="toc-sub-heading components"
                 onClick={() => setExpandComponent((prev) => !prev)}
               >
                 Components
                 {expandComponent ?
-                  <IoIosArrowDown style={{ zIndex: 2 }} /> :
-                  <IoIosArrowForward style={{ zIndex: 2 }} />
+                  <IoIosArrowDown style={{zIndex: 2}}/> :
+                  <IoIosArrowForward style={{zIndex: 2}}/>
                 }
-              </li>
+              </div>
               {expandComponent && (
-                <div className="components-sublinks">
-                  <li>
-                    {sortedComponentArray.map((component) => (
-                      <li key={component.id}>
-                        <Link
-                          to={component.url}
-                          className={`toc-sub-heading toc-sub-inline components-item ${
-                            location.pathname.split("/")[4] === component.url.split("/")[4]
-                              ? "active"
-                              : ""
-                          }`}
-                          activeClassName="active"
-                        >
-                          {component.name}
-                        </Link>
-                      </li>
-                    ))}
-                  </li>
-                </div>
+                <ul className="components-sublinks">
+                  {sortedComponentArray.map((component) => (
+                    <li key={component.id}>
+                      <Link
+                        to={component.url}
+                        className={`toc-sub-heading toc-sub-inline components-item ${
+                          location.pathname.split("/")[4] === component.url.split("/")[4]
+                            ? "active"
+                            : ""
+                        }`}
+                        activeClassName="active"
+                      >
+                        {component.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
               )}
             </div>
           </li>

src/sections/Projects/Sistent/components/index.js

@@ -57,14 +57,14 @@ const SistentComponents = () => {
                       </div>
                       <div>
                         <div className="card_bottom">
-                          <a className="learn" href={comp.url}>
+                          <div className="learn" href={comp.url}>
                             <div className="learn-more">
                               <div>Learn more</div>
                               <div className="icon">
                                 <FaArrowRight />
                               </div>
                             </div>
-                          </a>
+                          </div>
                         </div>
                       </div>
                     </div>