feat(SW-184): my pages menu mobile/desktop functionality

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

@@ -1,97 +1,47 @@
 .myPagesMenu {
-  position: relative;
-}
-
-.chevron {
   display: none;
-  transition: transform 0.2s;
-}
-
-.chevron.isExpanded {
-  transform: rotate(180deg);
-}
-
-.userName {
-  display: none;
-  font-weight: 600;
-  color: var(--Base-Text-High-contrast);
-}
-
-.dropdown {
-  position: absolute;
-  top: 46px;
-  right: 0;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  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;
-}
-
-/* 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;
-}
-
-.friendTypeWrapper {
-  padding: 0 var(--Spacing-x1) var(--Spacing-x2);
-  font-weight: 400;
-  color: var(--UI-Text-Medium-contrast);
-}
-.friendType {
-  font-family: var(--typography-Title-5-fontFamily);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  text-transform: uppercase;
-}
-
-.friendType::after {
-  content: " · ";
-  display: inline;
-  padding: 0 var(--Spacing-x-half);
-}
-
-.groups,
-.menuItems {
-  list-style: none;
-}
-
-.group {
-  padding: var(--Spacing-x2) 0;
-  border-top: 1px solid var(--Base-Border-Subtle);
-}
-
-.group:last-child {
-  padding-bottom: 0;
-}
-
-.arrow {
-  opacity: 0;
-}
-
-.loginLink {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
 }
 
 @media screen and (min-width: 768px) {
-  .userName,
+  .myPagesMenu {
+    display: block;
+    position: relative;
+  }
+
   .chevron {
-    display: initial;
+    transition: transform 0.2s;
+  }
+
+  .chevron.isExpanded {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 46px;
+    right: 0;
+    background-color: var(--Base-Surface-Primary-light-Normal);
+    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;
+  }
+
+  /* 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;
   }
 }