3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-04 12:47:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): use Collapsible for mobile nav items (#5145)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-07-13 11:00:00 +03:00 • committed by GitHub
parent bb4ce1a54b
commit dd035088c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
View file

@ -10,7 +10,11 @@ import clsx from 'clsx';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import {useLocation} from '@docusaurus/router'; import {useLocation} from '@docusaurus/router';
import {isSamePath} from '@docusaurus/theme-common'; import {
isSamePath,
useCollapsible,
Collapsible,
} from '@docusaurus/theme-common';
import type { import type {
NavLinkProps, NavLinkProps,
DesktopOrMobileNavBarItemProps, DesktopOrMobileNavBarItemProps,
@ -167,11 +171,11 @@ function NavItemMobile({
position: _position, // Need to destructure position from props so that it doesn't get passed on. position: _position, // Need to destructure position from props so that it doesn't get passed on.
...props ...props
}: DesktopOrMobileNavBarItemProps) { }: DesktopOrMobileNavBarItemProps) {
const menuListRef = useRef<HTMLUListElement>(null);
const {pathname} = useLocation(); const {pathname} = useLocation();
const [collapsed, setCollapsed] = useState( const {collapsed, toggleCollapsed} = useCollapsible({
() => !items?.some((item) => isSamePath(item.to, pathname)) ?? true, initialState: () =>
); !items?.some((item) => isSamePath(item.to, pathname)) ?? true,
});
const navLinkClassNames = (extraClassName?: string, isSubList = false) => const navLinkClassNames = (extraClassName?: string, isSubList = false) =>
clsx( clsx(
@ -190,10 +194,6 @@ function NavItemMobile({
); );
} }
const menuListHeight = menuListRef.current?.scrollHeight
? `${menuListRef.current?.scrollHeight}px`
: undefined;
return ( return (
<li <li
className={clsx('menu__list-item', { className={clsx('menu__list-item', {
@ -205,16 +205,11 @@ function NavItemMobile({
{...props} {...props}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setCollapsed((state) => !state); toggleCollapsed();
}}> }}>
{props.children ?? props.label} {props.children ?? props.label}
</NavLink> </NavLink>
<ul <Collapsible as="ul" className="menu__list" collapsed={collapsed}>
className="menu__list"
ref={menuListRef}
style={{
height: !collapsed ? menuListHeight : undefined,
}}>
{items.map(({className: childItemClassName, ...childItemProps}, i) => ( {items.map(({className: childItemClassName, ...childItemProps}, i) => (
<li className="menu__list-item" key={i}> <li className="menu__list-item" key={i}>
<NavLink <NavLink
@ -225,7 +220,7 @@ function NavItemMobile({
/> />
</li> </li>
))} ))}
</ul> </Collapsible>
</li> </li>
); );
} }