feat: Switch to fixed navs with scrolling

package.json

@@ -62,7 +62,7 @@
     "jsdom": "^16.3.0",
     "nginx-conf": "^1.5.0",
     "node-sass": "^4.14.1",
-    "platformicons": "^3.1.0",
+    "platformicons": "^3.1.1",
     "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.1",

src/components/__tests__/__snapshots__/header.test.js.snap

@@ -1,36 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header renders correctly 1`] = `
-<div
+<header
   className="navbar navbar-expand-md navbar-light bg-white global-header"
 >
-  <a
-    className="navbar-brand pb-0"
-    href="/"
-    title="Sentry error monitoring"
+  <div
+    className="navbar-brand"
   >
-    <svg
-      viewBox="0 0 75 75"
-      xmlns="http://www.w3.org/2000/svg"
+    <a
+      className=""
+      href="/"
+      title="Sentry error monitoring"
     >
-      <g
-        className="loader-spin"
-        height="75"
-        width="75"
+      <svg
+        viewBox="0 0 75 75"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          className="loader-stroke loading"
-          d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="5"
-        />
-      </g>
-    </svg>
-    <h6>
-      Docs
-    </h6>
-  </a>
+        <g
+          className="loader-spin"
+          height="75"
+          width="75"
+        >
+          <path
+            className="loader-stroke loading"
+            d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="5"
+          />
+        </g>
+      </svg>
+      <h6>
+        Docs
+      </h6>
+    </a>
+  </div>
+  <div />
   <button
     aria-controls="sidebar"
     aria-expanded="false"
@@ -41,5 +46,5 @@ exports[`Header renders correctly 1`] = `
   >
     Table of Contents
   </button>
-</div>
+</header>
 `;

src/components/__tests__/header.test.js

@@ -2,6 +2,15 @@ import React from "react";
 import renderer from "react-test-renderer";
 import Header from "../header";
 
+jest.mock("../navbar", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div />;
+    },
+  };
+});
+
 describe("Header", () => {
   it("renders correctly", () => {
     const tree = renderer.create(<Header />).toJSON();

src/components/header.tsx

@@ -1,38 +1,43 @@
 import React from "react";
 
+import Navbar from "./navbar";
 import SmartLink from "./smartLink";
 
-export default (): JSX.Element => {
+type Props = {
+  platforms?: string[];
+};
+
+export default ({ platforms }: Props): JSX.Element => {
   return (
-    <div className="navbar navbar-expand-md navbar-light bg-white global-header">
-      <SmartLink
-        to="/"
-        title="Sentry error monitoring"
-        className="navbar-brand pb-0"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
-          <g height="75" width="75" className="loader-spin">
-            <path
-              d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
-              fill="none"
-              stroke="currentColor"
-              className="loader-stroke loading"
-              strokeWidth="5"
-            />
-          </g>
-        </svg>
-        <h6>Docs</h6>
-      </SmartLink>
+    <header className="navbar navbar-expand-md navbar-light bg-white global-header">
+      <div className="navbar-brand">
+        <SmartLink to="/" title="Sentry error monitoring">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
+            <g height="75" width="75" className="loader-spin">
+              <path
+                d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
+                fill="none"
+                stroke="currentColor"
+                className="loader-stroke loading"
+                strokeWidth="5"
+              />
+            </g>
+          </svg>
+          <h6>Docs</h6>
+        </SmartLink>
+      </div>
+
+      <Navbar platforms={platforms} />
 
       <button
         className="d-md-none btn btn-outline-dark"
         type="button"
         onClick={() => {
           const el = document.getElementById("sidebar");
-          if (el.style.display === "block") {
+          if (el.style.display === "flex") {
             el.style.display = "none";
           } else {
-            el.style.display = "block";
+            el.style.display = "flex";
           }
         }}
         aria-controls="sidebar"
@@ -41,6 +46,6 @@ export default (): JSX.Element => {
       >
         Table of Contents
       </button>
-    </div>
+    </header>
   );
 };

src/components/layout.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import Breadcrumbs from "./breadcrumbs";
 import Header from "./header";
 import Sidebar from "./sidebar";
-import Navbar from "./navbar";
 
 import "~src/css/screen.scss";
 
@@ -23,41 +22,34 @@ export default ({
   sidebar,
   pageContext = {},
 }: Props): JSX.Element => {
-  return (
-    <div className="document-wrapper">
-      <div className="sidebar">
-        <Header />
+  const hasSidebar = !!sidebar;
 
-        <div
-          className="d-md-flex flex-column align-items-stretch collapse navbar-collapse"
-          id="sidebar"
-        >
-          <div className="toc">
-            <div className="text-white p-3">
-              {sidebar ? sidebar : <Sidebar />}
-            </div>
+  return (
+    <div className={`document-wrapper ${hasSidebar ? "with-sidebar" : ""}`}>
+      <Header
+        {...(pageContext.platform && {
+          platforms: [pageContext.platform.name],
+        })}
+      />
+      <main role="main">
+        <section className="pt-3 px-3 content-max prose">
+          <div className="pb-3">
+            <Breadcrumbs />
           </div>
-        </div>
-      </div>
+          {children}
+        </section>
+      </main>
 
-      <main role="main" className="px-0">
-        <div className="flex-grow-1">
-          <div className="d-none d-md-block">
-            <Navbar
-              {...(pageContext.platform && {
-                platforms: [pageContext.platform.name],
-              })}
-            />
+      <div
+        className="sidebar d-md-flex flex-column align-items-stretch collapse navbar-collapse"
+        id="sidebar"
+      >
+        <div className="toc">
+          <div className="text-white p-3">
+            {sidebar ? sidebar : <Sidebar />}
           </div>
-
-          <section className="pt-3 px-3 content-max prose">
-            <div className="pb-3">
-              <Breadcrumbs />
-            </div>
-            {children}
-          </section>
         </div>
-      </main>
+      </div>
     </div>
   );
 };

src/components/navbar.tsx

@@ -17,82 +17,80 @@ export default ({ platforms }: Props): JSX.Element => {
   const [currentPlatform] = usePlatform(null, false);
 
   return (
-    <div className="navbar navbar-expand-md navbar-light global-header">
-      <div className="collapse navbar-collapse content-max" id="navbar-menu">
-        <Search path={location.pathname} platforms={platforms} />
-        <Nav className="justify-content-end" style={{ flex: 1 }}>
-          <Nav.Item>
-            <SmartLink className="nav-link" to="/product/">
-              Product
-            </SmartLink>
-          </Nav.Item>
-          <NavDropdown
-            title={
-              currentPlatform ? (
-                <React.Fragment>
-                  <PlatformIcon
-                    platform={currentPlatform.key}
-                    size={16}
-                    style={{ marginRight: "0.5rem" }}
-                    format="lg"
-                  />
-                  {currentPlatform.title}
-                </React.Fragment>
-              ) : (
-                "Platforms"
-              )
-            }
-            id="platforms"
-          >
-            {platformList.map(platform => (
-              <SmartLink
-                className={`dropdown-item ${
-                  currentPlatform && currentPlatform.key == platform.key
-                    ? "active"
-                    : ""
-                }`}
-                key={platform.key}
-                to={platform.url}
-              >
+    <nav className="collapse navbar-collapse content-max" id="navbar-menu">
+      <Search path={location.pathname} platforms={platforms} />
+      <Nav className="justify-content-end" style={{ flex: 1 }}>
+        <Nav.Item>
+          <SmartLink className="nav-link" to="/product/">
+            Product
+          </SmartLink>
+        </Nav.Item>
+        <NavDropdown
+          title={
+            currentPlatform ? (
+              <React.Fragment>
                 <PlatformIcon
-                  platform={platform.key}
+                  platform={currentPlatform.key}
                   size={16}
                   style={{ marginRight: "0.5rem" }}
                   format="lg"
                 />
-                {platform.title}
-              </SmartLink>
-            ))}
-            <NavDropdown.Divider />
-            <SmartLink className="dropdown-item" to="/platforms/">
-              Show all platforms
-            </SmartLink>
-          </NavDropdown>
-          <Nav.Item>
-            <SmartLink className="nav-link" to="/api/">
-              API
+                {currentPlatform.title}
+              </React.Fragment>
+            ) : (
+              "Platforms"
+            )
+          }
+          id="platforms"
+        >
+          {platformList.map(platform => (
+            <SmartLink
+              className={`dropdown-item ${
+                currentPlatform && currentPlatform.key == platform.key
+                  ? "active"
+                  : ""
+              }`}
+              key={platform.key}
+              to={platform.url}
+            >
+              <PlatformIcon
+                platform={platform.key}
+                size={16}
+                style={{ marginRight: "0.5rem" }}
+                format="lg"
+              />
+              {platform.title}
             </SmartLink>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link href="https://sentry.io/">
-              Sign In
-              <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 16 16"
-                className="bi bi-arrow-right-short"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
-                />
-              </svg>
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-      </div>
-    </div>
+          ))}
+          <NavDropdown.Divider />
+          <SmartLink className="dropdown-item" to="/platforms/">
+            Show all platforms
+          </SmartLink>
+        </NavDropdown>
+        <Nav.Item>
+          <SmartLink className="nav-link" to="/api/">
+            API
+          </SmartLink>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link href="https://sentry.io/">
+            Sign In
+            <svg
+              width="1em"
+              height="1em"
+              viewBox="0 0 16 16"
+              className="bi bi-arrow-right-short"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
+              />
+            </svg>
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+    </nav>
   );
 };