Merged in feature/hardcoded-mypages-links (pull request #1325)

Feature/hardcoded mypages links

* feat: wip use hardcoded links

* Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/hardcoded-mypages-links

* feat: use hardcoded links for my pages to support dynamic links

* cleanup

* code fixes

* refactor: restructure MyPagesMobileDropdown component for improved readability

* use util timeout function


Approved-by: Christian Andolf
Approved-by: Linus Flood

components/MyPages/Sidebar/index.tsx

@@ -1,8 +1,9 @@
-import { Fragment } from "react"
-
 import { logout } from "@/constants/routes/handleAuth"
-import { getMyPagesNavigation } from "@/lib/trpc/memoizedRequests"
 
+import {
+  getPrimaryLinks,
+  getSecondaryLinks,
+} from "@/components/MyPages/menuItems"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -12,50 +13,85 @@ import { getLang } from "@/i18n/serverContext"
 import styles from "./sidebar.module.css"
 
 export default async function SidebarMyPages() {
-  const navigation = await getMyPagesNavigation()
   const intl = await getIntl()
 
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <Subtitle type="two" color="baseTextHighContrast">
-          {navigation?.title}
+          {intl.formatMessage({ id: "My pages" })}
         </Subtitle>
-        {navigation?.menuItems.map((menuItem, idx) => (
-          <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-            <Divider color="beige" />
-            <ul className={styles.list}>
-              {menuItem.links.map((link) => (
-                <li key={link.uid}>
-                  <Link
-                    color="burgundy"
-                    href={link.originalUrl || link.url}
-                    partialMatch
-                    prefetch={true}
-                    size={menuItem.display_sign_out_link ? "small" : "regular"}
-                    variant="sidebar"
-                  >
-                    {link.linkText}
-                  </Link>
-                </li>
-              ))}
-              {menuItem.display_sign_out_link ? (
-                <li>
-                  <Link
-                    color="burgundy"
-                    href={logout[getLang()]}
-                    prefetch={false}
-                    size="small"
-                    variant="sidebar"
-                  >
-                    {intl.formatMessage({ id: "Log out" })}
-                  </Link>
-                </li>
-              ) : null}
-            </ul>
-          </Fragment>
-        ))}
+
+        <PrimaryLinks />
+        <SecondaryLinks />
       </nav>
     </aside>
   )
 }
+
+async function PrimaryLinks() {
+  const lang = getLang()
+  const links = await getPrimaryLinks({ lang })
+
+  return (
+    <>
+      <Divider color="beige" />
+      <ul className={styles.list}>
+        {links.map((link) => (
+          <li key={link.href}>
+            <Link
+              color="burgundy"
+              href={link.href}
+              partialMatch
+              prefetch={true}
+              size={"regular"}
+              variant="sidebar"
+            >
+              {link.text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+async function SecondaryLinks() {
+  const lang = getLang()
+  const links = await getSecondaryLinks({ lang })
+  const intl = await getIntl()
+
+  return (
+    <>
+      <Divider color="beige" />
+      <ul className={styles.list}>
+        {links.map((link) => (
+          <li key={link.href}>
+            <Link
+              color="burgundy"
+              href={link.href}
+              partialMatch
+              prefetch={true}
+              size={"small"}
+              variant="sidebar"
+            >
+              {link.text}
+            </Link>
+          </li>
+        ))}
+        <li>
+          <Link
+            color="burgundy"
+            href={logout[lang]}
+            partialMatch
+            prefetch={false}
+            size={"small"}
+            variant="sidebar"
+          >
+            {intl.formatMessage({ id: "Log out" })}
+          </Link>
+        </li>
+      </ul>
+    </>
+  )
+}