revert active styles logic

Author: pettinarip

src/components/TableOfContents/ItemsList.tsx

@@ -25,7 +25,9 @@ const ItemsList: React.FC<IPropsItemsList> = ({
     <>
       {items.map((item, index) => (
         <ListItem key={index} m={0} {...rest}>
-          {item.title && <Link item={item} activeHash={activeHash} />}
+          {item.title && (
+            <Link depth={depth} item={item} activeHash={activeHash} />
+          )}
           {item.items && (
             <List
               key={item.title}

src/components/TableOfContents/TableOfContentsLink.tsx

@@ -5,13 +5,29 @@ import CustomLink from "../Link"
 import { getCustomId, Item, trimmedTitle } from "./utils"
 
 export interface IPropsTableOfContentsLink {
+  depth: number
   item: Item
   activeHash?: string
 }
 
-const Link: React.FC<IPropsTableOfContentsLink> = ({ item }) => {
+const Link: React.FC<IPropsTableOfContentsLink> = ({
+  depth,
+  item,
+  activeHash,
+}) => {
   const url = `#${getCustomId(item.title)}`
 
+  const isActive = activeHash === url
+  const isNested = depth === 2
+
+  let classes = ""
+  if (isActive) {
+    classes += " active"
+  }
+  if (isNested) {
+    classes += " nested"
+  }
+
   const $dotBg = cssVar("dot-bg")
 
   const hoverOrActiveStyle: SystemStyleObject = {
@@ -34,6 +50,7 @@ const Link: React.FC<IPropsTableOfContentsLink> = ({ item }) => {
     <CustomLink
       as={GatsbyLink}
       to={url}
+      className={classes}
       textDecoration="none"
       display="inline-block"
       position="relative"