docs: fix search bar not focused when using keyboard shortcut (#2999)

* docs: only render mobile search bar on mobile devices

* docs: prevent rendering desktop search bar on mobile devices

www/docs/src/theme/DocSidebar/Desktop/index.js

@@ -9,6 +9,7 @@ import DocSidebarItem from '@theme/DocSidebarItem';
 import SearchBar from '../../SearchBar';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import AnnouncementBar from '@theme/AnnouncementBar';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
@@ -20,6 +21,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   } = useThemeConfig();
   const isBrowser = useIsBrowser()
   const sidebarRef = useRef(null)
+  const windowSize = useWindowSize();
 
   useEffect(() => {
     if (isBrowser && sidebarRef.current) {
@@ -55,7 +57,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       ref={sidebarRef}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <div className={styles.sidebarSearchContainer}>
-        <SearchBar />
+        {windowSize !== 'mobile' && <SearchBar />}
       </div>
       <AnnouncementBar />
       <Content path={path} sidebar={sidebar} />

www/docs/src/theme/Navbar/Content/index.js

@@ -11,6 +11,8 @@ import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
+import {useWindowSize} from '@docusaurus/theme-common';
+
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
   return useThemeConfig().navbar.items;
@@ -36,6 +38,8 @@ export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
+  const windowSize = useWindowSize();
+
   return (
     <NavbarContentLayout
       left={
@@ -52,9 +56,11 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          <NavbarSearch>
+          {windowSize === 'mobile' && (
-            <SearchBar />
+            <NavbarSearch>
-          </NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />