feat(SW-187) Secondary navigation

components/Footer/Details/details.module.css

@@ -52,7 +52,7 @@
   gap: var(--Spacing-x1);
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .details {
     padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
   }

components/Footer/Navigation/MainNav/mainnav.module.css

@@ -22,7 +22,7 @@
   justify-content: space-between;
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .mainNavigation {
     max-width: 360px;
   }

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -13,6 +13,7 @@ export default function FooterSecondaryNav({
   secondaryLinks,
   appDownloads,
 }: FooterSecondaryNavProps) {
+  console.log("secondaryLinks", secondaryLinks[0].links)
   return (
     <div className={styles.secondaryNavigation}>
       <nav className={styles.secondaryNavigationGroup}>
@@ -21,13 +22,17 @@ export default function FooterSecondaryNav({
         </Body>
         <ul className={styles.secondaryNavigationList}>
           {appDownloads.links.map((link) => (
-            <li key={link.id} className={styles.appDownloadItem}>
-              <a href={link.href} target="_blank" rel="noopener noreferrer">
+            <li key={link.type} className={styles.appDownloadItem}>
+              <a
+                href={link.href.href}
+                target="_blank"
+                aria-label={link.href.title}
+              >
                 <Image
                   src={
-                    AppDownLoadLinks[link.id as keyof typeof AppDownLoadLinks]
+                    AppDownLoadLinks[link.type as keyof typeof AppDownLoadLinks]
                   }
-                  alt={link.title}
+                  alt={link.href.title}
                   width={125}
                   height={40}
                 />
@@ -42,23 +47,29 @@ export default function FooterSecondaryNav({
             {link.title}
           </Body>
           <ul className={styles.secondaryNavigationList}>
-            {link.links.map((link) => (
-              <li key={link.id} className={styles.secondaryNavigationItem}>
-                {link.isExternal ? (
-                  <a
-                    href={link.href}
-                    key={link.title}
-                    target={link.openInNewTab ? "_blank" : "_self"}
+            {link.links.map(
+              (subLink) =>
+                subLink.url && (
+                  <li
+                    key={subLink.id}
+                    className={styles.secondaryNavigationItem}
                   >
-                    {link.title}
-                  </a>
-                ) : (
-                  <Link href={link.href} key={link.title}>
-                    {link.title}
-                  </Link>
-                )}
-              </li>
-            ))}
+                    {subLink.isExternal ? (
+                      <a
+                        href={subLink.url}
+                        key={subLink.title}
+                        target={subLink.openInNewTab ? "_blank" : "_self"}
+                      >
+                        {subLink.title}
+                      </a>
+                    ) : (
+                      <Link href={subLink.url} key={subLink.url}>
+                        {subLink.title}
+                      </Link>
+                    )}
+                  </li>
+                )
+            )}
           </ul>
         </nav>
       ))}

components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -25,7 +25,7 @@
   margin: 0;
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .secondaryNavigation {
     margin-top: 0;
     gap: 80px;

components/Footer/Navigation/index.tsx

@@ -1,12 +1,10 @@
-import { footer } from "../mockedData"
 import FooterMainNav from "./MainNav"
 import FooterSecondaryNav from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
 export default function FooterNavigation({ ...props }) {
-  const { mainLinks } = props
-  const { secondaryLinks, appDownloads } = footer
+  const { mainLinks, secondaryLinks, appDownloads } = props
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>

components/Footer/Navigation/navigation.module.css

@@ -11,7 +11,7 @@
   max-width: var(--max-width-content);
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .section {
     padding: var(--Spacing-x9) 0;
   }