Docs sidebar

Frontend/docs/player/query.md

@@ -1,5 +1,5 @@
 ---
-title: 'option utinam malorum tempor sapien.'
+title: 'Query a player'
 published: '04-19-2024'
 summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset necessitatibus.'
 ---

Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx

@@ -0,0 +1,34 @@
+import { ReactElement, ReactNode } from "react";
+import Sidebar from "@/components/docs/sidebar";
+
+/**
+ * Force the layout to be static.
+ */
+export const dynamic = "force-static";
+
+/**
+ * The layout for the docs page.
+ *
+ * @param children the children of this layout
+ * @returns the layout jsx
+ */
+const DocumentationLayout = ({
+    params,
+    children,
+}: Readonly<{
+    params: any;
+    children: ReactNode;
+}>): ReactElement => {
+    const activeSlug: string = ((params.slug as string[]) || undefined)?.join(
+        "/"
+    ); // The active slug of this page
+    return (
+        <section className="min-h-screen py-28 flex justify-center">
+            <div className="flex flex-wrap gap-32 divide-x-2">
+                <Sidebar activeSlug={activeSlug} />
+                {children}
+            </div>
+        </section>
+    );
+};
+export default DocumentationLayout;

Frontend/src/app/(pages)/docs/layout.tsx

@@ -1,27 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-import Sidebar from "@/components/docs/sidebar";
-
-/**
- * Force the layout to be static.
- */
-export const dynamic = "force-static";
-
-/**
- * The layout for the docs page.
- *
- * @param children the children of this layout
- * @returns the layout jsx
- */
-const DocumentationLayout = ({
-    children,
-}: Readonly<{
-    children: ReactNode;
-}>): ReactElement => (
-    <section className="min-h-screen py-28 flex justify-center">
-        <div className="flex flex-wrap gap-32 divide-x-2">
-            <Sidebar />
-            {children}
-        </div>
-    </section>
-);
-export default DocumentationLayout;

Frontend/src/app/components/docs/sidebar.tsx

@@ -1,15 +1,28 @@
 import { ReactElement } from "react";
 import { Input } from "@/components/ui/input";
 import { getDocsContent } from "@/lib/mdxUtils";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { capitalize } from "@/lib/stringUtils";
+import { minecrafter } from "@/font/fonts";
 
 /**
  * The sidebar for the docs page.
  *
  * @returns the sidebar jsx
  */
-const Sidebar = (): ReactElement => (
+const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
+    const groupedContent: Record<string, DocsContentMetadata[]> = {};
+    for (let content of getDocsContent()) {
+        const categoryKey: string = content.slug?.split("/")[0] || "home"; // The key of the category
+        if (!groupedContent[categoryKey]) {
+            groupedContent[categoryKey] = [];
+        }
+        groupedContent[categoryKey].push(content);
+    }
+    return (
         <div className="hidden h-full px-3 py-5 xl:flex flex-col items-center">
-        <div className="fixed w-56 flex flex-col gap-2.5">
+            <div className="fixed w-56 flex flex-col gap-5">
                 {/* Search */}
                 <Input
                     type="search"
@@ -19,17 +32,54 @@ const Sidebar = (): ReactElement => (
                 />
 
                 {/* Links */}
-            <div className="flex flex-col gap-1">
-                {getDocsContent().map(
+                <div className="flex flex-col gap-7">
+                    {Object.entries(groupedContent).map(
                         (
-                        content: DocsContentMetadata,
+                            [category, categoryContent]: [
+                                string,
+                                DocsContentMetadata[],
+                            ],
                             index: number
                         ): ReactElement => (
-                        <div key={index}>{content.title}</div>
+                            <div key={index} className="flex flex-col gap-1.5">
+                                {/* Category */}
+                                <h1
+                                    className={cn(
+                                        "text-xl text-minecraft-green-4",
+                                        minecrafter.className
+                                    )}
+                                >
+                                    {capitalize(category)}
+                                </h1>
+
+                                {/* 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>
+                                        )
+                                    )}
+                                </div>
+                            </div>
                         )
                     )}
                 </div>
             </div>
         </div>
-);
+    );
+};
 export default Sidebar;