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}>
@@ -25,9 +26,9 @@ export default function FooterSecondaryNav({
               <a href={link.href} target="_blank" aria-label={link.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}
                 />

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