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}