Skip to content

Commit a462588

Browse files
committed
refactor: move color mode toggle in navbar on mobiles
1 parent 4103fef commit a462588

File tree

4 files changed

+26
-29
lines changed

4 files changed

+26
-29
lines changed

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

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import {
1414
splitNavbarItems,
1515
useNavbarMobileSidebar,
1616
useThemeConfig,
17+
useWindowSize,
1718
} from '@docusaurus/theme-common';
1819
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
1920
import NavbarLogo from '@theme/Navbar/Logo';
20-
import styles from './styles.module.css';
2121

2222
function useNavbarItems() {
2323
// TODO temporary casting until ThemeConfig type is improved
@@ -51,11 +51,27 @@ function NavbarContentLayout({
5151

5252
export default function NavbarContent(): JSX.Element {
5353
const mobileSidebar = useNavbarMobileSidebar();
54+
const windowSize = useWindowSize();
55+
const isMobile = windowSize === 'mobile';
5456

5557
const items = useNavbarItems();
5658
const [leftItems, rightItems] = splitNavbarItems(items);
59+
const isSearchItem = (item: NavbarItemConfig) => item.type === 'search';
60+
const hasExplicitSearchItem = items.some(isSearchItem);
5761

58-
const autoAddSearchBar = !items.some((item) => item.type === 'search');
62+
const rightMostItems = [
63+
<NavbarColorModeToggle
64+
key="toggle"
65+
className={isMobile ? 'margin-left--sm' : undefined}
66+
/>,
67+
(!hasExplicitSearchItem || isMobile) && <SearchBar />,
68+
];
69+
if (isMobile) {
70+
[rightMostItems[0], rightMostItems[1]] = [
71+
rightMostItems[1],
72+
rightMostItems[0],
73+
];
74+
}
5975

6076
return (
6177
<NavbarContentLayout
@@ -64,16 +80,21 @@ export default function NavbarContent(): JSX.Element {
6480
<>
6581
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
6682
<NavbarLogo />
67-
<NavbarItems items={leftItems} />
83+
<NavbarItems
84+
items={
85+
isMobile && hasExplicitSearchItem
86+
? leftItems.filter((item) => !isSearchItem(item))
87+
: leftItems
88+
}
89+
/>
6890
</>
6991
}
7092
right={
7193
// TODO stop hardcoding items?
7294
// Ask the user to add the respective navbar items => more flexible
7395
<>
7496
<NavbarItems items={rightItems} />
75-
<NavbarColorModeToggle className={styles.colorModeToggle} />
76-
{autoAddSearchBar && <SearchBar />}
97+
{rightMostItems}
7798
</>
7899
}
79100
/>

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
*/
77

88
import React from 'react';
9-
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
109
import IconClose from '@theme/IconClose';
1110
import NavbarLogo from '@theme/Navbar/Logo';
1211
import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
@@ -27,7 +26,6 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
2726
return (
2827
<div className="navbar-sidebar__brand">
2928
<NavbarLogo />
30-
<NavbarColorModeToggle className="margin-right--md" />
3129
<CloseButton />
3230
</div>
3331
);

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,6 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
@media (max-width: 996px) {
9-
.searchBox {
10-
position: absolute;
11-
right: var(--ifm-navbar-padding-horizontal);
12-
}
13-
}
14-
158
@media (min-width: 997px) {
169
.searchBox {
1710
padding: var(--ifm-navbar-item-padding-vertical)

0 commit comments

Comments
 (0)