Skip to content

Commit 173ff2d

Browse files
vincangervincanger
committed
fix mobile menu close
1 parent d77d544 commit 173ff2d

File tree

5 files changed

+54
-28
lines changed

5 files changed

+54
-28
lines changed

‎app/src/client/admin/components/Header.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ const Header = (props: {
1010
}) => {
1111
return (
1212
<header className='sticky top-0 z-999 flex w-full bg-white dark:bg-boxdark dark:drop-shadow-none'>
13-
<div className='flex flex-grow items-center justify-end px-8 py-5 shadow '>
13+
<div className='flex flex-grow items-center justify-between sm:justify-end sm:gap-5 px-8 py-5 shadow '>
1414
<div className='flex items-center gap-2 sm:gap-4 lg:hidden'>
15-
{/* <!-- Hamburger Toggle BTN --> */} // TODO check mobile views
15+
{/* <!-- Hamburger Toggle BTN --> */}
16+
1617
<button
1718
aria-controls='sidebar'
1819
onClick={(e) => {
@@ -53,14 +54,11 @@ const Header = (props: {
5354
</span>
5455
</span>
5556
</button>
57+
5658
{/* <!-- Hamburger Toggle BTN --> */}
5759

5860
</div>
5961

60-
{/* <div className='hidden sm:block'>
61-
</div> */}
62-
63-
<div className='flex items-center gap-3 2xsm:gap-7'>
6462
<ul className='flex items-center gap-2 2xsm:gap-4'>
6563
{/* <!-- Dark Mode Toggler --> */}
6664
<DarkModeSwitcher />
@@ -71,6 +69,8 @@ const Header = (props: {
7169
{/* <!-- Chat Notification Area --> */}
7270
</ul>
7371

72+
<div className='flex items-center gap-3 2xsm:gap-7'>
73+
7474
{/* <!-- User Area --> */}
7575
{!!props.user && <DropdownUser user={props.user} />}
7676
{/* <!-- User Area --> */}

‎app/src/client/components/AppNavBar.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,11 @@ export default function AppNavBar() {
5858
</a>
5959
))}
6060
</div>
61-
<div className='hidden lg:flex lg:flex-1 lg:justify-end items-center'>
62-
<div className='flex items-center gap-3 2xsm:gap-7'>
63-
<ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
64-
<DarkModeSwitcher />
65-
</ul>
66-
</div>
61+
<div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
62+
<ul className='flex justify-center items-center gap-2 sm:gap-4'>
63+
<DarkModeSwitcher />
64+
</ul>
65+
6766
{isUserLoading ? null : !user ? (
6867
<a
6968
href={!user ? '/login' : '/account'}
@@ -109,6 +108,7 @@ export default function AppNavBar() {
109108
<a
110109
key={item.name}
111110
href={item.href}
111+
onClick={() => setMobileMenuOpen(false)}
112112
className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white hover:dark:bg-boxdark-2'
113113
>
114114
{item.name}
@@ -123,7 +123,7 @@ export default function AppNavBar() {
123123
</div>
124124
</Link>
125125
) : (
126-
<UserMenuItems user={user} />
126+
<UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen}/>
127127
)}
128128
</div>
129129
</div>

‎app/src/client/components/DropdownUser.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const DropdownUser = ({ user } : { user: Partial<User> }) => {
6868
dropdownOpen === true ? 'block' : 'hidden'
6969
}`}
7070
>
71-
<UserMenuItems user={user} />
71+
<UserMenuItems user={user} setMobileMenuOpen={toggleDropdown} />
7272
</div>
7373
</div>
7474
);

‎app/src/client/components/UserMenuItems.tsx‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,41 @@ import { TfiDashboard } from 'react-icons/tfi';
44
import logout from '@wasp/auth/logout';
55
import type { User } from '@wasp/entities';
66

7-
// TODO: make mobile-friendly
8-
export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
7+
export const UserMenuItems = ({
8+
user,
9+
setMobileMenuOpen,
10+
}: {
11+
user?: Partial<User>;
12+
setMobileMenuOpen?: any;
13+
}) => {
14+
const path = window.location.pathname;
15+
16+
const handleMobileMenuClick = () => {
17+
if (setMobileMenuOpen) setMobileMenuOpen(false);
18+
}
19+
920
return (
1021
<>
11-
<ul className='flex flex-col gap-5 border-b border-stroke px-6 py-4 dark:border-strokedark'>
12-
<li>
13-
<Link
14-
to='/demo-app'
15-
className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
16-
>
17-
<MdOutlineSpaceDashboard size='1.1rem' />
18-
AI Scheduler (Demo App)
19-
</Link>
20-
</li>
22+
<ul
23+
className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
24+
path === '/admin' ? 'px-6' : 'sm:px-6'
25+
}`}
26+
>
27+
{path === '/' || path === '/admin' ? (
28+
<li>
29+
<Link
30+
to='/demo-app'
31+
className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
32+
>
33+
<MdOutlineSpaceDashboard size='1.1rem' />
34+
AI Scheduler (Demo App)
35+
</Link>
36+
</li>
37+
) : null}
2138
<li>
2239
<Link
2340
to='/account'
41+
onClick={handleMobileMenuClick}
2442
className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
2543
>
2644
<svg
@@ -45,10 +63,15 @@ export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
4563
</li>
4664
</ul>
4765
{!!user && user.isAdmin && (
48-
<ul className='flex flex-col gap-5 border-b border-stroke px-6 py-4 dark:border-strokedark'>
66+
<ul
67+
className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
68+
path === '/admin' ? 'px-6' : 'sm:px-6'
69+
}`}
70+
>
4971
<li className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'>
5072
<Link
5173
to='/admin'
74+
onClick={handleMobileMenuClick}
5275
className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
5376
>
5477
<TfiDashboard size='1.1rem' />
@@ -59,7 +82,9 @@ export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
5982
)}
6083
<button
6184
onClick={() => logout()}
62-
className='flex items-center gap-3.5 py-4 px-6 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
85+
className={`flex items-center gap-3.5 py-4 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500 ${
86+
path === '/admin' ? 'px-6' : 'sm:px-6'
87+
}`}
6388
>
6489
<svg
6590
className='fill-current'

‎app/src/client/landing-page/LandingPage.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export default function LandingPage() {
115115
<a
116116
key={item.name}
117117
href={item.href}
118+
onClick={() => setMobileMenuOpen(false)}
118119
className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2'
119120
>
120121
{item.name}

0 commit comments

Comments
 (0)