3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-03 19:32:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): redesign mobile UX: inline TOC + doc sidebar in main menu (#4273)

Browse source 
* feat(v2): mobile TOC

* Bug fixes and various improvements

* Redesign

* extract TOCCollapsible component

* TS improvements

* Assign sidebar name directly to the doc route => no need for either permalinkToSidebar or GlobalData

* revert changes to useWindowSize, fix FOUC issues

* extract DocSidebarDesktop component

* remove now useless menu infima classes

* TOCHeadings => rename + remove unused onClick prop

* Extract DocSidebarItem

* minor renaming

* replace GlobalData usage by a React teleport system to render in the navbar mobile sidebar menu directly from the DocPage component

* useWindowSize => simulate SSR size in dev to make FOUC issues more obvious

* fix remaining sidebar layout shift

* update docs snapshots

* remove unused code translations

* remove unused code translations

* fix minor update-code-translations bug

* Add more build-size paths to watch

* Restyle back button

* Add  missing`menu` class

* extract useShallowMemoizedObject

* fix routes tests + better routes formatting

* use Translate api for labels

* use Translate api for labels

* Update translations

* Improve dark mode support for back button

* Merge branch 'master' into lex111/inline-color-code

# Conflicts:
#	packages/core/dist/css/default-dark/default-dark-rtl.min.css
#	packages/core/dist/css/default-dark/default-dark.min.css
#	packages/core/dist/css/default/default-rtl.min.css
#	packages/core/dist/css/default/default.min.css

* replace useCollapse by new useCollapsible

* Cleanup and use clean-btn for TOCCollapsible button

* Make TOC links clickable over full width

* Cleanup

* fix uncollapsible sidebar that can be collapsed + create <Collapsible> component

* dependency array typo

* rollback sidebars community commit typo

Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2021-07-09 17:50:38 +03:00 • committed by GitHub
parent f03479f69e
commit 9536ef900d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 1006 additions and 633 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.tsx
View file

@ -8,37 +8,25 @@
import React, {ReactNode} from 'react';
import renderRoutes from '@docusaurus/renderRoutes';
import NotFound from '@theme/NotFound';
import DocSidebar from '@theme/DocSidebar';
import MDXComponents from '@theme/MDXComponents';
import Layout from '@theme/Layout';
import {MDXProvider} from '@mdx-js/react';
import {matchPath} from '@docusaurus/router';
import type {Props} from '@theme/DocPage';
import type {DocumentRoute} from '@theme/DocItem';
import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
type DocPageContentProps = {
readonly currentDocRoute: DocumentRoute;
readonly versionMetadata: PropVersionMetadata;
readonly children: ReactNode;
};
function DocPageContent({
currentDocRoute,
versionMetadata,
versionMetadata: _versionMetadata,
children,
}: DocPageContentProps): JSX.Element {
const {permalinkToSidebar, docsSidebars} = versionMetadata;
const sidebarName = permalinkToSidebar[currentDocRoute.path];
const sidebar = docsSidebars[sidebarName];
return (
<Layout title="Doc page" description="My Doc page">
<div className="d-flex vh-100">
{sidebar && (
<div role="complementary">
<DocSidebar key={sidebarName} sidebar={sidebar} />
</div>
)}
<main className="w-100 align-items-center overflow-auto p-5">
<MDXProvider components={MDXComponents}>{children}</MDXProvider>
</main>
@ -60,9 +48,7 @@ function DocPage(props: Props): JSX.Element {
return <NotFound {...props} />;
}
return (
<DocPageContent
currentDocRoute={currentDocRoute}
versionMetadata={versionMetadata}>
<DocPageContent versionMetadata={versionMetadata}>
{renderRoutes(docRoutes)}
</DocPageContent>
);