3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-11 08:07:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add separate on-page navigation sidebar (#475)

Browse source
This commit is contained in:
Elian Ibaj 2018-03-04 06:23:59 +01:00 • committed by Joel Marcey
parent f093790947
commit 4ff2fe280e
5 changed files with 127 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
lib/core/DocsLayout.js
View file

@ -9,6 +9,7 @@ const React = require('react');
const Container = require('./Container.js'); const Container = require('./Container.js');
const Doc = require('./Doc.js'); const Doc = require('./Doc.js');
const DocsSidebar = require('./DocsSidebar.js'); const DocsSidebar = require('./DocsSidebar.js');
const OnPageNav = require('./nav/OnPageNav.js');
const Site = require('./Site.js'); const Site = require('./Site.js');
const translation = require('../server/translation.js'); const translation = require('../server/translation.js');
@ -25,7 +26,7 @@ class DocsLayout extends React.Component {
return ( return (
<Site <Site
config={this.props.config} config={this.props.config}
className="sideNavVisible" className="sideNavVisible doc"
title={ title={
i18n i18n
? translation[this.props.metadata.language]['localized-strings'][ ? translation[this.props.metadata.language]['localized-strings'][
@ -90,6 +91,11 @@ class DocsLayout extends React.Component {
)} )}
</div> </div>
</Container> </Container>
{this.props.config.onPageNav == 'separate' && (
<nav className="onPageNav">
<OnPageNav rawContent={this.props.children} />
</nav>
)}
</div> </div>
</Site> </Site>
); );

7
lib/core/Site.js
View file

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

7
lib/core/getTOC.js
View file

@ -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 Remarkable = require('remarkable');
const toSlug = require('./toSlug'); const toSlug = require('./toSlug');

40
lib/core/nav/OnPageNav.js Normal file
View file

@ -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;

67
lib/static/css/main.css
View file

@ -1494,6 +1494,73 @@ nav.toc .toggleNav .navBreadcrumb h2 {
padding: 0 10px; 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 { table {
background: #F8F8F8; background: #F8F8F8;
border: 1px solid #B0B0B0; border: 1px solid #B0B0B0;