fix: redirect users to /refresh on unauth and mod webview links

components/MyPages/Header/Hamburger/hamburger.module.css

@@ -0,0 +1,16 @@
+.hamburger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.line {
+  background-color: var(--some-black-color, #1c1b1f);
+  border-radius: 0.8rem;
+  height: 0.2rem;
+  width: 2.5rem;
+}

components/MyPages/Header/Hamburger/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./hamburger.module.css"
+
+export default function Hamburger() {
+  return (
+    <button className={styles.hamburger} type="button">
+      <div className={styles.line} />
+      <div className={styles.line} />
+      <div className={styles.line} />
+    </button>
+  )
+}

components/MyPages/Header/LanguageSwitcher/index.tsx

@@ -0,0 +1,17 @@
+import Image from "@/components/Image"
+
+import styles from "./language.module.css"
+
+export default function LanguageSwitcher() {
+  return (
+    <div className={styles.switcher}>
+      <Image
+        alt="Swedish flag"
+        height={21}
+        src="/_static/icons/sweden.svg"
+        width={21}
+      />
+      <span>SV / SEK</span>
+    </div>
+  )
+}

components/MyPages/Header/LanguageSwitcher/language.module.css

@@ -0,0 +1,15 @@
+.switcher {
+  align-items: center;
+  display: none;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .switcher {
+    display: flex;
+  }
+}

components/MyPages/Header/Logo/index.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+import { GetMyPagesLogo } from "@/lib/graphql/Query/Logo.graphql"
+import { request } from "@/lib/graphql/request"
+
+import Image from "@/components/Image"
+
+import styles from "./logo.module.css"
+
+import type { LangParams } from "@/types/params"
+import type { LogoQueryData } from "@/types/requests/myPages/logo"
+
+export default async function Logo({ lang }: LangParams) {
+  const { data } = await request<LogoQueryData>(GetMyPagesLogo, {
+    locale: lang,
+  })
+  if (
+    !data.all_header.items.length ||
+    !data.all_header.items?.[0].logoConnection.totalCount
+  ) {
+    return null
+  }
+  const logo = data.all_header.items[0].logoConnection.edges[0]
+  return (
+    <Link className={styles.link} href="#">
+      <Image
+        alt={logo.node.title}
+        height={logo.node.dimension.height}
+        src={logo.node.url}
+        width={logo.node.dimension.width}
+      />
+    </Link>
+  )
+}

components/MyPages/Header/Logo/logo.module.css

@@ -0,0 +1,4 @@
+.link {
+  cursor: pointer;
+  display: block;
+}

components/MyPages/Header/header.module.css

@@ -0,0 +1,25 @@
+.header {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  box-shadow: 0px 1.0006656646728516px 1.0006656646728516px 0px #0000000d;
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: 1fr auto auto;
+  height: var(--header-height);
+
+  padding: 0 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    background-color: var(--some-grey-color, #ececec);
+    border-bottom: 0.1rem solid var(--some-grey-color, #ccc);
+    box-shadow: none;
+    gap: 3.2rem;
+    grid-template-columns: 1fr 19rem auto auto;
+    padding: 0 2.4rem;
+  }
+}

components/MyPages/Header/index.tsx

@@ -0,0 +1,19 @@
+import Hamburger from "./Hamburger"
+import LanguageSwitcher from "./LanguageSwitcher"
+import Logo from "./Logo"
+import User from "./User"
+
+import styles from "./header.module.css"
+
+import type { LangParams } from "@/types/params"
+
+export default function Header({ lang }: LangParams) {
+  return (
+    <header className={styles.header}>
+      <Logo lang={lang} />
+      <LanguageSwitcher />
+      <User />
+      <Hamburger />
+    </header>
+  )
+}