Merged in fix/SW-3528-hamburger-menu-partially-shown- (pull request #2936)

fix(SW-3528): Fixed hamburger menu icon visibility and animation

Approved-by: Anton Gunnarsson

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

@@ -14,8 +14,6 @@ import { useIntl } from "react-intl"
 import { Avatar } from "@scandic-hotels/design-system/Avatar"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -100,16 +98,17 @@ export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
                   <Dialog className={styles.dialog}>
                     {({ close }) => (
                       <>
-                        <IconButton
-                          className={styles.closeModal}
+                        <Button
+                          variant={"Text"}
+                          type="button"
+                          className={styles.closeModalBtn}
+                          aria-label={intl.formatMessage({
+                            defaultMessage: "Close menu",
+                          })}
                           onPress={close}
                         >
-                          <MaterialIcon
-                            icon={"close"}
-                            size={32}
-                            color={"CurrentColor"}
-                          />
-                        </IconButton>
+                          <span className={styles.bar} />
+                        </Button>
                         <UserMenuContent
                           firstName={firstName}
                           lastName={lastName}