Fix the docs sidebar active link status not properly working

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 = ({

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 => {

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>