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 Oct 20, 2020
1 parent 56ce98c commit 485419c
Show file tree
Hide file tree
Showing 13 changed files with 296 additions and 120 deletions.
5 changes: 5 additions & 0 deletions packages/docusaurus-theme-classic/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,11 @@ module.exports = function (context, options) {
.join('|');

return {
resolve: {
alias: {
'@theme-init': this.getTypeScriptThemePath(),
},
},
stats: {
warningsFilter: [
// See https://github.com/facebook/docusaurus/pull/3382
Expand Down
190 changes: 94 additions & 96 deletions packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,110 +78,108 @@ function DocItem(props: Props): JSX.Element {
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
</Head>
<div
className={clsx('container padding-vert--lg', styles.docItemWrapper)}>
<div className="row">
<div
className={clsx('col', {
[styles.docItemCol]: !hideTableOfContents,
})}>
<DocVersionSuggestions />
<div className={styles.docItemContainer}>
<article>
{showVersionBadge && (
<div>
<span className="badge badge--secondary">
Version: {version.label}
</span>
</div>
)}
{!hideTitle && (
<header>
<h1 className={styles.docTitle}>{title}</h1>
</header>
)}
<div className="markdown">
<DocContent />

<div className="row">
<div
className={clsx('col', {
[styles.docItemCol]: !hideTableOfContents,
})}>
<DocVersionSuggestions />
<div className={styles.docItemContainer}>
<article>
{showVersionBadge && (
<div>
<span className="badge badge--secondary">
Version: {version.label}
</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 && (
<div className="col col--3">
<TOC headings={DocContent.rightToc} />
</div>
)}
</div>
{!hideTableOfContents && DocContent.rightToc && (
<div className="col col--3">
<TOC headings={DocContent.rightToc} />
</div>
)}
</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
);
}
}

@media only screen and (max-width: 996px) {
.docItemContainer {
padding: 0 0.3rem;
Expand Down
56 changes: 53 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/

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

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
Expand All @@ -19,6 +19,7 @@ import type {DocumentRoute} from '@theme/DocItem';
import type {Props} from '@theme/DocPage';
import {matchPath} from '@docusaurus/router';

import clsx from 'clsx';
import styles from './styles.module.css';
import {docVersionSearchTag} from '../../utils/searchUtils';

Expand All @@ -37,6 +38,17 @@ function DocPageContent({
const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata;
const sidebarName = permalinkToSidebar[currentDocRoute.path];
const sidebar = docsSidebars[sidebarName];

const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
const [hiddenSidebar, setHiddenSidebar] = useState(false);
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false);
}

setHiddenSidebarContainer(!hiddenSidebarContainer);
}, [hiddenSidebar]);

return (
<Layout
key={isClient}
Expand All @@ -46,7 +58,22 @@ function DocPageContent({
}}>
<div className={styles.docPage}>
{sidebar && (
<div className={styles.docSidebarContainer} role="complementary">
<div
className={clsx(styles.docSidebarContainer, {
[styles.docSidebarContainerHidden]: hiddenSidebarContainer,
})}
onTransitionEnd={(e) => {
if (
!e.currentTarget.classList.contains(styles.docSidebarContainer)
) {
return;
}

if (hiddenSidebarContainer) {
setHiddenSidebar(true);
}
}}
role="complementary">
<DocSidebar
key={
// Reset sidebar state on sidebar changes
Expand All @@ -58,11 +85,34 @@ function DocPageContent({
sidebarCollapsible={
siteConfig.themeConfig?.sidebarCollapsible ?? true
}
onCollapse={toggleSidebar}
isHidden={hiddenSidebar}
/>

{hiddenSidebar && (
<div
className={styles.collapsedDocSidebar}
title="Expand sidebar"
aria-label="Expand sidebar"
tabIndex={0}
role="button"
onKeyDown={toggleSidebar}
onClick={toggleSidebar}
/>
)}
</div>
)}
<main className={styles.docMainContainer}>
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
<div
className={clsx(
'container padding-vert--lg',
styles.docItemWrapper,
{
[styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
},
)}>
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
</div>
</main>
</div>
</Layout>
Expand Down
Loading

0 comments on commit 485419c

Please sign in to comment.