fix mobile menu close

dannysrod · Jan 15, 2024 · 173ff2d · 173ff2d
1 parent d77d544
commit 173ff2d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 28 deletions.
diff --git a/app/src/client/admin/components/Header.tsx b/app/src/client/admin/components/Header.tsx
@@ -10,9 +10,10 @@ const Header = (props: {
 }) => {
   return (
     <header className='sticky top-0 z-999 flex w-full bg-white dark:bg-boxdark dark:drop-shadow-none'>
-      <div className='flex flex-grow items-center justify-end px-8 py-5 shadow '>
+      <div className='flex flex-grow items-center justify-between sm:justify-end sm:gap-5 px-8 py-5 shadow '>
         <div className='flex items-center gap-2 sm:gap-4 lg:hidden'>
-          {/* <!-- Hamburger Toggle BTN --> */} // TODO check mobile views
+          {/* <!-- Hamburger Toggle BTN --> */} 
+
           <button
             aria-controls='sidebar'
             onClick={(e) => {
@@ -53,14 +54,11 @@ const Header = (props: {
               </span>
             </span>
           </button>
+
           {/* <!-- Hamburger Toggle BTN --> */}
 
         </div>
 
-        {/* <div className='hidden sm:block'>
-        </div> */}
-
-        <div className='flex items-center gap-3 2xsm:gap-7'>
           <ul className='flex items-center gap-2 2xsm:gap-4'>
             {/* <!-- Dark Mode Toggler --> */}
             <DarkModeSwitcher />
@@ -71,6 +69,8 @@ const Header = (props: {
             {/* <!-- Chat Notification Area --> */}
           </ul>
 
+        <div className='flex items-center gap-3 2xsm:gap-7'>
+
           {/* <!-- User Area --> */}
           {!!props.user && <DropdownUser user={props.user} />}
           {/* <!-- User Area --> */}

diff --git a/app/src/client/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx
@@ -58,12 +58,11 @@ export default function AppNavBar() {
             </a>
           ))}
         </div>
-        <div className='hidden lg:flex lg:flex-1 lg:justify-end items-center'>
-          <div className='flex items-center gap-3 2xsm:gap-7'>
-            <ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
-              <DarkModeSwitcher />
-            </ul>
-          </div>
+        <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
+          <ul className='flex justify-center items-center gap-2 sm:gap-4'>
+            <DarkModeSwitcher />
+          </ul>
+
           {isUserLoading ? null : !user ? (
             <a
               href={!user ? '/login' : '/account'}
@@ -109,6 +108,7 @@ export default function AppNavBar() {
                   <a
                     key={item.name}
                     href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
                     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'
                   >
                     {item.name}
@@ -123,7 +123,7 @@ export default function AppNavBar() {
                     </div>
                   </Link>
                 ) : (
-                  <UserMenuItems user={user} />
+                  <UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen}/>
                 )}
               </div>
             </div>

diff --git a/app/src/client/components/DropdownUser.tsx b/app/src/client/components/DropdownUser.tsx
@@ -68,7 +68,7 @@ const DropdownUser = ({ user } : { user: Partial<User> }) => {
           dropdownOpen === true ? 'block' : 'hidden'
         }`}
       >
-        <UserMenuItems user={user} />
+        <UserMenuItems user={user} setMobileMenuOpen={toggleDropdown} />
       </div>
     </div>
   );

diff --git a/app/src/client/components/UserMenuItems.tsx b/app/src/client/components/UserMenuItems.tsx
@@ -4,23 +4,41 @@ import { TfiDashboard } from 'react-icons/tfi';
 import logout from '@wasp/auth/logout';
 import type { User } from '@wasp/entities';
 
-// TODO: make mobile-friendly
-export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
+export const UserMenuItems = ({
+  user,
+  setMobileMenuOpen,
+}: {
+  user?: Partial<User>;
+  setMobileMenuOpen?: any;
+}) => {
+  const path = window.location.pathname;
+
+  const handleMobileMenuClick = () => {
+    if (setMobileMenuOpen) setMobileMenuOpen(false);
+  }
+
   return (
     <>
-      <ul className='flex flex-col gap-5 border-b border-stroke px-6 py-4 dark:border-strokedark'>
-        <li>
-          <Link
-            to='/demo-app'
-            className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
-          >
-            <MdOutlineSpaceDashboard size='1.1rem' />
-            AI Scheduler (Demo App)
-          </Link>
-        </li>
+      <ul
+        className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
+          path === '/admin' ? 'px-6' : 'sm:px-6'
+        }`}
+      >
+        {path === '/' || path === '/admin' ? (
+          <li>
+            <Link
+              to='/demo-app'
+              className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
+            >
+              <MdOutlineSpaceDashboard size='1.1rem' />
+              AI Scheduler (Demo App)
+            </Link>
+          </li>
+        ) : null}
         <li>
           <Link
             to='/account'
+            onClick={handleMobileMenuClick}
             className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
           >
             <svg
@@ -45,10 +63,15 @@ export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
         </li>
       </ul>
       {!!user && user.isAdmin && (
-        <ul className='flex flex-col gap-5 border-b border-stroke px-6 py-4 dark:border-strokedark'>
+        <ul
+          className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
+            path === '/admin' ? 'px-6' : 'sm:px-6'
+          }`}
+        >
           <li className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'>
             <Link
               to='/admin'
+              onClick={handleMobileMenuClick}
               className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
             >
               <TfiDashboard size='1.1rem' />
@@ -59,7 +82,9 @@ export const UserMenuItems = ({ user }: { user?: Partial<User> }) => {
       )}
       <button
         onClick={() => logout()}
-        className='flex items-center gap-3.5 py-4 px-6 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
+        className={`flex items-center gap-3.5 py-4 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500 ${
+          path === '/admin' ? 'px-6' : 'sm:px-6'
+        }`}
       >
         <svg
           className='fill-current'

diff --git a/app/src/client/landing-page/LandingPage.tsx b/app/src/client/landing-page/LandingPage.tsx
@@ -115,6 +115,7 @@ export default function LandingPage() {
                     <a
                       key={item.name}
                       href={item.href}
+                      onClick={() => setMobileMenuOpen(false)}
                       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'
                     >
                       {item.name}
-Original file line number
+Diff line change
@@ Expand Up @@
               dropdownOpen === true ? 'block' : 'hidden'
             }`}
           >
-            <UserMenuItems user={user} />
+            <UserMenuItems user={user} setMobileMenuOpen={toggleDropdown} />
           </div>
         </div>
       );
@@ Expand Down @@