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,13 +55,20 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
                                 {/* Links */}
                                 <div className="flex flex-col border-l border-zinc-700">
                                     {categoryContent.map(
-                                        (content, contentIndex) => (
+                                        (
+                                            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",
-                                                    activeSlug ===
+                                                        active &&
-                                                        content.slug &&
                                                             "border-l border-minecraft-green-4"
                                                     )}
                                                     href={
@@ -71,7 +78,8 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
                                                 >
                                                     {content.title}
                                                 </Link>
-                                        )
+                                            );
+                                        }
                                     )}
                                 </div>
                             </div>