Initial commit

lib/core/nav/SideNav.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+const React = require('react');
+const classNames = require('classnames');
+
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+
+class SideNav extends React.Component {
+  render() {
+    return (
+      <nav className="toc">
+        <div className="toggleNav">
+          <section className="navWrapper wrapper">
+            <div className="navBreadcrumb wrapper">
+              <div className="navToggle" id="navToggler"><i /></div>
+              <h2>
+                <i>›</i>
+                <span>{this.props.current.category}</span>
+              </h2>
+            </div>
+            <div className="navGroups">
+              {this.props.contents.map(this.renderCategory, this)}
+            </div>
+          </section>
+        </div>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+          var toggler = document.getElementById('navToggler');
+          var nav = document.getElementById('docsNav');
+          toggler.onclick = function() {
+            nav.classList.toggle('docsSliderActive');
+          };
+        `,
+          }}
+        />
+      </nav>
+    );
+  }
+  renderCategory(category) {
+    return (
+      <div className="navGroup navGroupActive" key={category.name}>
+        <h3>{this.getLocalizedCategoryString(category.name)}</h3>
+        <ul>
+          {category.links.map(this.renderItemLink, this)}
+        </ul>
+      </div>
+    );
+  }
+  getLocalizedCategoryString(category) {
+    let categoryString =
+      siteConfig[this.props.language] ?
+      siteConfig[this.props.language]['localized-strings'][category] || category
+      : category;
+    return categoryString;
+  }
+  getLocalizedString(metadata) {
+    let localizedString =
+      siteConfig[this.props.language] ?
+      siteConfig[this.props.language]['localized-strings'][metadata.localized_id] || metadata.title
+      : metadata.title;
+
+    return localizedString;
+  }
+  getLink(metadata) {
+    if (metadata.permalink) {
+      if (metadata.permalink.match(/^https?:/)) {
+        return metadata.permalink;
+      }
+      return siteConfig.baseUrl + metadata.permalink + '#content';
+    }
+    if (metadata.path) {
+      return siteConfig.baseUrl + 'blog/' + metadata.path;
+    }
+    return null;
+  }
+  renderItemLink(link) {
+    const itemClasses = classNames('navListItem', {
+      navListItemActive: link.id === this.props.current.id,
+    });
+    const linkClasses = classNames('navItem', {
+      navItemActive: link.id === this.props.current.id,
+    });
+    return (
+      <li className={itemClasses} key={link.id}>
+        <a className={linkClasses} href={this.getLink(link)}>
+          {this.getLocalizedString(link)}
+        </a>
+      </li>
+    );
+  }
+}
+SideNav.defaultProps = {
+  contents: [],
+};
+module.exports = SideNav;