Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(v2): add ability to hide doc sidebar #3615

Merged
merged 3 commits into from
Oct 22, 2020
Merged

feat(v2): add ability to hide doc sidebar #3615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21d3937
feat(v2): add ability to hide doc sidebar
lex111 Oct 20, 2020
568c2a0
Merge remote-tracking branch 'origin' into lex111/hideable-sidebar-v2
lex111 Oct 20, 2020
02ef134
Use relative imports
lex111 Oct 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 94 additions & 96 deletions packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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