3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-09 15:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add active link classes to site navigation menu (#463)

Browse source
This commit is contained in:
Elian Ibaj 2018-03-04 17:53:31 +01:00 • committed by Joel Marcey
parent 4ea8158c0c
commit 48ee457ec9
9 changed files with 66 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

21
lib/core/nav/HeaderNav.js
View file

@ -9,6 +9,7 @@ const CWD = process.cwd();
const React = require('react');
const fs = require('fs');
const classNames = require('classnames');
const siteConfig = require(CWD + '/siteConfig.js');
const translation = require('../../server/translation.js');
const env = require('../../server/env.js');
@ -97,6 +98,8 @@ class HeaderNav extends React.Component {
// function to generate each header link, used with each object in siteConfig.headerLinks
makeLinks(link) {
let href;
let docItemActive = false;
let docGroupActive = false;
if (link.search && this.props.config.algolia) {
// return algolia search bar
return (
@ -153,6 +156,10 @@ class HeaderNav extends React.Component {
throw new Error(errorStr);
}
href = this.props.config.baseUrl + Metadata[id].permalink;
const {id: currentID, sidebar} = this.props.current;
docItemActive = currentID && currentID === id;
docGroupActive = sidebar && sidebar === Metadata[id].sidebar;
} else if (link.page) {
// set link to page with current page's language if appropriate
const language = this.props.language || '';
@ -172,8 +179,16 @@ class HeaderNav extends React.Component {
// set link to blog url
href = this.props.baseUrl + 'blog';
}
const itemClasses = classNames({
siteNavGroupActive:
(link.doc && docGroupActive) || (link.blog && this.props.current.blog),
siteNavItemActive:
docItemActive ||
(link.blog && this.props.current.blogListing) ||
(link.page && link.page === this.props.current.id),
});
return (
<li key={link.label + 'page'}>
<li key={link.label + 'page'} className={itemClasses}>
<a href={href} target={link.external ? '_blank' : '_self'}>
{translation[this.props.language]
? translation[this.props.language]['localized-strings'][link.label]
@ -279,4 +294,8 @@ class HeaderNav extends React.Component {
}
}
HeaderNav.defaultProps = {
current: {},
};
module.exports = HeaderNav;