@@ -5,6 +5,7 @@ import React from 'react';
5
5
import Button from 'components/shared/button' ;
6
6
import Search from 'components/shared/search' ;
7
7
import useDarkMode from 'hooks/use-dark-mode' ;
8
+ import useToggleTheme from 'hooks/use-toggle-theme' ;
8
9
import SlackIcon from 'icons/slack.inline.svg' ;
9
10
import DarkLogo from 'images/logo.inline.svg' ;
10
11
import LightLogo from 'images/white-logo.inline.svg' ;
@@ -24,6 +25,10 @@ const searchIndices = [
24
25
25
26
const Header = ( { withSearch, isMobileMenuOpen, handleCloseClick, navigation, handleOverlay } ) => {
26
27
const isDarkMode = useDarkMode ( ) ;
28
+ const toggleTheme = useToggleTheme ( ) ;
29
+
30
+ const navigationWithoutTheme = navigation . filter ( ( item ) => ! item . isThemeToggle ) ;
31
+ const themeToggleItem = navigation . find ( ( item ) => item . isThemeToggle ) ;
27
32
28
33
return (
29
34
< div className = "relative z-20" >
@@ -74,8 +79,21 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
74
79
</ Button >
75
80
</ div >
76
81
</ div >
77
- < div className = "flex items-center [@media(min-width:1210px)]:hidden space-x-6 " >
82
+ < div className = "flex items-center [@media(min-width:1210px)]:hidden space-x-3 " >
78
83
{ withSearch && ! isMobileMenuOpen && < Search indices = { searchIndices } /> }
84
+
85
+ { /* Theme toggle button for mobile */ }
86
+ { themeToggleItem && (
87
+ < button
88
+ type = "button"
89
+ className = "flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800"
90
+ aria-label = "Toggle theme"
91
+ onClick = { toggleTheme }
92
+ >
93
+ < themeToggleItem . name className = "h-5 w-5" />
94
+ </ button >
95
+ ) }
96
+
79
97
< Burger isToggled = { isMobileMenuOpen } onClick = { handleCloseClick } />
80
98
</ div >
81
99
</ div >
@@ -96,7 +114,7 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
96
114
type = "button"
97
115
className = "flex items-center -ml-2 justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 theme-toggle"
98
116
aria-label = "Toggle theme"
99
- onClick = { item . onClick }
117
+ onClick = { toggleTheme }
100
118
>
101
119
< ThemeIcon className = "h-5 w-5" />
102
120
</ button >
@@ -112,7 +130,7 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
112
130
</ Container >
113
131
</ header >
114
132
< MobileMenu
115
- navigation = { navigation }
133
+ navigation = { navigationWithoutTheme }
116
134
isOpen = { isMobileMenuOpen }
117
135
handleOverlay = { handleOverlay }
118
136
handleCloseClick = { handleCloseClick }
0 commit comments