Enable filter on mobiles

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -227,8 +227,12 @@ declare module '@theme/DocSidebar/Desktop/CollapseButton' {
   export default function CollapseButton(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocSidebar/Desktop/Filter' {
+declare module '@theme/DocSidebar/Common/Filter' {
-  export default function Filter(): JSX.Element;
+  export interface Props {
+    readonly className?: string;
+  }
+
+  export default function Filter(props: Props): JSX.Element;
 }
 
 declare module '@theme/DocSidebarItem' {

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

@@ -8,14 +8,15 @@
 import React from 'react';
 import clsx from 'clsx';
 import {useDocsFilter} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocSidebar/Desktop/Filter';
 
 import styles from './styles.module.css';
 
-function Filter(): JSX.Element {
+function Filter({className}: Props): JSX.Element {
   const {setFilterTerm, filterTerm = ''} = useDocsFilter();
 
   return (
-    <div className={styles.filter}>
+    <div className={clsx(styles.filter, className)}>
       <input
         placeholder="Filter by title" // todo: i18n
         type="text"

packages/docusaurus-theme-classic/src/theme/DocSidebar/Common/Filter/styles.module.css

@@ -9,7 +9,6 @@
   --docusaurus-clear-filter-icon: 1rem;
 
   position: relative;
-  padding: 0.5rem;
 }
 
 .filterInput {

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

@@ -11,7 +11,7 @@ import {useThemeConfig} from '@docusaurus/theme-common';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
-import Filter from '@theme/DocSidebar/Desktop/Filter';
+import Filter from '@theme/DocSidebar/Common/Filter';
 import type {Props} from '@theme/DocSidebar/Desktop';
 
 import styles from './styles.module.css';
@@ -31,7 +31,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
         isHidden && styles.sidebarHidden,
       )}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      {filterableSidebar && <Filter />}
+      {filterableSidebar && <Filter className={styles.filter} />}
       <Content path={path} sidebar={sidebar} />
       {hideableSidebar && <CollapseButton onClick={onCollapse} />}
     </div>

packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css

@@ -43,6 +43,10 @@
     margin-right: 0.5rem;
     height: 2rem;
   }
+
+  .filter {
+    padding: 0.5rem;
+  }
 }
 
 .sidebarLogo {

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

@@ -8,37 +8,49 @@
 import React from 'react';
 import clsx from 'clsx';
 import {
+  useThemeConfig,
   NavbarSecondaryMenuFiller,
   type NavbarSecondaryMenuComponent,
   ThemeClassNames,
   useNavbarMobileSidebar,
+  useDocsFilter,
+  filterDocsSidebar,
 } from '@docusaurus/theme-common';
 import DocSidebarItems from '@theme/DocSidebarItems';
+import Filter from '@theme/DocSidebar/Common/Filter';
 import type {Props} from '@theme/DocSidebar/Mobile';
 
+import styles from './styles.module.css';
+
 // eslint-disable-next-line react/function-component-definition
 const DocSidebarMobileSecondaryMenu: NavbarSecondaryMenuComponent<Props> = ({
   sidebar,
   path,
 }) => {
+  const {filterableSidebar} = useThemeConfig();
+  const {filterTerm} = useDocsFilter();
+  const filteredSidebar = filterDocsSidebar(sidebar, filterTerm);
   const mobileSidebar = useNavbarMobileSidebar();
   return (
-    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+    <>
-      <DocSidebarItems
+      {filterableSidebar && <Filter className={styles.filter} />}
-        items={sidebar}
+      <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
-        activePath={path}
+        <DocSidebarItems
-        onItemClick={(item) => {
+          items={filteredSidebar}
-          // Mobile sidebar should only be closed if the category has a link
+          activePath={path}
-          if (item.type === 'category' && item.href) {
+          onItemClick={(item) => {
-            mobileSidebar.toggle();
+            // Mobile sidebar should only be closed if the category has a link
-          }
+            if (item.type === 'category' && item.href) {
-          if (item.type === 'link') {
+              mobileSidebar.toggle();
-            mobileSidebar.toggle();
+            }
-          }
+            if (item.type === 'link') {
-        }}
+              mobileSidebar.toggle();
-        level={1}
+            }
-      />
+          }}
-    </ul>
+          level={1}
+        />
+      </ul>
+    </>
   );
 };
 

packages/docusaurus-theme-classic/src/theme/DocSidebar/Mobile/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.filter {
+  margin-bottom: 0.7rem;
+}