/** * 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 classNames = require('classnames'); const siteConfig = require(process.cwd() + '/siteConfig.js'); const translation = require('../../server/translation.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.getLocalizedCategoryString(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> ); } // return appropriately translated category string getLocalizedCategoryString(category) { let categoryString = translation[this.props.language] ? translation[this.props.language]['localized-strings'][category] || category : category; return categoryString; } // return appropriately translated label to use for doc/blog in sidebar getLocalizedString(metadata) { let localizedString; const i18n = translation[this.props.language]; const sbTitle = metadata.sidebar_label; if (sbTitle) { localizedString = i18n ? i18n['localized-strings'][sbTitle] || sbTitle : sbTitle; } else { const id = metadata.original_id || metadata.localized_id; localizedString = i18n ? i18n['localized-strings'][id] || metadata.title : metadata.title; } return localizedString; } // return link to doc in sidebar getLink(metadata) { if (metadata.permalink) { if (metadata.permalink.match(/^https?:/)) { return metadata.permalink; } return siteConfig.baseUrl + metadata.permalink; } 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;