Skip to content

Commit d5d8fdc

Browse files
authored
fix: navbar for mobile view (#680)
Signed-off-by: Anamika Aggarwal <[email protected]>
1 parent 041ee86 commit d5d8fdc

File tree

2 files changed

+32
-22
lines changed

2 files changed

+32
-22
lines changed

src/components/shared/header/header.jsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react';
55
import Button from 'components/shared/button';
66
import Search from 'components/shared/search';
77
import useDarkMode from 'hooks/use-dark-mode';
8+
import useToggleTheme from 'hooks/use-toggle-theme';
89
import SlackIcon from 'icons/slack.inline.svg';
910
import DarkLogo from 'images/logo.inline.svg';
1011
import LightLogo from 'images/white-logo.inline.svg';
@@ -24,6 +25,10 @@ const searchIndices = [
2425

2526
const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, handleOverlay }) => {
2627
const isDarkMode = useDarkMode();
28+
const toggleTheme = useToggleTheme();
29+
30+
const navigationWithoutTheme = navigation.filter((item) => !item.isThemeToggle);
31+
const themeToggleItem = navigation.find((item) => item.isThemeToggle);
2732

2833
return (
2934
<div className="relative z-20">
@@ -74,8 +79,21 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
7479
</Button>
7580
</div>
7681
</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">
7883
{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+
7997
<Burger isToggled={isMobileMenuOpen} onClick={handleCloseClick} />
8098
</div>
8199
</div>
@@ -96,7 +114,7 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
96114
type="button"
97115
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"
98116
aria-label="Toggle theme"
99-
onClick={item.onClick}
117+
onClick={toggleTheme}
100118
>
101119
<ThemeIcon className="h-5 w-5" />
102120
</button>
@@ -112,7 +130,7 @@ const Header = ({ withSearch, isMobileMenuOpen, handleCloseClick, navigation, ha
112130
</Container>
113131
</header>
114132
<MobileMenu
115-
navigation={navigation}
133+
navigation={navigationWithoutTheme}
116134
isOpen={isMobileMenuOpen}
117135
handleOverlay={handleOverlay}
118136
handleCloseClick={handleCloseClick}

src/components/shared/mobile-menu/mobile-menu.jsx

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { m, LazyMotion, domAnimation, useAnimation } from 'framer-motion';
33
import PropTypes from 'prop-types';
44
import React, { useEffect } from 'react';
55

6-
import useToggleTheme from 'hooks/use-toggle-theme';
76
import SlackIcon from 'icons/slack.inline.svg';
87

98
import Button from '../button';
@@ -54,8 +53,6 @@ const MobileMenu = ({ navigation, isOpen, handleOverlay, handleCloseClick }) =>
5453
}
5554
}, [isOpen, controls]);
5655

57-
const toggleTheme = useToggleTheme();
58-
5956
return (
6057
<LazyMotion features={domAnimation}>
6158
{isOpen && (
@@ -71,20 +68,24 @@ const MobileMenu = ({ navigation, isOpen, handleOverlay, handleCloseClick }) =>
7168
)}
7269

7370
<m.nav
74-
className="safe-paddings py-safe absolute max-h-[calc(100vh-5rem)] inset-x-0 top-20 flex w-full flex-col border-t border-gray-3 dark:border-gray-1 bg-white dark:bg-gray-900 shadow-lg xl:hidden"
71+
className="safe-paddings py-safe absolute inset-x-0 top-20 flex w-full flex-col border-t border-gray-3 dark:border-gray-1 bg-white dark:bg-gray-900 shadow-lg xl:hidden"
72+
style={{ maxHeight: 'calc(100vh - 5rem)' }}
7573
initial="from"
7674
animate={controls}
7775
variants={menuVariants}
7876
transition={{ duration: ANIMATION_DURATION }}
7977
>
80-
<ul className="flex flex-col flex-grow h-full px-4 overflow-x-hidden divide-y divide-gray-3 dark:divide-gray-1 md:px-6 lg:px-10">
81-
{navigation.map((item, index) => (
82-
<MenuItem {...item} key={index} handleCloseClick={handleCloseClick} />
83-
))}
84-
</ul>
78+
<div className="flex-1 min-h-0">
79+
<ul className="flex flex-col h-full px-4 overflow-y-auto divide-y divide-gray-3 dark:divide-gray-1 md:px-6 lg:px-10">
80+
{navigation.map((item, index) => (
81+
<MenuItem {...item} key={index} handleCloseClick={handleCloseClick} />
82+
))}
83+
</ul>
84+
</div>
85+
8586
<div
8687
className={classNames(
87-
'mt-auto flex flex-col items-center space-y-3 border-t border-gray-3 dark:border-gray-1 bg-gray-4 dark:bg-[#0f1d3e] px-4 py-[33px]',
88+
'flex-shrink-0 flex flex-col items-center space-y-3 border-t border-gray-3 dark:border-gray-1 bg-gray-4 dark:bg-[#0f1d3e] px-4 py-4',
8889
'xs:flex-row xs:items-stretch xs:justify-center xs:space-y-0 xs:space-x-4'
8990
)}
9091
>
@@ -100,15 +101,6 @@ const MobileMenu = ({ navigation, isOpen, handleOverlay, handleCloseClick }) =>
100101
<SlackIcon className="w-4 h-4" />
101102
<span className="ml-1.5 block dark:text-gray-2 text-black">Join Slack</span>
102103
</Button>
103-
104-
<Button
105-
className="inline-flex items-center leading-none bg-white dark:bg-gray-800"
106-
theme="outline-gray"
107-
size="xs"
108-
onClick={toggleTheme}
109-
>
110-
<span className="ml-1.5 block dark:text-gray-2 text-black">Change Theme</span>
111-
</Button>
112104
</div>
113105
</m.nav>
114106
</LazyMotion>

0 commit comments

Comments
 (0)