Merged in fix/sw-3645-mobile-menu-overlap (pull request #3260)

fix(SW-3645): Use same close button for mobile menus

* Use same close button for mobile menus


Approved-by: Linus Flood

apps/partner-sas/components/Menu/UserMenu/index.tsx

@@ -24,7 +24,15 @@ import { getInitials } from "../utils"
 
 import styles from "./user-menu.module.css"
 
-export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
+export function UserMenu({
+  isMobile = false,
+  onOpenChange,
+  isOpen,
+}: {
+  isMobile?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  isOpen?: boolean
+}) {
   const intl = useIntl()
   const lang = useLang()
   const session = useSession()
@@ -76,8 +84,8 @@ export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
         </a>
       )}
       {session.status === "authenticated" && isSuccess && profileData && (
-        <div className={styles.loggedInMenu}>
-          <DialogTrigger>
+        <div>
+          <DialogTrigger onOpenChange={onOpenChange} isOpen={isOpen}>
             <Button className={styles.userName} variant={"Text"}>
               <Avatar
                 className={styles.avatar}
@@ -100,28 +108,12 @@ export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
               <ModalOverlay isDismissable>
                 <Modal className={styles.modal}>
                   <Dialog className={styles.dialog}>
-                    {({ close }) => (
-                      <>
-                        <Button
-                          variant={"Text"}
-                          type="button"
-                          className={styles.closeModalBtn}
-                          aria-label={intl.formatMessage({
-                            id: "header.closeMenu",
-                            defaultMessage: "Close menu",
-                          })}
-                          onPress={close}
-                        >
-                          <span className={styles.bar} />
-                        </Button>
-                        <UserMenuContent
-                          firstName={firstName}
-                          lastName={lastName}
-                          points={profileData.points.total}
-                          isMobile={true}
-                        />
-                      </>
-                    )}
+                    <UserMenuContent
+                      firstName={firstName}
+                      lastName={lastName}
+                      points={profileData.points.total}
+                      isMobile={true}
+                    />
                   </Dialog>
                 </Modal>
               </ModalOverlay>