add styling and logic for active state in scrolling

Author: javiert-okta

src/features/introduction/components/sidebar-nav/sidebar-nav.component.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service";
 import styles from "./sidebar-nav.module.scss";
-import { useRouter } from "next/navigation";
+import clsx from "clsx";
 
 interface SidebarNavComponentProps {
   languageCode: string;
@@ -21,7 +21,33 @@ export const SidebarNavComponent: React.FC<SidebarNavComponentProps> = ({
   languageCode,
 }) => {
   const introductionDictionary = getIntroductionDictionary(languageCode);
-  const router = useRouter();
+  const headings = introductionDictionary.content.headings;
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            setActiveId(id);
+            history.replaceState(null, "", `#${id}`);
+          }
+        });
+      },
+      {
+        threshold: 0,
+      }
+    );
+    const elements = headings
+      .map((heading) => document.getElementById(heading.id))
+      .filter(Boolean) as HTMLElement[];
+    elements.forEach((el) => observer.observe(el));
+    return () => {
+      elements.forEach((el) => observer.unobserve(el));
+    };
+  }, [headings]);
+
   const handleClick = (id: string) => {
     scrollToElementWithOffset(id, -120);
     history.replaceState(null, "", `#${id}`);
@@ -33,7 +59,10 @@ export const SidebarNavComponent: React.FC<SidebarNavComponentProps> = ({
         {introductionDictionary.content.headings.map((heading, index) => (
           <li
             key={index}
-            className={styles.title}
+            className={clsx(
+              styles.title,
+              activeId === heading.id && styles.title__active
+            )}
             onClick={() => handleClick(heading.id)}
           >
             {heading.title}

src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss

@@ -1,13 +1,19 @@
+@use "@/libs/theme/styles/variables" as *;
+
 .container {
-   position: sticky;
-    color: white;
-    height: 100vh;
-    flex-shrink: 0;
-    top: 0;
-    padding: 100px 30px 0px;
-    border-right: 1px solid white;
-    max-width: 250px;
-    overflow-y: auto
+    display:none;
+    @media #{$breakpoint-dimension-sm} {
+        display: inline-block;
+        height: 100vh;
+        position: sticky;
+        color: var(--color_fg_link);
+        flex-shrink: 0;
+        top: 0;
+        padding: 100px 30px 0px;
+        border-right: 1px solid var(--color_fg_link);
+        max-width: 250px;
+        overflow-y: auto;
+    }
 }
 
 .title {
@@ -16,14 +22,11 @@
  cursor: pointer; 
 }
 
-.list {
-    list-style-type: none;
+.title__active {
+   color: var(--color_fg_selected);
+   border-bottom: 1px solid var(--color_border_selected);
 }
 
-@media (max-width: 768px) {
-    .container {
-        width: 100%;
-        height: auto;
-        position: relative;
-    }
+.list {
+    list-style-type: none;
 }