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
+                        <Button
-                          className={styles.closeModal}
+                          variant={"Text"}
+                          type="button"
+                          className={styles.closeModalBtn}
+                          aria-label={intl.formatMessage({
+                            defaultMessage: "Close menu",
+                          })}
                           onPress={close}
                         >
-                          <MaterialIcon
+                          <span className={styles.bar} />
-                            icon={"close"}
+                        </Button>
-                            size={32}
-                            color={"CurrentColor"}
-                          />
-                        </IconButton>
                         <UserMenuContent
                           firstName={firstName}
                           lastName={lastName}

apps/partner-sas/components/Menu/UserMenu/user-menu.module.css

@@ -57,18 +57,71 @@
   flex-direction: column;
   gap: var(--Space-x2);
 
-  .closeModal {
+  .closeModalBtn {
     position: fixed;
-    top: var(--Space-x2);
+    top: calc(var(--Space-x2) + var(--sitewide-alert-height));
-    right: var(--Space-x2);
+    right: var(--Space-x1);
     background-color: var(--TEMP-sas-default);
+    border: none;
     padding: var(--Space-x05);
     color: white;
+    justify-self: flex-start;
+    padding: 19px 8px 18px;
+    user-select: none;
 
     &:hover,
     &:hover:not(:disabled) {
       background-color: var(--TEMP-sas-default);
     }
+
+    .bar,
+    .bar::after,
+    .bar::before {
+      background: white;
+      border-radius: 2.3px;
+      display: block;
+      height: 3px;
+      position: relative;
+      width: 32px;
+    }
+    .bar {
+      background-color: transparent;
+    }
+
+    .bar::after,
+    .bar::before {
+      content: "";
+      left: 0;
+      position: absolute;
+      transform-origin: 2.286px center;
+    }
+
+    .bar::after {
+      top: -8px;
+      animation: openUpAfter 0.3s ease forwards;
+    }
+
+    .bar::before {
+      top: 8px;
+      animation: openUpBefore 0.3s ease forwards;
+    }
+  }
+}
+
+@keyframes openUpAfter {
+  to {
+    top: 0;
+    transform-origin: 50% 50%;
+    width: 32px;
+    transform: rotate(-45deg);
+  }
+}
+@keyframes openUpBefore {
+  to {
+    top: 0;
+    transform-origin: 50% 50%;
+    width: 32px;
+    transform: rotate(45deg);
   }
 }