fix(SW-184): using store for state-handling of menus

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -1,3 +1,7 @@
+.myPagesMenu {
+  position: relative;
+}
+
 .button {
   font-weight: 600;
 }
@@ -10,7 +14,7 @@
   transform: rotate(180deg);
 }
 
-.myPagesMenu {
+.dropdown {
   position: absolute;
   top: 46px;
   right: 0;
@@ -18,11 +22,25 @@
   padding: var(--Spacing-x2) var(--Spacing-x4);
   border-radius: var(--Corner-radius-Large);
   box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  min-width: 20rem;
   z-index: 1;
   display: none;
 }
 
-.myPagesMenu.isExpanded {
+/* Triangle above dropdown */
+.dropdown::before {
+  content: "";
+  position: absolute;
+  top: -1.25rem;
+  right: 2.4rem;
+  transform: rotate(180deg);
+  border-width: 0.75rem;
+  border-style: solid;
+  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
+    transparent;
+}
+
+.dropdown.isExpanded {
   display: block;
 }