Add separate on-page navigation sidebar (#475)

facebook · Mar 4, 2018 · 4ff2fe2 · 4ff2fe2
1 parent f093790
commit 4ff2fe2
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 2 deletions.
diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
@@ -9,6 +9,7 @@ const React = require('react');
 const Container = require('./Container.js');
 const Doc = require('./Doc.js');
 const DocsSidebar = require('./DocsSidebar.js');
+const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
 
@@ -25,7 +26,7 @@ class DocsLayout extends React.Component {
     return (
       <Site
         config={this.props.config}
-        className="sideNavVisible"
+        className="sideNavVisible doc"
         title={
           i18n
             ? translation[this.props.metadata.language]['localized-strings'][
@@ -90,6 +91,11 @@ class DocsLayout extends React.Component {
               )}
             </div>
           </Container>
+          {this.props.config.onPageNav == 'separate' && (
+            <nav className="onPageNav">
+              <OnPageNav rawContent={this.props.children} />
+            </nav>
+          )}
         </div>
       </Site>
     );

diff --git a/lib/core/Site.js b/lib/core/Site.js
@@ -11,6 +11,7 @@ const HeaderNav = require('./nav/HeaderNav.js');
 const Head = require('./Head.js');
 const Footer = require(process.cwd() + '/core/Footer.js');
 const translation = require('../server/translation.js');
+const classNames = require('classnames');
 
 const CWD = process.cwd();
 
@@ -63,7 +64,11 @@ class Site extends React.Component {
           title={title}
           url={url}
         />
-        <body className={this.props.className}>
+        <body
+          className={classNames({
+            [this.props.className]: true,
+            separateOnPageNav: this.props.config.onPageNav == 'separate',
+          })}>
           <HeaderNav
             config={this.props.config}
             baseUrl={this.props.config.baseUrl}

diff --git a/lib/core/getTOC.js b/lib/core/getTOC.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 const Remarkable = require('remarkable');
 const toSlug = require('./toSlug');
 

diff --git a/lib/core/nav/OnPageNav.js b/lib/core/nav/OnPageNav.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const getTOC = require('../getTOC');
+
+const Link = ({hashLink, text}) => <a href={`#${hashLink}`}>{text}</a>;
+
+const Headings = ({headings}) => {
+  if (!headings.length) return null;
+  return (
+    <ul className="toc-headings">
+      {headings.map((heading, i) => (
+        <li key={i}>
+          <Link hashLink={heading.hashLink} text={heading.text} />
+          <Headings headings={heading.children} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+class OnPageNav extends React.Component {
+  render() {
+    const customTags = siteConfig.onPageNavHeadings;
+    const headings = customTags
+      ? getTOC(this.props.rawContent, customTags.topLevel, customTags.sub)
+      : getTOC(this.props.rawContent);
+
+    return <Headings headings={headings} />;
+  }
+}
+
+module.exports = OnPageNav;
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1494,6 +1494,73 @@ nav.toc .toggleNav .navBreadcrumb h2 {
     padding: 0 10px;
   }
 }
+
+.onPageNav {
+  display: none;
+}
+.onPageNav::-webkit-scrollbar {
+  display: none;
+}
+
+@supports(position: sticky) {
+  @media only screen and (min-width: 1024px) {
+    .separateOnPageNav.doc .wrapper,
+    .separateOnPageNav .headerWrapper.wrapper {
+      max-width: 1400px;
+    }
+
+    .doc.separateOnPageNav .docsNavContainer {
+      flex: 0 0 240px;
+      margin: 40px 0 0;
+    }
+
+    .doc.separateOnPageNav nav.toc:last-child {
+      padding-bottom: 0;
+      width: auto;
+    }
+
+    .doc.separateOnPageNav.sideNavVisible .navPusher .mainContainer {
+      max-width: 100%;
+      flex: 1 auto;
+      padding: 0 40px 50px;
+      min-width: 0;
+    }
+
+    .onPageNav {
+      display: block;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 110px;
+      flex: 0 0 240px;
+      overflow-y: auto;
+      max-height: calc(100vh - 110px);
+    }
+
+    .onPageNav > ul {
+      border-left: 1px solid #e0e0e0;
+      padding: 10px 0 2px 15px;
+    }
+
+    .onPageNav a {
+      color: #717171;
+    }
+
+    .onPageNav ul li {
+      font-size: 12px;
+      line-height: 14px;
+      padding-bottom: 12px;
+    }
+
+    .onPageNav ul ul {
+      padding: 8px 0 0 20px;
+    }
+
+    .onPageNav ul ul li {
+      padding-bottom: 8px;
+    }
+  }
+}
+
 table {
   background: #F8F8F8;
   border: 1px solid #B0B0B0;