add sidebar navigation component for introduction page

Author: javiert-okta

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

@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service";
+import styles from "./sidebar-nav.module.scss";
+import { useRouter } from "next/navigation";
+
+interface SidebarNavComponentProps {
+  languageCode: string;
+}
+
+const scrollToElementWithOffset = (id: string, offset = 0) => {
+  const element = document.getElementById(id);
+  if (element) {
+    const y = element.getBoundingClientRect().top + window.pageYOffset + offset;
+    window.scrollTo({ top: y, behavior: "smooth" });
+  }
+};
+
+export const SidebarNavComponent: React.FC<SidebarNavComponentProps> = ({
+  languageCode,
+}) => {
+  const introductionDictionary = getIntroductionDictionary(languageCode);
+  const router = useRouter();
+  const handleClick = (id: string) => {
+    scrollToElementWithOffset(id, -120);
+    history.replaceState(null, "", `#${id}`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <ul className={styles.list}>
+        {introductionDictionary.content.headings.map((heading, index) => (
+          <li
+            key={index}
+            className={styles.title}
+            onClick={() => handleClick(heading.id)}
+          >
+            {heading.title}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+.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
+}
+
+.title {
+ margin-bottom: 36px; 
+ padding-right: 8px;
+ cursor: pointer; 
+}
+
+.list {
+    list-style-type: none;
+}
+
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+        height: auto;
+        position: relative;
+    }
+}