feat(SW-184): implementing mobile design

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -35,7 +35,9 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <span className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
@@ -98,9 +100,15 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
       </nav>
     </div>
   ) : (
-    <Link href={myPages[lang]} className={styles.link}>
+    <Link
+      href={myPages[lang]}
+      className={styles.loginLink}
+      aria-label={intl.formatMessage({ id: "Log in/Join" })}
+    >
       <Avatar />
-      {intl.formatMessage({ id: "Log in/Join" })}
+      <span className={styles.userName}>
+        {intl.formatMessage({ id: "Log in/Join" })}
+      </span>
     </Link>
   )
 }

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

@@ -2,11 +2,8 @@
   position: relative;
 }
 
-.button {
-  font-weight: 600;
-}
-
 .chevron {
+  display: none;
   transition: transform 0.2s;
 }
 
@@ -14,6 +11,12 @@
   transform: rotate(180deg);
 }
 
+.userName {
+  display: none;
+  font-weight: 600;
+  color: var(--Base-Text-High-contrast);
+}
+
 .dropdown {
   position: absolute;
   top: 46px;
@@ -80,6 +83,15 @@
   opacity: 0;
 }
 
-.link:hover .arrow {
-  opacity: 1;
+.loginLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .userName,
+  .chevron {
+    display: initial;
+  }
 }