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/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;
 }