Merge pull request #519 from MaverickP24/feat/enhanceddocs

Fixed scroll to top issue for better docs readability

Author: KatalKavya96

src/pages/DocsHub.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect, useMemo } from "react";
 import {
-  Link,
   Routes,
   Route,
   useLocation,
@@ -27,58 +26,22 @@ import memberNames from "../components/docs/member-names.md?raw";
 
 // Map of all docs with their content
 const DOCS_MAP = {
-  "about-sast": {
-    title: "About SAST",
-    content: aboutSast,
-    category: "Introduction",
-  },
-  guidelines: {
-    title: "Guidelines",
-    content: guidelines,
-    category: "Getting Started",
-  },
-  contribution: {
-    title: "Contribution Guide",
-    content: contribution,
-    category: "Getting Started",
-  },
-  "code-of-conduct": {
-    title: "Code of Conduct",
-    content: codeOfConduct,
-    category: "Getting Started",
-  },
-  "github-process": {
-    title: "GitHub Process",
-    content: githubProcess,
-    category: "Development",
-  },
-  "community-roles": {
-    title: "Community Roles",
-    content: communityRoles,
-    category: "Community",
-  },
+  "about-sast": { title: "About SAST", content: aboutSast, category: "Introduction" },
+  guidelines: { title: "Guidelines", content: guidelines, category: "Getting Started" },
+  contribution: { title: "Contribution Guide", content: contribution, category: "Getting Started" },
+  "code-of-conduct": { title: "Code of Conduct", content: codeOfConduct, category: "Getting Started" },
+  "github-process": { title: "GitHub Process", content: githubProcess, category: "Development" },
+  "community-roles": { title: "Community Roles", content: communityRoles, category: "Community" },
   faqs: { title: "FAQs", content: faqs, category: "Help" },
-  learning: {
-    title: "Learning Resources",
-    content: learning,
-    category: "Resources",
-  },
-  "contributors-name": {
-    title: "Contributors",
-    content: contributorsName,
-    category: "Community",
-  },
-  "member-names": {
-    title: "Members",
-    content: memberNames,
-    category: "Community",
-  },
+  learning: { title: "Learning Resources", content: learning, category: "Resources" },
+  "contributors-name": { title: "Contributors", content: contributorsName, category: "Community" },
+  "member-names": { title: "Members", content: memberNames, category: "Community" },
 };
 
 // Header Component
 function DocsHeader() {
   return (
-    <header className="docs-header">
+    <header className="docs-header" id="docs-header">
       <div className="docs-header-badge">
         <Book size={20} />
         <span>Documentation</span>
@@ -107,14 +70,32 @@ function DocsSidebar({ docs, query, setQuery, activeId }) {
   const groupedDocs = useMemo(() => {
     const groups = {};
     docs.forEach((doc) => {
-      if (!groups[doc.category]) {
-        groups[doc.category] = [];
-      }
+      if (!groups[doc.category]) groups[doc.category] = [];
       groups[doc.category].push(doc);
     });
     return groups;
   }, [docs]);
 
+  const handleNavClick = (e, id) => {
+    e.preventDefault(); // prevent default Link scroll
+    const header = document.getElementById("docs-header");
+    const headerHeight = header ? header.offsetHeight : 300;
+
+    // manually navigate to the page without reloading
+    window.history.pushState({}, "", `/docs/${id}`);
+
+    // scroll smoothly below the header
+    setTimeout(() => {
+      window.scrollTo({
+        top: headerHeight + 40,
+        behavior: "smooth",
+      });
+    }, 100);
+
+    // trigger router update
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  };
+
   return (
     <aside className="docs-sidebar">
       <div className="docs-search">
@@ -135,18 +116,17 @@ function DocsSidebar({ docs, query, setQuery, activeId }) {
               {categoryDocs.map((doc) => {
                 const isActive = activeId === doc.id;
                 return (
-                  <Link
+                  <a
                     key={doc.id}
-                    to={`/docs/${doc.id}`}
+                    href={`/docs/${doc.id}`}
                     className={`docs-nav-item ${isActive ? "active" : ""}`}
+                    onClick={(e) => handleNavClick(e, doc.id)}
                   >
                     <span className="docs-nav-indicator"></span>
                     <FileText size={16} className="docs-nav-icon" />
                     <span className="docs-nav-title">{doc.title}</span>
-                    {isActive && (
-                      <CheckCircle size={14} className="docs-nav-check" />
-                    )}
-                  </Link>
+                    {isActive && <CheckCircle size={14} className="docs-nav-check" />}
+                  </a>
                 );
               })}
             </div>
@@ -163,8 +143,26 @@ function DocsSidebar({ docs, query, setQuery, activeId }) {
 
 // Content Renderer Component
 function DocRenderer({ doc }) {
+  const docRef = React.useRef(null);
+
+  useEffect(() => {
+    // scroll below header when document changes
+    const header = document.getElementById("docs-header");
+    const headerHeight = header ? header.offsetHeight : 300;
+
+    window.scrollTo({
+      top: headerHeight + 40,
+      behavior: "smooth",
+    });
+
+    // reset internal scroll of markdown content
+    if (docRef.current) {
+      docRef.current.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [doc.id]);
+
   return (
-    <article className="docs-content">
+    <article className="docs-content" ref={docRef}>
       <div className="docs-content-header">
         <span className="docs-content-category">{doc.category}</span>
         <h1 className="docs-content-title">{doc.title}</h1>
@@ -189,10 +187,10 @@ function DocPage({ docs }) {
         <FileText size={48} />
         <h2>Document not found</h2>
         <p>The requested documentation page could not be found.</p>
-        <Link to="/docs" className="docs-back-button">
+        <a href="/docs" className="docs-back-button">
           <ArrowLeft size={16} />
           Back to Documentation
-        </Link>
+        </a>
       </div>
     );
   }
@@ -207,7 +205,6 @@ export default function DocsHub() {
   const [allDocs, setAllDocs] = useState([]);
 
   useEffect(() => {
-    // Convert DOCS_MAP to array format
     const docsArray = Object.entries(DOCS_MAP).map(([id, data]) => ({
       id,
       title: data.title,
@@ -237,15 +234,13 @@ export default function DocsHub() {
     <section className="docs-page">
       <div className="docs-container">
         <DocsHeader />
-
         <div className="docs-layout">
           <DocsSidebar
             docs={filtered}
             query={query}
             setQuery={setQuery}
             activeId={activeId}
           />
-
           <main className="docs-main">
             <Routes>
               <Route
@@ -269,4 +264,4 @@ export default function DocsHub() {
       </div>
     </section>
   );
-}
+}