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