@@ -14,10 +14,10 @@ import {
14
14
splitNavbarItems ,
15
15
useNavbarMobileSidebar ,
16
16
useThemeConfig ,
17
+ useWindowSize ,
17
18
} from '@docusaurus/theme-common' ;
18
19
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle' ;
19
20
import NavbarLogo from '@theme/Navbar/Logo' ;
20
- import styles from './styles.module.css' ;
21
21
22
22
function useNavbarItems ( ) {
23
23
// TODO temporary casting until ThemeConfig type is improved
@@ -51,11 +51,27 @@ function NavbarContentLayout({
51
51
52
52
export default function NavbarContent ( ) : JSX . Element {
53
53
const mobileSidebar = useNavbarMobileSidebar ( ) ;
54
+ const windowSize = useWindowSize ( ) ;
55
+ const isMobile = windowSize === 'mobile' ;
54
56
55
57
const items = useNavbarItems ( ) ;
56
58
const [ leftItems , rightItems ] = splitNavbarItems ( items ) ;
59
+ const isSearchItem = ( item : NavbarItemConfig ) => item . type === 'search' ;
60
+ const hasExplicitSearchItem = items . some ( isSearchItem ) ;
57
61
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
+ }
59
75
60
76
return (
61
77
< NavbarContentLayout
@@ -64,16 +80,21 @@ export default function NavbarContent(): JSX.Element {
64
80
< >
65
81
{ ! mobileSidebar . disabled && < NavbarMobileSidebarToggle /> }
66
82
< NavbarLogo />
67
- < NavbarItems items = { leftItems } />
83
+ < NavbarItems
84
+ items = {
85
+ isMobile && hasExplicitSearchItem
86
+ ? leftItems . filter ( ( item ) => ! isSearchItem ( item ) )
87
+ : leftItems
88
+ }
89
+ />
68
90
</ >
69
91
}
70
92
right = {
71
93
// TODO stop hardcoding items?
72
94
// Ask the user to add the respective navbar items => more flexible
73
95
< >
74
96
< NavbarItems items = { rightItems } />
75
- < NavbarColorModeToggle className = { styles . colorModeToggle } />
76
- { autoAddSearchBar && < SearchBar /> }
97
+ { rightMostItems }
77
98
</ >
78
99
}
79
100
/>
0 commit comments