feat(v2): make dropdown menu collapsible on mobiles

packages/docusaurus-theme-classic/src/__tests__/utils.test.js

@@ -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();
+  });
+});

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -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';
@@ -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);

packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -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,
@@ -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(
@@ -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">

packages/docusaurus-theme-classic/src/utils/index.ts

@@ -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);
+};