Merge pull request #3 from StevanFreeborn/feat/highlight-and-scroll-to-active-section-in-sidebar

Feat: Add Background to Current Section Title

src/app/components/SideBar.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   height: 100%;
   border-right: 1px solid #848586;
-  padding: 0 1rem;
+  padding: 0 1rem 0 0.5rem;
   overflow: auto;
   background-color: inherit;
   width: 300px;
@@ -64,19 +64,26 @@
   width: 100%;
 }
 
+.linkGroup {
+  padding: 0 0.5rem;
+}
+
 .link,
 .activeLink {
+  padding: 0 1rem 0 0.5rem;
   text-decoration: none;
 }
 
+.activeLink {
+  background-color: #8485866b;
+  border-top-right-radius: 999px;
+  border-bottom-right-radius: 999px;
+}
+
 .link:hover {
   color: #64adac;
 }
 
-.activeLink {
-  background-color: #1e1e1e;
-}
-
 .expandable {
   width: 100%;
   display: flex;

src/app/components/SideBar.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
+import { useSectionContext } from '../context/section';
 import { useThemeContext } from '../context/theme';
 import { Doc, DocsStructure } from '../types/types';
 import { toKebabCase } from '../utils/stringUtils';
@@ -11,6 +12,16 @@ function TreeNode({ doc }: { doc: Doc }) {
   const [isExpanded, setIsExpanded] =
     useState<boolean>(true);
 
+  const { section, setSection } = useSectionContext();
+
+  const docTitleId = toKebabCase(doc.title);
+
+  const isActiveSection = docTitleId === section;
+
+  const linkStyle = isActiveSection
+    ? styles.activeLink
+    : styles.link;
+
   const hasChildren =
     doc.children && doc.children?.length > 0;
 
@@ -20,13 +31,16 @@ function TreeNode({ doc }: { doc: Doc }) {
         <div className={styles.expandable}>
           {doc.copy ? (
             <a
-              href={`#${toKebabCase(doc.title)}`}
-              className={styles.link}
+              onClick={() => setSection(docTitleId)}
+              href={`#${docTitleId}`}
+              className={linkStyle}
             >
               {doc.title}
             </a>
           ) : (
-            <div>{doc.title}</div>
+            <div className={styles.linkGroup}>
+              {doc.title}
+            </div>
           )}
           <div
             className={styles.chevronContainer}
@@ -65,8 +79,9 @@ function TreeNode({ doc }: { doc: Doc }) {
         </div>
       ) : doc.copy ? (
         <a
-          href={`#${toKebabCase(doc.title)}`}
-          className={styles.link}
+          onClick={() => setSection(docTitleId)}
+          href={`#${docTitleId}`}
+          className={linkStyle}
         >
           {doc.title}
         </a>