refactor: move color mode toggle in navbar on mobiles

Author: lex111

packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx

@@ -14,10 +14,10 @@ import {
   splitNavbarItems,
   useNavbarMobileSidebar,
   useThemeConfig,
+  useWindowSize,
 } from '@docusaurus/theme-common';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
-import styles from './styles.module.css';
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -51,11 +51,27 @@ function NavbarContentLayout({
 
 export default function NavbarContent(): JSX.Element {
   const mobileSidebar = useNavbarMobileSidebar();
+  const windowSize = useWindowSize();
+  const isMobile = windowSize === 'mobile';
 
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
+  const isSearchItem = (item: NavbarItemConfig) => item.type === 'search';
+  const hasExplicitSearchItem = items.some(isSearchItem);
 
-  const autoAddSearchBar = !items.some((item) => item.type === 'search');
+  const rightMostItems = [
+    <NavbarColorModeToggle
+      key="toggle"
+      className={isMobile ? 'margin-left--sm' : undefined}
+    />,
+    (!hasExplicitSearchItem || isMobile) && <SearchBar />,
+  ];
+  if (isMobile) {
+    [rightMostItems[0], rightMostItems[1]] = [
+      rightMostItems[1],
+      rightMostItems[0],
+    ];
+  }
 
   return (
     <NavbarContentLayout
@@ -64,16 +80,21 @@ export default function NavbarContent(): JSX.Element {
         <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-          <NavbarItems items={leftItems} />
+          <NavbarItems
+            items={
+              isMobile && hasExplicitSearchItem
+                ? leftItems.filter((item) => !isSearchItem(item))
+                : leftItems
+            }
+          />
         </>
       }
       right={
         // TODO stop hardcoding items?
         // Ask the user to add the respective navbar items => more flexible
         <>
           <NavbarItems items={rightItems} />
-          <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && <SearchBar />}
+          {rightMostItems}
         </>
       }
     />

packages/docusaurus-theme-classic/src/theme/Navbar/Content/styles.module.css

@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import IconClose from '@theme/IconClose';
 import NavbarLogo from '@theme/Navbar/Logo';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
@@ -27,7 +26,6 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
   return (
     <div className="navbar-sidebar__brand">
       <NavbarLogo />
-      <NavbarColorModeToggle className="margin-right--md" />
       <CloseButton />
     </div>
   );

packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -5,13 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@media (max-width: 996px) {
-  .searchBox {
-    position: absolute;
-    right: var(--ifm-navbar-padding-horizontal);
-  }
-}
-
 @media (min-width: 997px) {
   .searchBox {
     padding: var(--ifm-navbar-item-padding-vertical)