Skip to content

Commit

Permalink
Redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@lex111
lex111 committed May 16, 2021
1 parent e21914e commit 9f6ebff
Show file tree
Hide file tree
Showing 9 changed files with 283 additions and 166 deletions.
74 changes: 26 additions & 48 deletions packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@
* LICENSE file in the root directory of this source tree.
*/

import React, {useState, useCallback} from 'react';
import React, {useRef} from 'react';
import clsx from 'clsx';

import {
useActivePlugin,
useVersions,
useActiveVersion,
} from '@theme/hooks/useDocs';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useCollapse from '@theme/hooks/useCollapse';
import useWindowSize from '@theme/hooks/useWindowSize';
import DocPaginator from '@theme/DocPaginator';
import DocVersionSuggestions from '@theme/DocVersionSuggestions';
import Seo from '@theme/Seo';
import LastUpdated from '@theme/LastUpdated';
import type {Props} from '@theme/DocItem';
import TOC, {Headings} from '@theme/TOC';
import EditThisPage from '@theme/EditThisPage';
import IconMenu from '@theme/IconMenu';

import styles from './styles.module.css';

Expand Down Expand Up @@ -57,12 +57,10 @@ function DocItem(props: Props): JSX.Element {
const metaTitle = frontMatter.title || title;

const showToc = !hideTableOfContents && DocContent.toc;
const [showMobileToc, setShowMobileToc] = useState(false);
const toggleMobileToc = useCallback(() => {
setShowMobileToc(!showMobileToc);
}, [showMobileToc]);

useLockBodyScroll(showMobileToc);
const {isDesktop} = useWindowSize();
const mobileTocRef = useRef(null);
const [collapsed, setCollapsed] = useCollapse(true, mobileTocRef);

return (
<>
Expand All @@ -83,6 +81,25 @@ function DocItem(props: Props): JSX.Element {
</span>
</div>
)}
{!isDesktop && showToc && (
<div
className={clsx('margin-vert--md', styles.mobileToc, {
[styles.mobileTocExpanded]: !collapsed,
})}>
<button
type="button"
className={styles.mobileTocButton}
onClick={() => setCollapsed(!collapsed)}>
Contents of this page
</button>

<div
ref={mobileTocRef}
className={clsx(styles.mobileTocContent)}>
<Headings toc={DocContent.toc} />
</div>
</div>
)}
{!hideTitle && (
<header>
<h1 className={styles.docTitle}>{title}</h1>
Expand Down Expand Up @@ -113,51 +130,12 @@ function DocItem(props: Props): JSX.Element {
</div>
</div>
</div>
{showToc && (
{showToc && isDesktop && (
<div className="col col--3">
<TOC toc={DocContent.toc} />
</div>
)}
</div>

{showToc && (
<>
{/* TODO: Use Infima styles */}
<div
role="presentation"
className={clsx(styles.mobileTocOverlay, {
[styles.mobileTocOverlayOpened]: showMobileToc,
})}
onClick={toggleMobileToc}
/>

<div
className={clsx(styles.mobileToc, {
[styles.mobileTocOpened]: showMobileToc,
})}>
<button
type="button"
className={clsx(
'button button--secondary',
styles.mobileTocCloseButton,
)}
onClick={toggleMobileToc}>
×
</button>

<div className={clsx(styles.mobileTocContent, 'thin-scrollbar')}>
<Headings toc={DocContent.toc} onClick={toggleMobileToc} />
</div>

<button
type="button"
className={styles.mobileTocOpenButton}
onClick={toggleMobileToc}>
<IconMenu height={24} width={24} />
</button>
</div>
</>
)}
</>
);
}
Expand Down
94 changes: 34 additions & 60 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 @@ -19,10 +19,6 @@
.docItemCol {
max-width: 75% !important;
}

.mobileToc {
display: none;
}
}

@media only screen and (max-width: 996px) {
Expand All @@ -31,75 +27,53 @@
}

.mobileToc {
position: fixed;
left: 50%;
top: 50%;
z-index: calc(var(--ifm-z-index-fixed) + 2);
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: var(--ifm-global-shadow-md);
transform: translate(-50%, -50%) translateX(100%);
max-height: 50vh;
transition: transform var(--ifm-transition-fast) ease;
}

.mobileTocOpened {
transform: translate(-50%, -50%) translateX(0);
background-color: var(--ifm-menu-color-background-active);
border-radius: var(--ifm-global-radius);
}

.mobileTocCloseButton {
position: absolute;
top: 0.5rem;
right: 1rem;
height: 2.5rem;
width: 2.5rem;
box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 100%;
color: var(--ifm-color-gray-900);
padding: 0;
font-size: 2rem;
line-height: 1;
.mobileTocButton {
background: none;
border: none;
font-size: inherit;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.8rem;
width: 100%;
color: inherit;
}

.mobileTocOpenButton {
position: fixed;
top: 0;
left: 0;
border: none;
border-radius: 100% 0 0 100%;
height: 2.5rem;
width: 2.5rem;
box-shadow: -3px 3px 4px rgba(0, 0, 0, 0.1);
transform: translateX(-100%);
.mobileTocButton:after {
content: '';
background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
filter: var(--ifm-menu-link-sublist-icon-filter);
height: 1.25rem;
width: 1.25rem;
transform: rotate(180deg);
transition: transform var(--ifm-transition-fast);
}

.mobileTocContent {
height: 100%;
overflow-y: auto;
height: 0;
overflow: hidden;
}

.mobileTocContent > ul {
font-weight: var(--ifm-font-weight-semibold);
font-size: 16px;
width: calc(100% - 3.5rem);
border-left: none;
border-top: 1px solid var(--ifm-color-emphasis-300);
padding: 0.2rem 0;
font-size: 15px;
}

.mobileTocContent ul li {
margin: 0.4rem 0.8rem;
}

.mobileTocOverlay {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.6);
z-index: calc(var(--ifm-z-index-fixed) + 1);
transition: opacity 100ms ease-in-out;
.mobileTocExpanded .mobileTocButton:after {
transform: none;
}

.mobileTocOverlayOpened {
opacity: 1;
pointer-events: all;
.mobileTocExpanded .mobileTocContent {
height: auto;
}
}
81 changes: 78 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,25 @@
import React, {useCallback, useState, useEffect} from 'react';
import clsx from 'clsx';

import {useLocation} from '@docusaurus/router';
import SearchBar from '@theme/SearchBar';
import Toggle from '@theme/Toggle';
import useThemeContext from '@theme/hooks/useThemeContext';
import {useThemeConfig} from '@docusaurus/theme-common';
import {
useThemeConfig,
useDocsPreferredVersion,
} from '@docusaurus/theme-common';
import useHideableNavbar from '@theme/hooks/useHideableNavbar';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import {
useActivePlugin,
useLatestVersion,
useActiveDocContext,
useActiveDocSidebar,
} from '@theme/hooks/useDocs';
import useWindowSize from '@theme/hooks/useWindowSize';
import NavbarItem from '@theme/NavbarItem';
import {DocSidebarItem} from '@theme/DocSidebar';
import Logo from '@theme/Logo';
import IconMenu from '@theme/IconMenu';

Expand Down Expand Up @@ -43,11 +54,31 @@ function Navbar(): JSX.Element {
const {
navbar: {items, hideOnScroll, style},
colorMode: {disableSwitch: disableColorModeSwitch},
sidebarCollapsible,
} = useThemeConfig();
const [sidebarShown, setSidebarShown] = useState(false);
const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
const {isDesktop} = useWindowSize();

// TODO: need to refactor this
const plugin = useActivePlugin({failfast: false});
const pluginId = plugin ? plugin.pluginId : undefined;
const {activeVersion, activeDoc = {}} = useActiveDocContext(pluginId);
const {preferredVersion} = useDocsPreferredVersion(pluginId);
const latestVersion = useLatestVersion(pluginId);
const version = activeVersion ?? preferredVersion ?? latestVersion;
const doc = version.docs.find((versionDoc) => versionDoc.id === activeDoc.id);
const isMainDoc =
version.mainDocId === activeDoc.id && activeDoc?.sidebar === doc.sidebar;
const firstDocInActiveSidebar =
activeVersion?.sidebars[doc?.sidebar]?.some(
(i) => i.href === activeDoc.pathname,
) || false;
const showDocSidebar = isMainDoc || firstDocInActiveSidebar;
const {sidebar} = useActiveDocSidebar(pluginId);
const {pathname} = useLocation();
const [mainMenuShown, setMainMenuShown] = useState(!showDocSidebar);
const toggleSidebar = useCallback(() => {
setSidebarShown(!sidebarShown);
}, [sidebarShown]);
Expand All @@ -64,6 +95,12 @@ function Navbar(): JSX.Element {
}
}, [isDesktop]);

useEffect(() => {
if (!sidebarShown) {
setMainMenuShown(false);
}
}, [sidebarShown]);

useLockBodyScroll(sidebarShown);

return (
Expand Down Expand Up @@ -128,19 +165,57 @@ function Navbar(): JSX.Element {
<Toggle checked={isDarkTheme} onChange={onToggleChange} />
)}
</div>
<div className="navbar-sidebar__items">

<div
className={clsx('navbar-sidebar__items', styles.menuWrapper, {
[styles.menuWrapperDocShown]: !mainMenuShown,
})}>
<div className="menu">
<ul className="menu__list">
{items.map((item, i) => (
<NavbarItem
mobile
{...(item as any)} // TODO fix typing
onClick={toggleSidebar}
onClick={() => {
// Not sure in this behavior.
if (activeDoc.id === (item as any).docId) {
setMainMenuShown(false);
return;
}

toggleSidebar();
}}
key={i}
/>
))}
</ul>
</div>

<div className={styles.docSidebarMenu}>
<button
type="button"
className={clsx(
'button button--secondary button--block margin-bottom--md ',
styles.backButton,
)}
onClick={() => setMainMenuShown(true)}>
← Back to main menu
</button>

{showDocSidebar && (
<ul className="menu__list">
{sidebar.map((item) => (
<DocSidebarItem
key={item.label}
item={item}
collapsible={sidebarCollapsible}
activePath={pathname}
onItemClick={() => setSidebarShown(false)}
/>
))}
</ul>
)}
</div>
</div>
</div>
</nav>
Expand Down
Loading

0 comments on commit 9f6ebff

Please sign in to comment.