Skip to content

Commit

Permalink
feat(v2): add ability to hide doc sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@lex111
lex111 committed Jun 3, 2020
1 parent 6f332f4 commit 147b304
Show file tree
Hide file tree
Showing 8 changed files with 276 additions and 123 deletions.
187 changes: 91 additions & 96 deletions packages/docusaurus-theme-classic/src/theme/DocItem/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,110 +101,105 @@ function DocItem(props) {
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
</Head>
<div
className={classnames(
'container padding-vert--lg',
styles.docItemWrapper,
)}>
<div className="row">
<div
className={classnames('col', {
[styles.docItemCol]: !hideTableOfContents,
})}>
<div className={styles.docItemContainer}>
<article>
{version && (
<div>
<span className="badge badge--secondary">
Version: {version}
</span>
</div>
)}
{!hideTitle && (
<header>
<h1 className={styles.docTitle}>{title}</h1>
</header>
)}
<div className="markdown">
<DocContent />

<div className="row">
<div
className={classnames('col', {
[styles.docItemCol]: !hideTableOfContents,
})}>
<div className={styles.docItemContainer}>
<article>
{version && (
<div>
<span className="badge badge--secondary">
Version: {version}
</span>
</div>
</article>
{(editUrl || lastUpdatedAt || lastUpdatedBy) && (
<div className="margin-vert--xl">
<div className="row">
<div className="col">
{editUrl && (
<a
href={editUrl}
target="_blank"
rel="noreferrer noopener">
<svg
fill="currentColor"
height="1.2em"
width="1.2em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 40 40"
style={{
marginRight: '0.3em',
verticalAlign: 'sub',
}}>
<g>
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
</g>
</svg>
Edit this page
</a>
)}
</div>
{(lastUpdatedAt || lastUpdatedBy) && (
<div className="col text--right">
<em>
<small>
Last updated{' '}
{lastUpdatedAt && (
<>
on{' '}
<time
dateTime={new Date(
lastUpdatedAt * 1000,
).toISOString()}
className={styles.docLastUpdatedAt}>
{new Date(
lastUpdatedAt * 1000,
).toLocaleDateString()}
</time>
{lastUpdatedBy && ' '}
</>
)}
{lastUpdatedBy && (
<>
by <strong>{lastUpdatedBy}</strong>
</>
)}
{process.env.NODE_ENV === 'development' && (
<div>
<small>
{' '}
(Simulated during dev for better perf)
</small>
</div>
)}
</small>
</em>
</div>
)}
{!hideTitle && (
<header>
<h1 className={styles.docTitle}>{title}</h1>
</header>
)}
<div className="markdown">
<DocContent />
</div>
</article>
{(editUrl || lastUpdatedAt || lastUpdatedBy) && (
<div className="margin-vert--xl">
<div className="row">
<div className="col">
{editUrl && (
<a
href={editUrl}
target="_blank"
rel="noreferrer noopener">
<svg
fill="currentColor"
height="1.2em"
width="1.2em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 40 40"
style={{
marginRight: '0.3em',
verticalAlign: 'sub',
}}>
<g>
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
</g>
</svg>
Edit this page
</a>
)}
</div>
{(lastUpdatedAt || lastUpdatedBy) && (
<div className="col text--right">
<em>
<small>
Last updated{' '}
{lastUpdatedAt && (
<>
on{' '}
<time
dateTime={new Date(
lastUpdatedAt * 1000,
).toISOString()}
className={styles.docLastUpdatedAt}>
{new Date(
lastUpdatedAt * 1000,
).toLocaleDateString()}
</time>
{lastUpdatedBy && ' '}
</>
)}
{lastUpdatedBy && (
<>
by <strong>{lastUpdatedBy}</strong>
</>
)}
{process.env.NODE_ENV === 'development' && (
<div>
<small>
{' '}
(Simulated during dev for better perf)
</small>
</div>
)}
</small>
</em>
</div>
)}
</div>
)}
<div className="margin-vert--lg">
<DocPaginator metadata={metadata} />
</div>
)}
<div className="margin-vert--lg">
<DocPaginator metadata={metadata} />
</div>
</div>
{!hideTableOfContents && DocContent.rightToc && (
<DocTOC headings={DocContent.rightToc} />
)}
</div>
{!hideTableOfContents && DocContent.rightToc && (
<DocTOC headings={DocContent.rightToc} />
)}
</div>
</>
);
Expand Down
8 changes: 0 additions & 8 deletions packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,6 @@
}
}

@media (min-width: 997px) and (max-width: 1320px) {
.docItemWrapper {
max-width: calc(
var(--ifm-container-width) - 300px - var(--ifm-spacing-horizontal) * 2
);
}
}

.tableOfContents {
display: inherit;
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
Expand Down
63 changes: 54 additions & 9 deletions packages/docusaurus-theme-classic/src/theme/DocPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import React, {useState, useCallback} from 'react';
import {MDXProvider} from '@mdx-js/react';
import classnames from 'classnames';

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import renderRoutes from '@docusaurus/renderRoutes';
Expand Down Expand Up @@ -44,6 +45,23 @@ function DocPage(props) {
isClient,
} = useDocusaurusContext();

const [hiddenSidebar, setHiddenSidebar] = useState(false);
// This state (and timeout above) is necessary to prevent background blinking
// (since click triggers hover effect) when collapsing sidebar.
const [enabledSidebarEffects, setEnabledSidebarEffects] = useState(false);

const toggleSidebar = useCallback(() => {
if (!hiddenSidebar) {
setTimeout(() => {
setEnabledSidebarEffects(true);
}, 500);
} else {
setEnabledSidebarEffects(false);
}

setHiddenSidebar(!hiddenSidebar);
});

if (!isHomePage && Object.keys(currentRoute).length === 0) {
return <NotFound {...props} />;
}
Expand All @@ -52,23 +70,50 @@ function DocPage(props) {
<Layout version={version} key={isClient}>
<div className={styles.docPage}>
{sidebar && (
<div className={styles.docSidebarContainer} role="complementary">
<div
className={classnames(styles.docSidebarContainer, {
[styles.docSidebarContainerHidden]: hiddenSidebar,
[styles.docSidebarContainerEnabledEffects]: enabledSidebarEffects,
})}
role="complementary">
<DocSidebar
docsSidebars={docsSidebars}
path={isHomePage ? homePagePath : currentRoute.path}
sidebar={sidebar}
sidebarCollapsible={sidebarCollapsible}
onToggle={toggleSidebar}
isHiddenSidebar={hiddenSidebar}
/>

{hiddenSidebar && (
<div
className={styles.collapsedDocSidebar}
aria-label="Expand sidebar"
tabIndex="0"
role="button"
onKeyDown={toggleSidebar}
onClick={toggleSidebar}
/>
)}
</div>
)}
<main className={styles.docMainContainer}>
<MDXProvider components={MDXComponents}>
{isHomePage ? (
<DocItem content={content} />
) : (
renderRoutes(baseRoute.routes)
)}
</MDXProvider>
<div
className={classnames(
'container padding-vert--lg',
styles.docItemWrapper,
{
[styles.docItemWrapperEnhanced]: hiddenSidebar,
},
)}>
<MDXProvider components={MDXComponents}>
{isHomePage ? (
<DocItem content={content} />
) : (
renderRoutes(baseRoute.routes)
)}
</MDXProvider>
</div>
</main>
</div>
</Layout>
Expand Down
Loading

0 comments on commit 147b304

Please sign in to comment.