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/user-menu.module.css

@@ -57,18 +57,71 @@
   flex-direction: column;
   gap: var(--Space-x2);
 
-  .closeModal {
+  .closeModalBtn {
     position: fixed;
-    top: var(--Space-x2);
-    right: var(--Space-x2);
+    top: calc(var(--Space-x2) + var(--sitewide-alert-height));
+    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);
   }
 }