From e69815e7f04d06cbf2ff255e8c8d2a5bac5d9fb1 Mon Sep 17 00:00:00 2001
From: John Donmoyer <john@deno.com>
Date: Thu, 6 Jun 2024 16:21:01 -0400
Subject: [PATCH] updating secondary nav for mobile

---
 docusaurus.config.js                       |  8 +-
 src/components/APIReferenceIndex/index.tsx |  4 +-
 src/components/SecondaryNavbar.jsx         | 27 ++++--
 src/css/custom.css                         |  8 ++
 src/pages/api/index.jsx                    |  8 --
 src/pages/api/node.jsx                     | 95 ++++++++++++++++++++++
 src/pages/api/web.jsx                      | 95 ++++++++++++++++++++++
 7 files changed, 228 insertions(+), 17 deletions(-)
 delete mode 100644 src/pages/api/index.jsx
 create mode 100644 src/pages/api/node.jsx
 create mode 100644 src/pages/api/web.jsx

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 1961a9ee9..dab105d9b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -146,10 +146,14 @@ const config = {
           activeBaseRegex: `^/examples`,
         },
         {
-          to: "/api",
+          to: "/api/deno",
           label: "API Reference",
           position: "left",
-          id: "toggleSecondaryNav",
+          items: [
+            { to: "/api/deno", label: "Deno" },
+            { to: "/api/web", label: "Web" },
+            { to: "/api/node", label: "Node" },
+          ],
         },
         {
           href: "https://www.deno.com",
diff --git a/src/components/APIReferenceIndex/index.tsx b/src/components/APIReferenceIndex/index.tsx
index 3b7f0fddd..8cf23816a 100644
--- a/src/components/APIReferenceIndex/index.tsx
+++ b/src/components/APIReferenceIndex/index.tsx
@@ -24,7 +24,7 @@ const APIReferenceIndex: React.FC<APIReferenceIndexProps> = ({ apiLinks }) => {
           <ul>
             {apiLinks.map((link) => {
               return (
-                <li key={link.id}>
+                <li className="list-none" key={link.id}>
                   <a
                     href={link.url}
                     className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
@@ -32,7 +32,7 @@ const APIReferenceIndex: React.FC<APIReferenceIndexProps> = ({ apiLinks }) => {
                   >
                     {link.title}
                   </a>
-                  <p className="text-gray-500 dark:text-gray-400">
+                  <p className="text-gray-500 dark:text-gray-0">
                     {link.description}
                   </p>
                 </li>
diff --git a/src/components/SecondaryNavbar.jsx b/src/components/SecondaryNavbar.jsx
index de6027142..500897f44 100644
--- a/src/components/SecondaryNavbar.jsx
+++ b/src/components/SecondaryNavbar.jsx
@@ -1,14 +1,31 @@
 import React from "react";
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
 
 function SecondaryNavbar() {
   return (
     <div className="secondary-navbar w-full">
       <div className="secondary-navbar-content">
-        {/* Your nav items here */}
-
-        <a className="navbar__item navbar__link" href="/api/deno">Deno</a>
-        <a className="navbar__item navbar__link" href="/api/web">Web</a>
-        <a className="navbar__item navbar__link" href="/api/node">Node</a>
+        <NavbarNavLink
+          activeClassName="navbar__link--active"
+          className="navbar__item navbar__link"
+          to="/api/deno"
+          position="left"
+          label="Deno"
+        />
+        <NavbarNavLink
+          activeClassName="navbar__link--active"
+          className="navbar__item navbar__link"
+          to="/api/web"
+          position="left"
+          label="Web"
+        />
+        <NavbarNavLink
+          activeClassName="navbar__link--active"
+          className="navbar__item navbar__link"
+          to="/api/node"
+          position="left"
+          label="Node"
+        />
       </div>
     </div>
   );
diff --git a/src/css/custom.css b/src/css/custom.css
index 29ba6bf44..acea93b9f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -336,6 +336,14 @@ td p:last-child {
   padding: 0 2px;
 }
 
+.navbar__secondary a {
+  display: inline-block;
+}
+
+.navbar__secondary a:first-child {
+  margin-left: 0;
+}
+
 .navbar__link {
   margin-left: 10px;
   margin-right: 10px;
diff --git a/src/pages/api/index.jsx b/src/pages/api/index.jsx
deleted file mode 100644
index ddee430e6..000000000
--- a/src/pages/api/index.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import APIReferenceIndex from "/../src/components/APIReferenceIndex";
-
-const APIPage = () => {
-  return <APIReferenceIndex />;
-};
-
-export default APIPage;
diff --git a/src/pages/api/node.jsx b/src/pages/api/node.jsx
new file mode 100644
index 000000000..b3ad85b12
--- /dev/null
+++ b/src/pages/api/node.jsx
@@ -0,0 +1,95 @@
+import React from "react";
+import APIReferenceIndex from "/../src/components/APIReferenceIndex";
+
+const links = [
+  {
+    id: "1",
+    title: "FFI",
+    description:
+      "Foreign Function Interface. Call functions from shared libraries (e.g., C/C++) directly from Deno. Useful for integrating with existing native code or accessing low-level system functionality.",
+    url: "/api/deno/ffi",
+  },
+  {
+    id: "2",
+    title: "I/O",
+    description:
+      "Interfaces for reading, writing, seeking, and managing resources. For handling of data streams, file I/O, and console interactions.",
+    url: "/api/deno/io",
+  },
+  {
+    id: "3",
+    title: "Permissions",
+    description:
+      "Permission system controls access to resources (e.g., file system, network, environment variables). Request permissions explicitly, enhancing security and user trust.",
+    url: "/api/deno/permissions",
+  },
+  {
+    id: "4",
+    title: "Jupyter",
+    description:
+      "Create interactive notebooks and execute code cells. Useful for data analysis, visualization, and educational purposes.",
+    url: "/api/deno/jupyter",
+  },
+  {
+    id: "5",
+    title: "Cloud",
+    description:
+      "Tools for managing state, scheduling tasks, and interacting with key-value stores.",
+    url: "/api/deno/cloud",
+  },
+  {
+    id: "6",
+    title: "FS",
+    description:
+      "File System APIs for working with files, directories, and file metadata. Includes functions for reading, writing, and manipulating file paths.",
+    url: "/api/deno/fs",
+  },
+  {
+    id: "7",
+    title: "Network",
+    description:
+      "A wide range of networking tasks, from low-level connections to high-level server creation. Handle HTTP requests, WebSocket communication, and DNS resolution. Useful for building web servers, clients, and networking tools.",
+    url: "/api/deno/network",
+  },
+  {
+    id: "8",
+    title: "HTTP Server",
+    description:
+      "Handling HTTP requests, serving responses, and managing server behavior.",
+    url: "/api/deno/http-server",
+  },
+  {
+    id: "9",
+    title: "Sub Process",
+    description:
+      "Spawn and manage child processes, execute commands, and collect output. Useful for executing external programs from Deno.",
+    url: "/api/deno/sub-process",
+  },
+  {
+    id: "10",
+    title: "Errors",
+    description:
+      "Error types and utilities for handling exceptions and custom error scenarios. Helps improve error handling and debugging.",
+    url: "/api/deno/errors",
+  },
+  {
+    id: "11",
+    title: "Runtime Env",
+    description:
+      "System-related functionality, process management, and observability.",
+    url: "/api/deno/runtime-env",
+  },
+  {
+    id: "12",
+    title: "Testing & Benchmarking",
+    description:
+      "Robust testing and benchmarking capabilities to ensure code quality and performance.",
+    url: "/api/deno/testing-benchmarking",
+  },
+];
+
+const APIPage = () => {
+  return <APIReferenceIndex apiLinks={links} />;
+};
+
+export default APIPage;
diff --git a/src/pages/api/web.jsx b/src/pages/api/web.jsx
new file mode 100644
index 000000000..b3ad85b12
--- /dev/null
+++ b/src/pages/api/web.jsx
@@ -0,0 +1,95 @@
+import React from "react";
+import APIReferenceIndex from "/../src/components/APIReferenceIndex";
+
+const links = [
+  {
+    id: "1",
+    title: "FFI",
+    description:
+      "Foreign Function Interface. Call functions from shared libraries (e.g., C/C++) directly from Deno. Useful for integrating with existing native code or accessing low-level system functionality.",
+    url: "/api/deno/ffi",
+  },
+  {
+    id: "2",
+    title: "I/O",
+    description:
+      "Interfaces for reading, writing, seeking, and managing resources. For handling of data streams, file I/O, and console interactions.",
+    url: "/api/deno/io",
+  },
+  {
+    id: "3",
+    title: "Permissions",
+    description:
+      "Permission system controls access to resources (e.g., file system, network, environment variables). Request permissions explicitly, enhancing security and user trust.",
+    url: "/api/deno/permissions",
+  },
+  {
+    id: "4",
+    title: "Jupyter",
+    description:
+      "Create interactive notebooks and execute code cells. Useful for data analysis, visualization, and educational purposes.",
+    url: "/api/deno/jupyter",
+  },
+  {
+    id: "5",
+    title: "Cloud",
+    description:
+      "Tools for managing state, scheduling tasks, and interacting with key-value stores.",
+    url: "/api/deno/cloud",
+  },
+  {
+    id: "6",
+    title: "FS",
+    description:
+      "File System APIs for working with files, directories, and file metadata. Includes functions for reading, writing, and manipulating file paths.",
+    url: "/api/deno/fs",
+  },
+  {
+    id: "7",
+    title: "Network",
+    description:
+      "A wide range of networking tasks, from low-level connections to high-level server creation. Handle HTTP requests, WebSocket communication, and DNS resolution. Useful for building web servers, clients, and networking tools.",
+    url: "/api/deno/network",
+  },
+  {
+    id: "8",
+    title: "HTTP Server",
+    description:
+      "Handling HTTP requests, serving responses, and managing server behavior.",
+    url: "/api/deno/http-server",
+  },
+  {
+    id: "9",
+    title: "Sub Process",
+    description:
+      "Spawn and manage child processes, execute commands, and collect output. Useful for executing external programs from Deno.",
+    url: "/api/deno/sub-process",
+  },
+  {
+    id: "10",
+    title: "Errors",
+    description:
+      "Error types and utilities for handling exceptions and custom error scenarios. Helps improve error handling and debugging.",
+    url: "/api/deno/errors",
+  },
+  {
+    id: "11",
+    title: "Runtime Env",
+    description:
+      "System-related functionality, process management, and observability.",
+    url: "/api/deno/runtime-env",
+  },
+  {
+    id: "12",
+    title: "Testing & Benchmarking",
+    description:
+      "Robust testing and benchmarking capabilities to ensure code quality and performance.",
+    url: "/api/deno/testing-benchmarking",
+  },
+];
+
+const APIPage = () => {
+  return <APIReferenceIndex apiLinks={links} />;
+};
+
+export default APIPage;