feat: add secondary navbar to docs

denoland · donjo · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 7, 2024
commit a80c0aaed3bcead26ad211ffa634093d096eb6b5
diff --git a/deno.lock b/deno.lock
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -146,9 +146,10 @@ const config = {
           activeBaseRegex: `^/examples`,
         },
         {
-          href: "https://deno.land/api?unstable=true",
+          to: "/api",
           label: "API Reference",
-          position: "right",
+          position: "left",
+          id: "toggleSecondaryNav",
         },
         {
           href: "https://www.deno.com",

diff --git a/src/components/APIReference/index.tsx b/src/components/APIReference/index.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Footer from "@theme/Footer";
+
+const APIReference = () => {
+  const apiLinks = [
+    { id: "1", title: "API 1", url: "/api/1" },
+    { id: "2", title: "API 2", url: "/api/2" },
+    { id: "2", title: "API 2", url: "/api/2" },
+    { id: "3", title: "API 3", url: "/api/3" },
+    { id: "4", title: "API 4", url: "/api/4" },
+    { id: "5", title: "API 5", url: "/api/5" },
+    { id: "6", title: "API 6", url: "/api/6" },
+    { id: "7", title: "API 7", url: "/api/7" },
+    { id: "8", title: "API 8", url: "/api/8" },
+    { id: "9", title: "API 9", url: "/api/9" },
+    { id: "10", title: "API 10", url: "/api/10" },
+    { id: "11", title: "API 11", url: "/api/11" },
+    { id: "12", title: "API 12", url: "/api/12" },
+    { id: "13", title: "API 13", url: "/api/13" },
+    { id: "14", title: "API 14", url: "/api/14" },
+    { id: "15", title: "API 15", url: "/api/15" },
+    { id: "16", title: "API 16", url: "/api/16" },
+    { id: "17", title: "API 17", url: "/api/17" },
+    { id: "18", title: "API 18", url: "/api/18" },
+    { id: "19", title: "API 19", url: "/api/19" },
+    { id: "20", title: "API 20", url: "/api/20" },
+    { id: "21", title: "API 21", url: "/api/21" },
+    { id: "22", title: "API 22", url: "/api/22" },
+    { id: "23", title: "API 23", url: "/api/23" },
+    { id: "24", title: "API 24", url: "/api/24" },
+    { id: "25", title: "API 25", url: "/api/25" },
+    { id: "26", title: "API 26", url: "/api/26" },
+    { id: "27", title: "API 27", url: "/api/27" },
+    { id: "28", title: "API 28", url: "/api/28" },
+    { id: "29", title: "API 29", url: "/api/29" },
+    { id: "30", title: "API 30", url: "/api/30" },
+    { id: "31", title: "API 31", url: "/api/31" },
+    { id: "32", title: "API 32", url: "/api/32" },
+    { id: "33", title: "API 33", url: "/api/33" },
+    { id: "34", title: "API 34", url: "/api/34" },
+    { id: "35", title: "API 35", url: "/api/35" },
+    { id: "36", title: "API 36", url: "/api/36" },
+    { id: "37", title: "API 37", url: "/api/37" },
+    // Add more links as needed
+  ];
+
+  return (
+    <Layout
+      title={"Deno: the easiest, most secure JavaScript runtime"}
+      description="Reference documentation for the Deno runtime and Deno Deploy"
+    >
+      <div className="w-full mt-8 h-screen max-w-screen-xl mx-auto">
+        <div className="mt-24">
+          <h1>API Reference</h1>
+          <ul>
+            {apiLinks.map((link) => {
+              return (
+                <li key={link.id}>
+                  <a
+                    href={link.url}
+                    className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
+                  >
+                    {link.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+
+      <Footer />
+    </Layout>
+  );
+};
+
+export default APIReference;
diff --git a/src/components/SecondaryNavbar.jsx b/src/components/SecondaryNavbar.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+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="/link1">Link 1</a>
+        <a className="navbar__item navbar__link" href="/link2">Link 2</a>
+      </div>
+    </div>
+  );
+}
+
+export default SecondaryNavbar;
+
+// TODO MIGRATE STYLES FROM NAVBAR TO NAVBAR PRIMARY AND SECONDARY
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -61,15 +61,19 @@ html:root {
   --ifm-alert-padding-horizontal: 2rem;
   --ifm-color-info-dark: var(--deploy-medium);
   --ifm-color-info-contrast-background: var(--deploy-lightest);
+  --ifm-color-emphasis-300: var(--gray-00);
   --ifm-menu-color-background-hover: var(--deploy-lightest);
   --ifm-code-font-size: 0.875em;
   --ifm-code-padding-horizontal: 0.375em;
   --ifm-code-padding-vertical: 0.1875em;
   --ifm-code-background: #f6f8fa; /* Matches Prism highlighting */
   --ifm-code-color: #393a34;
-  --ifm-menu-color: var(--gray-3);
+  --ifm-toc-padding-vertical: 0.5rem;
+  --ifm-toc-border-color: var(--gray-00);
+  --ifm-color-content-secondary: var(--gray-2);
+  --ifm-menu-color: var(--gray-2);
   --ifm-navbar-search-input-background-color: var(--white);
-  --ifm-tabs-padding-vertical: 0.5rem;
+  --ifm-tabs-padding-vertical: 0.25rem;
   --ifm-list-item-margin: 0.5em;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --docsearch-muted-color: var(--gray-2);
@@ -93,7 +97,7 @@ html:root {
   }
 
   .pagination-nav__link {
-    padding: 2rem 1rem;
+    padding: 1rem 1.5rem;
   }
 }
 
@@ -107,29 +111,54 @@ html[data-theme="dark"][data-theme="dark"] {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   --ifm-background-color: var(--black);
-  --ifm-background-surface-color: var(--gray-4);
+  --ifm-background-surface-color: var(--black);
+  --ifm-toc-border-color: var(--gray-3);
+  --ifm-color-emphasis-300: var(--gray-3);
+  --ifm-menu-color: var(--gray-3);
   --ifm-link-color: var(--runtime);
   --ifm-link-hover-color: var(--runtime);
   --ifm-color-info-dark: var(--deploy-medium);
   --ifm-color-info-contrast-background: var(--deploy-dark);
+  --ifm-color-content-secondary: var(--gray-0);
   --ifm-menu-color-background-active: var(--runtime-dark);
   --ifm-code-background: #282a36;
   --ifm-menu-color: var(--gray-00);
+  --ifm-navbar-shadow-dark: 0 1px 2px 0 rgba(255, 255, 255, 0.1);
   --docsearch-footer-background: var(--runtime-dark);
   --docsearch-muted-color: var(--gray-0);
 }
 
 html[data-theme="dark"] kbd.DocSearch-Button-Key,
 html[data-theme="dark"] kbd.DocSearch-Commands-Key {
   box-shadow: none;
-  color: var(--gray-0);
+  color: var(--gray-2);
 }
 
 html[data-theme="dark"] .DocSearch-Button {
-  border: 1px solid var(--gray-1);
+  border: 1px solid var(--gray-3);
   padding: 0 1rem;
 }
 
+html[data-theme="dark"] .section-header,
+.subsection-header,
+.product-header {
+  border-bottom: 1px solid var(--gray-3);
+}
+
+html[data-theme="dark"] .navbar {
+  box-shadow: var(--ifm-navbar-shadow-dark);
+}
+
+html[data-theme="dark"] .secondary-navbar {
+  background-color: var(--gray-4);
+}
+
+/* Multiple selectors to override defaults in light mode */
+
+html[data-theme="light"] .secondary-navbar {
+  border-top: 1px solid var(--gray-00);
+}
+
 html[data-theme="light"] kbd.DocSearch-Button-Key,
 html[data-theme="light"] kbd.DocSearch-Commands-Key {
   box-shadow: none;
@@ -163,7 +192,7 @@ article {
 
 h1,
 .markdown h1:first-child {
-  font-size: clamp(2rem, 5vw, 2.75rem);
+  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
   margin-bottom: 1.25rem;
 }
 
@@ -173,17 +202,17 @@ h1,
 
 h2 {
   --ifm-h2-vertical-rhythm-top: 2;
-  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
 }
 
 h3 {
   --ifm-h3-vertical-rhythm-top: 1.75;
-  font-size: clamp(1.25rem, 3vw, 1.5rem);
+  font-size: clamp(1rem, 3vw, 1.25rem);
 }
 
 h4 {
   --ifm-h4-vertical-rhythm-top: 1.5;
-  font-size: clamp(1.1rem, 2vw, 1.25rem);
+  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
 }
 
 :where(h1, h2, h3) {
@@ -214,6 +243,20 @@ td p:last-child {
 .navbar {
   position: fixed;
   width: 100%;
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  padding: 0;
+}
+
+.navbar__inner {
+  padding: var(--ifm-navbar-padding-vertical)
+    var(--ifm-navbar-padding-horizontal);
+}
+
+.secondary-navbar-content {
+  padding: var(--ifm-navbar-padding-vertical)
+    var(--ifm-navbar-padding-horizontal);
 }
 
 .table-of-contents a {
@@ -255,7 +298,7 @@ td p:last-child {
   color: var(--ifm-navbar-link-color);
   font-size: 0.75rem;
   text-transform: uppercase;
-  border-bottom: 1px solid var(--gray-1);
+  border-bottom: 1px solid var(--gray-00);
   margin: 1rem var(--ifm-menu-link-padding-horizontal);
   padding: 0.5rem 0 0.1rem 0;
 }
@@ -273,7 +316,7 @@ td p:last-child {
 .subsection-header {
   padding: 2px 0;
   margin: 5px var(--ifm-menu-link-padding-horizontal);
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid var(--gray-00);
   font-size: 0.8rem;
 }
 
@@ -296,11 +339,12 @@ td p:last-child {
 .navbar__link {
   margin-left: 10px;
   margin-right: 10px;
+  margin-top: 4px;
+  border-bottom: 2px solid transparent;
 }
 
 .navbar__link--active {
-  font-weight: bold;
-  margin-top: 3px;
+  font-weight: 500;
   border-bottom: 2px solid var(--ifm-color-primary);
 }
 
@@ -315,7 +359,11 @@ td p:last-child {
 }
 
 .navbar__title {
-  font-size: 1.2rem;
+  font-size: 1.3rem;
+}
+
+.secondary-navbar {
+  background-color: var(--white);
 }
 
 /* Mobile Nav Customize */
@@ -463,7 +511,7 @@ td p:last-child {
 }
 
 html .breadcrumbsContainer_src-theme-DocBreadcrumbs-styles-module {
-  --ifm-breadcrumb-size-multiplier: 0.9;
+  --ifm-breadcrumb-size-multiplier: 1;
   margin-bottom: 0.5rem;
 }
 
@@ -530,3 +578,12 @@ kbd.DocSearch-Commands-Key {
   background: transparent;
   color: var(--docsearch-muted-color);
 }
+
+.tabs__item {
+  border-bottom: 2px solid transparent;
+}
+
+.tabs__item--active {
+  border-bottom-color: var(--ifm-tabs-color-active-border);
+  color: var(--ifm-tabs-color-active);
+}
diff --git a/src/pages/api.jsx b/src/pages/api.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import APIReference from "/src/components/APIReference";
+
+const APIPage = () => {
+  return <APIReference />;
+};
+
+export default APIPage;
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
@@ -1,4 +1,5 @@
-import React from "react";
+import React, {useState} from "react";
+import { useLocation } from "@docusaurus/router";
 import clsx from "clsx";
 import Head from "@docusaurus/Head";
 import ErrorBoundary from "@docusaurus/ErrorBoundary";