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/MobileMenu/index.tsx

@@ -12,6 +12,7 @@ import styles from "./mobile-menu.module.css"
 
 export function MobileMenu({ children }: React.PropsWithChildren) {
   const intl = useIntl()
+  const [state, setState] = useState<"nav" | "user" | "closed">("closed")
 
   const closeMsg = intl.formatMessage({
     id: "header.closeMenu",
@@ -22,24 +23,31 @@ export function MobileMenu({ children }: React.PropsWithChildren) {
     defaultMessage: "Open menu",
   })
 
-  const [isOpen, setIsOpen] = useState(false)
-
+  const isOpen = state !== "closed"
   return (
     <div className={styles.mobileMenu}>
-      <UserMenu isMobile={true} />
-      <Button
-        variant={"Text"}
-        type="button"
-        className={`${styles.hamburger} ${isOpen ? styles.isExpanded : ""}`}
-        aria-label={isOpen ? closeMsg : openMsg}
-        onPress={() => {
-          window.scrollTo(0, 0)
-          setIsOpen(!isOpen)
+      <UserMenu
+        isMobile={true}
+        isOpen={state === "user"}
+        onOpenChange={(open) => {
+          setState(open ? "user" : "closed")
         }}
-      >
-        <span className={styles.bar} />
-      </Button>
-      <Modal className={styles.modal} isOpen={isOpen}>
+      />
+      <div id="close-menu-container" style={{ position: "relative" }}>
+        <Button
+          variant={"Text"}
+          type="button"
+          className={`${styles.hamburger} ${isOpen ? styles.isExpanded : ""}`}
+          aria-label={isOpen ? closeMsg : openMsg}
+          onPress={() => {
+            window.scrollTo(0, 0)
+            setState(isOpen ? "closed" : "nav")
+          }}
+        >
+          <span className={styles.bar} />
+        </Button>
+      </div>
+      <Modal className={styles.modal} isOpen={state === "nav"}>
         <Dialog
           className={styles.dialog}
           aria-label={intl.formatMessage({