Skip to content

Commit

Permalink
feat(v2): make dropdown menu collapsible on mobiles (#3553)
Browse files Browse the repository at this point in the history
* feat(v2): make dropdown menu collapsible on mobiles

* Add test
  • Loading branch information
lex111 authored Oct 8, 2020
1 parent a3ab9c1 commit 7290183
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 8 deletions.
22 changes: 22 additions & 0 deletions packages/docusaurus-theme-classic/src/__tests__/utils.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import {isSamePath} from '../utils';

describe('isSamePath', () => {
test('should be true for compared path without trailing slash', () => {
expect(isSamePath('/docs', '/docs')).toBeTruthy();
});

test('should be true for compared path with trailing slash', () => {
expect(isSamePath('/docs', '/docs')).toBeTruthy();
});

test('should be false for compared path with double trailing slash', () => {
expect(isSamePath('/docs', '/docs//')).toBeFalsy();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React, {useState, useCallback, useEffect, useRef} from 'react';
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useThemeConfig from '../../utils/useThemeConfig';
import {isSamePath} from '../../utils';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
Expand All @@ -30,12 +31,6 @@ function usePrevious(value) {
return ref.current;
}

// Compare the 2 paths, ignoring trailing /
const isSamePath = (path1, path2) => {
const normalize = (str) => (str.endsWith('/') ? str : `${str}/`);
return normalize(path1) === normalize(path2);
};

const isActiveSidebarItem = (item, activePath) => {
if (item.type === 'link') {
return isSamePath(item.href, activePath);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import React, {useState} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import {useLocation} from '@docusaurus/router';
import {isSamePath} from '../../utils';
import useOnClickOutside from 'use-onclickoutside';
import type {
NavLinkProps,
Expand Down Expand Up @@ -140,6 +142,11 @@ function NavItemMobile({
className,
...props
}: DesktopOrMobileNavBarItemProps) {
const {pathname} = useLocation();
const [collapsed, setCollapsed] = useState(
() => !items?.some((item) => isSamePath(item.to, pathname)) ?? true,
);

// Need to destructure position from props so that it doesn't get passed on.
const navLinkClassNames = (extraClassName?: string, isSubList = false) =>
clsx(
Expand All @@ -159,8 +166,16 @@ function NavItemMobile({
}

return (
<li className="menu__list-item">
<NavLink className={navLinkClassNames(className, true)} {...props}>
<li
className={clsx('menu__list-item', {
'menu__list-item--collapsed': collapsed,
})}>
<NavLink
className={navLinkClassNames(className, true)}
{...props}
onClick={() => {
setCollapsed((state) => !state);
}}>
{props.label}
</NavLink>
<ul className="menu__list">
Expand Down
12 changes: 12 additions & 0 deletions packages/docusaurus-theme-classic/src/utils/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

// Compare the 2 paths, ignoring trailing /
export const isSamePath = (path1, path2) => {
const normalize = (str) => (str.endsWith('/') ? str : `${str}/`);
return normalize(path1) === normalize(path2);
};

0 comments on commit 7290183

Please sign in to comment.