scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-1842): Making the navigation links in the header render in the initial HTML for SEO purposes

Browse Source 
* feat(SW-1842): Making the navigation links in the header render in the initial HTML for SEO purposes


Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
2025-03-12 15:16:06 +00:00
parent 689e9d72cb
commit d50cf829e6
9 changed files with 197 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { FocusTrap } from "focus-trap-react"
import { useIntl } from "react-intl"
import { logout } from "@/constants/routes/handleAuth"
@@ -11,7 +12,6 @@ import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./myPagesMenuContent.module.css"
@@ -26,7 +26,6 @@ export default function MyPagesMenuContent({
membershipLevel,
}: Props) {
const intl = useIntl()
const myPagesMenuContentRef = useTrapFocus()
const { data: myPagesNavigation } = useMyPagesNavigation()
const primaryLinks = myPagesNavigation?.primaryLinks ?? []
@@ -43,38 +42,40 @@ export default function MyPagesMenuContent({
}
return (
<nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
<div className={introClassName}>
<Subtitle type="two" className={styles.userName}>
{intl.formatMessage(
{ id: "Hi {firstName}!" },
{ firstName: user.firstName }
)}
</Subtitle>
{membershipLevel && membershipPoints ? (
<Caption className={styles.friendTypeWrapper}>
<span className={styles.friendType}>{membershipLevel.name}</span>
<span>
{intl.formatMessage(
{ id: "{pointsAmount, number} points" },
{ pointsAmount: membershipPoints }
)}
</span>
</Caption>
) : null}
</div>
<FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
<nav className={styles.myPagesMenuContent}>
<div className={introClassName}>
<Subtitle type="two" className={styles.userName}>
{intl.formatMessage(
{ id: "Hi {firstName}!" },
{ firstName: user.firstName }
)}
</Subtitle>
{membershipLevel && membershipPoints ? (
<Caption className={styles.friendTypeWrapper}>
<span className={styles.friendType}>{membershipLevel.name}</span>
<span>
{intl.formatMessage(
{ id: "{pointsAmount, number} points" },
{ pointsAmount: membershipPoints }
)}
</span>
</Caption>
) : null}
</div>
<ul className={styles.groups}>
<li>
<Divider color="subtle" className={styles.divider} />
<ul className={styles.groups}>
<li>
<Divider color="subtle" className={styles.divider} />
<PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
<PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
<Divider color="subtle" className={styles.divider} />
<SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
</li>
</ul>
</nav>
<Divider color="subtle" className={styles.divider} />
<SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
</li>
</ul>
</nav>
</FocusTrap>
)
}