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

components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -0,0 +1,74 @@
+.myPagesMenuContent {
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.intro {
+  padding: 0 var(--Spacing-x1);
+}
+
+.myPagesMenuContent .friendTypeWrapper {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.divider {
+  margin: var(--Spacing-x2) 0;
+}
+
+.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;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.link:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+.link.smallLink {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+}
+
+.link:not(:hover) .arrow {
+  opacity: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .myPagesMenuContent {
+    padding: var(--Spacing-x2) var(--Spacing-x4);
+  }
+  .userName {
+    display: none;
+  }
+}