hide api link in navbar on mobile

src/app/components/navbar.tsx

@@ -8,6 +8,7 @@ import Logo from "./logo";
 import { ToggleThemeButton } from "./theme-toggle-button";
 import { GithubStar } from "@/app/components/github-star";
 import { Card } from "@/app/components/card";
+import { cn } from "@/common/utils";
 
 type Page = {
   /**
@@ -20,6 +21,11 @@ type Page = {
    */
   url: string;
 
+  /**
+   * Whether to hide the button on mobile.
+   */
+  hideOnMobile?: boolean;
+
   /**
    * Whether clicking the button will
    * open the link in a new tab.
@@ -31,7 +37,7 @@ const pages: Page[] = [
   { name: "Player", url: "/player" },
   { name: "Server", url: "/server/java" },
   { name: "Mojang", url: "/mojang/status" },
-  { name: "API", url: "https://api.mcutils.xyz", openInNewTab: true },
+  { name: "API", url: "https://api.mcutils.xyz", hideOnMobile: true, openInNewTab: true },
   { name: "Docs", url: "/documentation" },
 ];
 
@@ -47,7 +53,7 @@ export default function NavBar(): ReactElement {
       <div className="z-50">
         <Link href="/" className="flex items-center gap-2">
           <Logo />
-          <p className="hidden lg:block text-lg font-semibold">Minecraft Utilities</p>
+          <p className="hidden md:block text-lg font-semibold">Minecraft Utilities</p>
         </Link>
       </div>
 
@@ -59,7 +65,7 @@ export default function NavBar(): ReactElement {
 
             return (
               <HrefButton
-                className={isActive ? "text-primary" : ""}
+                className={cn(isActive ? "text-primary" : "", page.hideOnMobile ? "hidden md:block" : "")}
                 key={index}
                 title={page.name}
                 url={page.url}

src/common/documentation.ts

@@ -2,9 +2,56 @@ import * as fs from "node:fs";
 import path from "node:path";
 
 type Metadata = {
+  /**
+   * The title of the documentation page.
+   */
   title: string;
 };
 
+/**
+ * The directory where the documentation files are stored.
+ */
+const documentationDirectory = path.join(process.cwd(), "documentation");
+
+/**
+ * Gets the files for the documentation.
+ */
+function getDocumentationFiles() {
+  return fs.readdirSync(documentationDirectory);
+}
+
+/**
+ * Gets the content of a documentation file.
+ *
+ * @param file the file to get the content of.
+ */
+function getDocumentationFileContent(file: string) {
+  return fs.readFileSync(path.join(documentationDirectory, file), "utf-8");
+}
+
+/**
+ * Gets all the documentation pages.
+ */
+export function getDocumentation() {
+  const files = getDocumentationFiles();
+
+  return files.map(file => {
+    const { metadata, content } = parseFrontmatter(getDocumentationFileContent(file));
+    let slug = path.basename(file, path.extname(file));
+
+    return {
+      metadata,
+      content,
+      slug,
+    };
+  });
+}
+
+/**
+ * Parses the frontmatter of a file.
+ *
+ * @param fileContent the content of the file.
+ */
 function parseFrontmatter(fileContent: string) {
   let frontmatterRegex = /---\s*([\s\S]*?)\s*---/;
   let match = frontmatterRegex.exec(fileContent);
@@ -22,31 +69,3 @@ function parseFrontmatter(fileContent: string) {
 
   return { metadata: metadata as Metadata, content };
 }
-
-const documentationDirectory = path.join(process.cwd(), "documentation");
-
-/**
- * Gets the files for the documentation.
- */
-function getDocumentationFiles() {
-  return fs.readdirSync(documentationDirectory);
-}
-
-function getDocumentationFileContent(file: string) {
-  return fs.readFileSync(path.join(documentationDirectory, file), "utf-8");
-}
-
-export function getDocumentation() {
-  const files = getDocumentationFiles();
-
-  return files.map(file => {
-    const { metadata, content } = parseFrontmatter(getDocumentationFileContent(file));
-    let slug = path.basename(file, path.extname(file));
-
-    return {
-      metadata,
-      content,
-      slug,
-    };
-  });
-}