Yangshun
3 years ago
parent
1c7b919f24
commit
835eb4d830
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"systemParams": "win32-x64-93",
|
||||||
|
"modulesFolders": [],
|
||||||
|
"flags": [],
|
||||||
|
"linkedModules": [],
|
||||||
|
"topLevelPatterns": [],
|
||||||
|
"lockfileEntries": {},
|
||||||
|
"files": [],
|
||||||
|
"artifacts": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
// Swizzled to add sidebar ad below mobile nav items.
|
||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import {
|
||||||
|
NavbarSecondaryMenuFiller,
|
||||||
|
ThemeClassNames,
|
||||||
|
useNavbarMobileSidebar,
|
||||||
|
} from '@docusaurus/theme-common';
|
||||||
|
import DocSidebarItems from '@theme/DocSidebarItems';
|
||||||
|
|
||||||
|
import SidebarAd from '../../../components/SidebarAd';
|
||||||
|
|
||||||
|
// eslint-disable-next-line react/function-component-definition
|
||||||
|
const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
|
||||||
|
const mobileSidebar = useNavbarMobileSidebar();
|
||||||
|
return (
|
||||||
|
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
||||||
|
<DocSidebarItems
|
||||||
|
items={sidebar}
|
||||||
|
activePath={path}
|
||||||
|
onItemClick={(item) => {
|
||||||
|
// Mobile sidebar should only be closed if the category has a link
|
||||||
|
if (item.type === 'category' && item.href) {
|
||||||
|
mobileSidebar.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.type === 'link') {
|
||||||
|
mobileSidebar.toggle();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
level={1}
|
||||||
|
/>
|
||||||
|
<div className="margin--md">
|
||||||
|
<SidebarAd position="mobile_sidebar" />
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function DocSidebarMobile(props) {
|
||||||
|
return (
|
||||||
|
<NavbarSecondaryMenuFiller
|
||||||
|
component={DocSidebarMobileSecondaryMenu}
|
||||||
|
props={props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(DocSidebarMobile);
|
||||||
@ -1,123 +0,0 @@
|
|||||||
import React, {useState} from 'react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import {
|
|
||||||
useThemeConfig,
|
|
||||||
useAnnouncementBar,
|
|
||||||
MobileSecondaryMenuFiller,
|
|
||||||
ThemeClassNames,
|
|
||||||
useScrollPosition,
|
|
||||||
useWindowSize,
|
|
||||||
} from '@docusaurus/theme-common';
|
|
||||||
import Logo from '@theme/Logo';
|
|
||||||
import IconArrow from '@theme/IconArrow';
|
|
||||||
import {translate} from '@docusaurus/Translate';
|
|
||||||
import {DocSidebarItems} from '@theme/DocSidebarItem';
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
import SidebarAd from '../../components/SidebarAd';
|
|
||||||
import CarbonAd from '../../components/CarbonAd';
|
|
||||||
|
|
||||||
function useShowAnnouncementBar() {
|
|
||||||
const {isActive} = useAnnouncementBar();
|
|
||||||
const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
|
|
||||||
useScrollPosition(
|
|
||||||
({scrollY}) => {
|
|
||||||
if (isActive) {
|
|
||||||
setShowAnnouncementBar(scrollY === 0);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[isActive],
|
|
||||||
);
|
|
||||||
return isActive && showAnnouncementBar;
|
|
||||||
}
|
|
||||||
|
|
||||||
function HideableSidebarButton({onClick}) {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title={translate({
|
|
||||||
id: 'theme.docs.sidebar.collapseButtonTitle',
|
|
||||||
message: 'Collapse sidebar',
|
|
||||||
description: 'The title attribute for collapse button of doc sidebar',
|
|
||||||
})}
|
|
||||||
aria-label={translate({
|
|
||||||
id: 'theme.docs.sidebar.collapseButtonAriaLabel',
|
|
||||||
message: 'Collapse sidebar',
|
|
||||||
description: 'The title attribute for collapse button of doc sidebar',
|
|
||||||
})}
|
|
||||||
className={clsx(
|
|
||||||
'button button--secondary button--outline',
|
|
||||||
styles.collapseSidebarButton,
|
|
||||||
)}
|
|
||||||
onClick={onClick}>
|
|
||||||
<IconArrow className={styles.collapseSidebarButtonIcon} />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
|
||||||
const showAnnouncementBar = useShowAnnouncementBar();
|
|
||||||
const {
|
|
||||||
navbar: {hideOnScroll},
|
|
||||||
hideableSidebar,
|
|
||||||
} = useThemeConfig();
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx(styles.sidebar, {
|
|
||||||
[styles.sidebarWithHideableNavbar]: hideOnScroll,
|
|
||||||
[styles.sidebarHidden]: isHidden,
|
|
||||||
})}>
|
|
||||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
|
||||||
<nav
|
|
||||||
className={clsx('menu thin-scrollbar', styles.menu, {
|
|
||||||
[styles.menuWithAnnouncementBar]: showAnnouncementBar,
|
|
||||||
})}>
|
|
||||||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
|
||||||
<DocSidebarItems items={sidebar} activePath={path} level={1} />
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
|
|
||||||
return (
|
|
||||||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
|
||||||
<DocSidebarItems
|
|
||||||
items={sidebar}
|
|
||||||
activePath={path}
|
|
||||||
onItemClick={() => toggleSidebar()}
|
|
||||||
level={1}
|
|
||||||
/>
|
|
||||||
<div className="margin--md">
|
|
||||||
<SidebarAd position="mobile_sidebar" />
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function DocSidebarMobile(props) {
|
|
||||||
return (
|
|
||||||
<MobileSecondaryMenuFiller
|
|
||||||
component={DocSidebarMobileSecondaryMenu}
|
|
||||||
props={props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
|
|
||||||
const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
|
|
||||||
export default function DocSidebar(props) {
|
|
||||||
const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
|
|
||||||
|
|
||||||
const shouldRenderSidebarDesktop =
|
|
||||||
windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
|
|
||||||
|
|
||||||
const shouldRenderSidebarMobile = windowSize === 'mobile';
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
|
|
||||||
{shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
:root {
|
|
||||||
--collapse-button-bg-color-dark: #2e333a;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 997px) {
|
|
||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: 100vh;
|
|
||||||
height: 100%;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
padding-top: var(--ifm-navbar-height);
|
|
||||||
width: var(--doc-sidebar-width);
|
|
||||||
transition: opacity 50ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarWithHideableNavbar {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarHidden {
|
|
||||||
opacity: 0;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarLogo {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 var(--ifm-navbar-padding-horizontal);
|
|
||||||
min-height: var(--ifm-navbar-height);
|
|
||||||
max-height: var(--ifm-navbar-height);
|
|
||||||
color: inherit !important;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarLogo img {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuWithAnnouncementBar {
|
|
||||||
margin-bottom: var(--docusaurus-announcement-bar-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapseSidebarButton {
|
|
||||||
display: block !important;
|
|
||||||
background-color: var(--ifm-button-background-color);
|
|
||||||
height: 40px;
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
border: 1px solid var(--ifm-toc-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapseSidebarButtonIcon {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
html[dir='rtl'] .collapseSidebarButtonIcon {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='dark'] .collapseSidebarButton {
|
|
||||||
background-color: var(--collapse-button-bg-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='dark'] .collapseSidebarButton:hover,
|
|
||||||
html[data-theme='dark'] .collapseSidebarButton:focus {
|
|
||||||
background-color: var(--ifm-color-emphasis-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarLogo,
|
|
||||||
.collapseSidebarButton {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarMenuIcon {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarMenuCloseIcon {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: var(--ifm-font-weight-bold);
|
|
||||||
line-height: 0.9;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
import React, {useEffect, memo} from 'react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import {
|
|
||||||
isSamePath,
|
|
||||||
usePrevious,
|
|
||||||
Collapsible,
|
|
||||||
useCollapsible,
|
|
||||||
ThemeClassNames,
|
|
||||||
} from '@docusaurus/theme-common';
|
|
||||||
import Link from '@docusaurus/Link';
|
|
||||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
|
||||||
import IconExternalLink from '@theme/IconExternalLink';
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
|
|
||||||
const isActiveSidebarItem = (item, activePath) => {
|
|
||||||
if (item.type === 'link') {
|
|
||||||
return isSamePath(item.href, activePath);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.type === 'category') {
|
|
||||||
return item.items.some((subItem) =>
|
|
||||||
isActiveSidebarItem(subItem, activePath),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}; // Optimize sidebar at each "level"
|
|
||||||
// TODO this item should probably not receive the "activePath" props
|
|
||||||
// TODO this triggers whole sidebar re-renders on navigation
|
|
||||||
|
|
||||||
export const DocSidebarItems = memo(function DocSidebarItems({
|
|
||||||
items,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<DocSidebarItem
|
|
||||||
key={index} // sidebar is static, the index does not change
|
|
||||||
item={item}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
export default function DocSidebarItem({item, ...props}) {
|
|
||||||
switch (item.type) {
|
|
||||||
case 'category':
|
|
||||||
if (item.items.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <DocSidebarItemCategory item={item} {...props} />;
|
|
||||||
|
|
||||||
case 'link':
|
|
||||||
default:
|
|
||||||
return <DocSidebarItemLink item={item} {...props} />;
|
|
||||||
}
|
|
||||||
} // If we navigate to a category and it becomes active, it should automatically expand itself
|
|
||||||
|
|
||||||
function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
|
|
||||||
const wasActive = usePrevious(isActive);
|
|
||||||
useEffect(() => {
|
|
||||||
const justBecameActive = isActive && !wasActive;
|
|
||||||
|
|
||||||
if (justBecameActive && collapsed) {
|
|
||||||
setCollapsed(false);
|
|
||||||
}
|
|
||||||
}, [isActive, wasActive, collapsed]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarItemCategory({
|
|
||||||
item,
|
|
||||||
onItemClick,
|
|
||||||
activePath,
|
|
||||||
level,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const {items, label, collapsible, className} = item;
|
|
||||||
const isActive = isActiveSidebarItem(item, activePath);
|
|
||||||
const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
|
|
||||||
// active categories are always initialized as expanded
|
|
||||||
// the default (item.collapsed) is only used for non-active categories
|
|
||||||
initialState: () => {
|
|
||||||
if (!collapsible) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isActive ? false : item.collapsed;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
useAutoExpandActiveCategory({
|
|
||||||
isActive,
|
|
||||||
collapsed,
|
|
||||||
setCollapsed,
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docSidebarItemCategory,
|
|
||||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
|
||||||
'menu__list-item',
|
|
||||||
{
|
|
||||||
'menu__list-item--collapsed': collapsed,
|
|
||||||
},
|
|
||||||
className,
|
|
||||||
)}>
|
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
||||||
<a
|
|
||||||
className={clsx('menu__link', {
|
|
||||||
'menu__link--sublist': collapsible,
|
|
||||||
'menu__link--active': collapsible && isActive,
|
|
||||||
[styles.menuLinkText]: !collapsible,
|
|
||||||
})}
|
|
||||||
onClick={
|
|
||||||
collapsible
|
|
||||||
? (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
toggleCollapsed();
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
href={collapsible ? '#' : undefined}
|
|
||||||
{...props}>
|
|
||||||
{label}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
|
||||||
<DocSidebarItems
|
|
||||||
items={items}
|
|
||||||
tabIndex={collapsed ? -1 : 0}
|
|
||||||
onItemClick={onItemClick}
|
|
||||||
activePath={activePath}
|
|
||||||
level={level + 1}
|
|
||||||
/>
|
|
||||||
</Collapsible>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
|
|
||||||
const {href, label, className} = item;
|
|
||||||
const isActive = isActiveSidebarItem(item, activePath);
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docSidebarItemLink,
|
|
||||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
|
||||||
'menu__list-item',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
key={label}>
|
|
||||||
<Link
|
|
||||||
className={clsx('menu__link', {
|
|
||||||
'menu__link--active': isActive,
|
|
||||||
})}
|
|
||||||
aria-current={isActive ? 'page' : undefined}
|
|
||||||
to={href}
|
|
||||||
{...(isInternalUrl(href) && {
|
|
||||||
onClick: onItemClick,
|
|
||||||
})}
|
|
||||||
{...props}>
|
|
||||||
{isInternalUrl(href) ? (
|
|
||||||
label
|
|
||||||
) : (
|
|
||||||
<span>
|
|
||||||
{label}
|
|
||||||
<IconExternalLink />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@media (min-width: 997px) {
|
|
||||||
.menuLinkText {
|
|
||||||
cursor: initial;
|
|
||||||
}
|
|
||||||
.menuLinkText:hover {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue