fix: close mobile menu on search click

Author: katzino

apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx

@@ -13,6 +13,11 @@ export default function NavbarMobileSidebarHeader() {
     const { navbar: { items } } = useThemeConfig();
     const searchBarItem = items.find((item) => item.type === 'search');
 
+    function onSearchClick(event) {
+        event.preventDefault();
+        mobileSidebar.toggle();
+    }
+
     return (
         <>
             <div className="navbar-sidebar__brand">
@@ -31,7 +36,7 @@ export default function NavbarMobileSidebarHeader() {
                     <NavbarCTA />
                     {!searchBarItem && (
                         <NavbarSearch>
-                            <SearchBar />
+                            <SearchBar onClick={onSearchClick} />
                         </NavbarSearch>
                     )}
                 </div>

apify-docs-theme/src/theme/SearchBar/index.js

@@ -40,7 +40,7 @@ export function Link(props) {
     return <a {...props}>{props.children}</a>;
 }
 
-export default function SearchBar() {
+export default function SearchBar({ onClick }) {
     const { siteConfig } = useDocusaurusContext();
     const location = useLocation();
     const history = useHistory();
@@ -62,13 +62,17 @@ export default function SearchBar() {
 
     return (
         <BrowserOnly>
-            {() => <ApifySearch
-                algoliaAppId={siteConfig.themeConfig.algolia.appId}
-                algoliaIndexName='test_test_apify_sdk'
-                algoliaKey={siteConfig.themeConfig.algolia.apiKey}
-                filters={`version:${getVersion()}`}
-                navigate={navigate}
-            />}
+            {() => (
+                <div onClick={onClick}>
+                    <ApifySearch
+                        algoliaAppId={siteConfig.themeConfig.algolia.appId}
+                        algoliaIndexName='test_test_apify_sdk'
+                        algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+                        filters={`version:${getVersion()}`}
+                        navigate={navigate}
+                    />
+                </div>
+            )}
         </BrowserOnly>
     );
 }