OPHJOD-1161: Fix mega menu not closing on mobile when user icon clicked

Opetushallitus · Jan 7, 2025 · 283280a · 283280a
1 parent 85db22f
commit 283280a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/MegaMenu/MegaMenu.tsx b/src/components/MegaMenu/MegaMenu.tsx
@@ -52,7 +52,7 @@ export const MegaMenu = ({ loggedIn, onClose, onLanguageClick, onLogout }: MegaM
               <LanguageButton onClick={onLanguageButtonClick} />
             </li>
             <li className="ml-3">
-              <UserButton onLogout={onLogout} />
+              <UserButton onLogout={onLogout} onClick={onClose} />
             </li>
           </>
         )}

diff --git a/src/components/UserButton/UserButton.tsx b/src/components/UserButton/UserButton.tsx
@@ -8,9 +8,10 @@ import { Link, NavLink, useLoaderData } from 'react-router';
 
 interface UserButtonProps {
   onLogout: () => void;
+  onClick?: () => void;
 }
 
-export const UserButton = ({ onLogout }: UserButtonProps) => {
+export const UserButton = ({ onLogout, onClick }: UserButtonProps) => {
   const {
     t,
     i18n: { language },
@@ -66,6 +67,11 @@ export const UserButton = ({ onLogout }: UserButtonProps) => {
       state={{ callbackURL: ' ' }}
       className="flex h-8 w-8 items-center justify-center rounded-full bg-bg-gray-2"
       aria-label={t('login')}
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        }
+      }}
     >
       <MdOutlinePerson size={24} />
     </Link>