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/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -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>
   )
 }
 

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { FocusTrap } from "focus-trap-react"
+
 import useDropdownStore from "@/stores/main-menu"
 
 import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
@@ -7,7 +9,6 @@ import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./megaMenu.module.css"
 
@@ -20,10 +21,10 @@ export default function MegaMenu({
   seeAllLink,
   submenu,
   card,
+  isOpen,
 }: MegaMenuProps) {
   const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
     useDropdownStore()
-  const megaMenuRef = useTrapFocus()
 
   function handleNavigate() {
     toggleMegaMenu(false)
@@ -33,89 +34,94 @@ export default function MegaMenu({
   }
 
   return (
-    <nav className={styles.megaMenu}>
-      {isMobile ? (
-        <div className={styles.backWrapper}>
-          <button
-            type="button"
-            className={styles.backButton}
-            onClick={() => toggleMegaMenu(false)}
-          >
-            <ChevronLeftIcon color="red" height={20} width={20} />
-            <Subtitle type="one" color="burgundy" asChild>
-              <span>{title}</span>
-            </Subtitle>
-          </button>
-        </div>
-      ) : null}
-      <div className={styles.megaMenuContent} ref={megaMenuRef}>
-        <div className={styles.seeAllLink}>
-          {seeAllLink?.link ? (
-            <Link
-              href={seeAllLink.link.url}
-              color="burgundy"
-              variant="icon"
-              weight="bold"
-              onClick={handleNavigate}
+    <FocusTrap
+      active={isOpen}
+      focusTrapOptions={{ clickOutsideDeactivates: true }}
+    >
+      <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
+        {isMobile ? (
+          <div className={styles.backWrapper}>
+            <button
+              type="button"
+              className={styles.backButton}
+              onClick={() => toggleMegaMenu(false)}
             >
-              {seeAllLink.title}
-              <ArrowRightIcon color="burgundy" />
-            </Link>
-          ) : null}
-        </div>
-        <ul className={styles.submenus}>
-          {submenu.map((item) => (
-            <li key={item.title} className={styles.submenusItem}>
-              <Caption
-                type="label"
-                color="uiTextPlaceholder"
-                textTransform="uppercase"
-                asChild
-              >
-                <span className={styles.submenuTitle}>{item.title}</span>
-              </Caption>
-              <ul className={styles.submenu}>
-                {item.links.map(({ title, link }) =>
-                  link ? (
-                    <li key={title} className={styles.submenuItem}>
-                      <Link
-                        href={link.url}
-                        variant="menu"
-                        className={styles.link}
-                        onClick={handleNavigate}
-                      >
-                        {title}
-                        <ArrowRightIcon
-                          color="burgundy"
-                          className={styles.arrow}
-                        />
-                      </Link>
-                    </li>
-                  ) : null
-                )}
-              </ul>
-            </li>
-          ))}
-        </ul>
-        {card ? (
-          <div className={styles.cardWrapper}>
-            <Card
-              className={styles.card}
-              backgroundImage={card.backgroundImage}
-              bodyText={card.body_text}
-              heading={card.heading}
-              primaryButton={card.primaryButton}
-              secondaryButton={card.secondaryButton}
-              scriptedTopTitle={card.scripted_top_title}
-              onPrimaryButtonClick={handleNavigate}
-              onSecondaryButtonClick={handleNavigate}
-              imageGradient
-              theme="image"
-              height="dynamic"
-            />
+              <ChevronLeftIcon color="red" height={20} width={20} />
+              <Subtitle type="one" color="burgundy" asChild>
+                <span>{title}</span>
+              </Subtitle>
+            </button>
           </div>
         ) : null}
-      </div>
-    </nav>
+        <div className={styles.megaMenuContent}>
+          <div className={styles.seeAllLink}>
+            {seeAllLink?.link ? (
+              <Link
+                href={seeAllLink.link.url}
+                color="burgundy"
+                variant="icon"
+                weight="bold"
+                onClick={handleNavigate}
+              >
+                {seeAllLink.title}
+                <ArrowRightIcon color="burgundy" />
+              </Link>
+            ) : null}
+          </div>
+          <ul className={styles.submenus}>
+            {submenu.map((item) => (
+              <li key={item.title} className={styles.submenusItem}>
+                <Caption
+                  type="label"
+                  color="uiTextPlaceholder"
+                  textTransform="uppercase"
+                  asChild
+                >
+                  <span className={styles.submenuTitle}>{item.title}</span>
+                </Caption>
+                <ul className={styles.submenu}>
+                  {item.links.map(({ title, link }) =>
+                    link ? (
+                      <li key={title} className={styles.submenuItem}>
+                        <Link
+                          href={link.url}
+                          variant="menu"
+                          className={styles.link}
+                          onClick={handleNavigate}
+                        >
+                          {title}
+                          <ArrowRightIcon
+                            color="burgundy"
+                            className={styles.arrow}
+                          />
+                        </Link>
+                      </li>
+                    ) : null
+                  )}
+                </ul>
+              </li>
+            ))}
+          </ul>
+          {card ? (
+            <div className={styles.cardWrapper}>
+              <Card
+                className={styles.card}
+                backgroundImage={card.backgroundImage}
+                bodyText={card.body_text}
+                heading={card.heading}
+                primaryButton={card.primaryButton}
+                secondaryButton={card.secondaryButton}
+                scriptedTopTitle={card.scripted_top_title}
+                onPrimaryButtonClick={handleNavigate}
+                onSecondaryButtonClick={handleNavigate}
+                imageGradient
+                theme="image"
+                height="dynamic"
+              />
+            </div>
+          ) : null}
+        </div>
+      </nav>
+    </FocusTrap>
   )
 }

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -1,3 +1,7 @@
+.megaMenu:not(.active) {
+  display: none;
+}
+
 .megaMenuContent {
   display: grid;
 }

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -66,15 +66,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
         ref={megaMenuRef}
         className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
       >
-        {isMegaMenuOpen ? (
-          <MegaMenu
-            isMobile={isMobile}
-            title={title}
-            seeAllLink={seeAllLink}
-            submenu={submenu}
-            card={card}
-          />
-        ) : null}
+        <MegaMenu
+          isMobile={isMobile}
+          title={title}
+          seeAllLink={seeAllLink}
+          submenu={submenu}
+          card={card}
+          isOpen={isMegaMenuOpen}
+        />
       </div>
     </>
   ) : (