From 335ed10a53cf5dafc32d96fd3b5e54c77d6251f5 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 21 Apr 2024 13:45:26 -0400
Subject: [PATCH] Fix the docs sidebar active link status not properly working

---
 .../app/(pages)/docs/[[...slug]]/layout.tsx   |  3 +-
 .../src/app/(pages)/docs/[[...slug]]/page.tsx |  2 +-
 Frontend/src/app/components/docs/sidebar.tsx  | 42 +++++++++++--------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
index f20181f..0bae1f2 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
+++ b/Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
@@ -9,7 +9,8 @@ export const dynamic = "force-static";
 /**
  * The layout for the docs page.
  *
- * @param children the children of this layout
+ * @param params the params of the request
+ * @param render the children to render
  * @returns the layout jsx
  */
 const DocumentationLayout = ({
diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
index c42671d..f3ebee7 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
@@ -20,7 +20,7 @@ import Image from "next/image";
  * The page to display content
  * from an MDX file on the docs.
  *
- * @param slug the slug of the mdx file
+ * @param params the params of the request
  * @return the page jsx
  */
 const ContentPage = ({ params }: PageProps): ReactElement => {
diff --git a/Frontend/src/app/components/docs/sidebar.tsx b/Frontend/src/app/components/docs/sidebar.tsx
index 72611ca..dbdef87 100644
--- a/Frontend/src/app/components/docs/sidebar.tsx
+++ b/Frontend/src/app/components/docs/sidebar.tsx
@@ -55,23 +55,31 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
                                 {/* Links */}
                                 <div className="flex flex-col border-l border-zinc-700">
                                     {categoryContent.map(
-                                        (content, contentIndex) => (
-                                            <Link
-                                                key={contentIndex}
-                                                className={cn(
-                                                    "pl-3 -ml-px text-zinc-200 hover:opacity-85 transition-all transform-gpu",
-                                                    activeSlug ===
-                                                        content.slug &&
-                                                        "border-l border-minecraft-green-4"
-                                                )}
-                                                href={
-                                                    `/docs/${content.slug}` ||
-                                                    "#"
-                                                }
-                                            >
-                                                {content.title}
-                                            </Link>
-                                        )
+                                        (
+                                            content: DocsContentMetadata,
+                                            contentIndex: number
+                                        ): ReactElement => {
+                                            const active: boolean =
+                                                (!activeSlug &&
+                                                    content.slug === "home") ||
+                                                activeSlug === content.slug;
+                                            return (
+                                                <Link
+                                                    key={contentIndex}
+                                                    className={cn(
+                                                        "pl-3 -ml-px text-zinc-200 hover:opacity-85 transition-all transform-gpu",
+                                                        active &&
+                                                            "border-l border-minecraft-green-4"
+                                                    )}
+                                                    href={
+                                                        `/docs/${content.slug}` ||
+                                                        "#"
+                                                    }
+                                                >
+                                                    {content.title}
+                                                </Link>
+                                            );
+                                        }
                                     )}
                                 </div>
                             </div>