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

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


Approved-by: Fredrik Thorsson

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { FocusTrap } from "focus-trap-react"
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
@@ -9,7 +10,6 @@ import { CheckIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
-import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import { replaceUrlPart } from "./utils"
 
@@ -24,39 +24,40 @@ export default function LanguageSwitcherContent({
   const intl = useIntl()
   const currentLanguage = useLang()
 
-  const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
 
   const pathname = usePathname()
 
   return (
-    <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
-      <div className={styles.languageWrapper}>
-        <Subtitle className={styles.subtitle} type="two">
-          {intl.formatMessage({ id: "Select your language" })}
-        </Subtitle>
-        <ul className={styles.list}>
-          {urlKeys.map((key) => {
-            const url = urls[key]?.url
-            const isActive = currentLanguage === key
-            if (url) {
-              return (
-                <li key={key}>
-                  <Link
-                    className={`${styles.link} ${isActive ? styles.active : ""}`}
-                    href={replaceUrlPart(pathname, url)}
-                    onClick={onLanguageSwitch}
-                    keepSearchParams
-                  >
-                    {languages[key]}
-                    {isActive ? <CheckIcon color="burgundy" /> : null}
-                  </Link>
-                </li>
-              )
-            }
-          })}
-        </ul>
+    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+      <div className={styles.languageSwitcherContent}>
+        <div className={styles.languageWrapper}>
+          <Subtitle className={styles.subtitle} type="two">
+            {intl.formatMessage({ id: "Select your language" })}
+          </Subtitle>
+          <ul className={styles.list}>
+            {urlKeys.map((key) => {
+              const url = urls[key]?.url
+              const isActive = currentLanguage === key
+              if (url) {
+                return (
+                  <li key={key}>
+                    <Link
+                      className={`${styles.link} ${isActive ? styles.active : ""}`}
+                      href={replaceUrlPart(pathname, url)}
+                      onClick={onLanguageSwitch}
+                      keepSearchParams
+                    >
+                      {languages[key]}
+                      {isActive ? <CheckIcon color="burgundy" /> : null}
+                    </Link>
+                  </li>
+                )
+              }
+            })}
+          </ul>
+        </div>
       </div>
-    </div>
+    </FocusTrap>
   )
 }