feat: keep parent active when child is active

Shurtu-gal · Nov 9, 2023 · 13cf0f8 · 13cf0f8
1 parent c63ffa7
commit 13cf0f8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/components/CaseTOC.js b/components/CaseTOC.js
@@ -4,6 +4,10 @@ import { twMerge } from "tailwind-merge";
 import ArrowRight from "./icons/ArrowRight";
 import { useHeadingsObserver } from "./helpers/useHeadingsObserver";
 
+const checkIfActive = (item, currSelected) => {
+  return item.slug === currSelected || item.children?.some((child) => checkIfActive(child, currSelected));
+}
+
 const convertContentToTocItems = (content, level = 1) => {
   const tocItems = [];
 
@@ -34,13 +38,14 @@ function TOCItem({ item, index, currSelected, closeMenu }) {
     closeMenu();
     setOpen(false);
   };
+  const active = useMemo(() => checkIfActive(item, currSelected), [item, currSelected]);
 
   return (
     <>
       <nav className="relative block max-w-max">
         <a
           className={`mb-1 transition duration-100 ease-in-out text-gray-900 font-normal text-sm font-sans antialiased hover:underline flex items-center ${
-            currSelected === item.slug && "text-primary-500 font-bold"
+             active && "text-primary-500 font-bold"
           }`}
           href={`#${item.slug}`}
           key={index}

diff --git a/pages/casestudies/[id].js b/pages/casestudies/[id].js
@@ -143,7 +143,7 @@ function Index({
       wide
     >
     <div className="max-w-screen lg:flex-row-reverse lg:flex lg:justify-between">
-      <CaseTOC toc={content} cssBreakingPoint="lg" className="lg:flex-1 bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-[260px] lg:max-w-72 lg:-mr-14" />
+      <CaseTOC toc={content} cssBreakingPoint="lg" className="lg:flex-1 bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-[265px] lg:max-w-72 lg:-mr-14" />
       <div className="px-4 sm:px-6 xl:px-0 lg:flex-1 lg:max-w-[812px] xl:max-w-5xl case-study">
         <div className="mt-10 md:mt-20 flex flex-col md:flex-row justify-between items-center">
           <div className="w-full md:w-[65%]">