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

components/Header/MainMenu/Avatar/avatar.module.css

@@ -0,0 +1,16 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--Main-Grey-40);
+}
+
+.initials {
+  font-size: 0.75rem;
+  color: var(--Base-Text-Inverted);
+  background-color: var(--Scandic-Peach-70);
+}

components/Header/MainMenu/Avatar/index.tsx

@@ -0,0 +1,19 @@
+import { PersonIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+
+import styles from "./avatar.module.css"
+
+import { AvatarProps } from "@/types/components/header/avatar"
+
+export default function Avatar({ image, initials }: AvatarProps) {
+  let classNames = [styles.avatar]
+  let element = <PersonIcon color="white" />
+  if (image) {
+    classNames.push(styles.image)
+    element = <Image src={image.src} alt={image.alt} width={28} height={28} />
+  } else if (initials) {
+    classNames.push(styles.initials)
+    element = <span>{initials}</span>
+  }
+  return <span className={classNames.join(" ")}>{element}</span>
+}