3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-16 18:46:57 +02:00
Code Issues Projects Releases Packages Wiki Activity

Show onPageNav on mobile devices (#730)

Browse source 
* Draft implementation of ToC (onPageNav) support for mobile devices

* Support onPageNav on tablets

* Improve tablet layout, when no onPageNav

* Add close state for toc icon

* Close onPageNav, when after navigation on mobile devices
This commit is contained in:
Sviatoslav 2018-06-10 04:48:18 +03:00 • committed by Yangshun Tay
parent c8bc00a3a7
commit 3ff24c7926
2 changed files with 171 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

30
lib/core/nav/SideNav.js
View file

@ -28,6 +28,9 @@ class SideNav extends React.Component {
{this.getLocalizedCategoryString(this.props.current.category)}
</span>
</h2>
<div className="tocToggler" id="tocToggler">
<i className="icon-toc" />
</div>
</div>
<div className="navGroups">
{this.props.contents.map(this.renderCategory, this)}
@ -37,11 +40,28 @@ class SideNav extends React.Component {
<script
dangerouslySetInnerHTML={{
__html: `
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
`,
}}
/>