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

server/routers/contentstack/base/output.ts

@@ -283,8 +283,8 @@ const validateInternalLink = z
     edges: z.array(
       z.object({
         node: z.object({
-          title: z.string(),
-          url: z.string(),
+          title: z.string().optional(),
+          url: z.string().optional(),
         }),
       })
     ),

server/routers/contentstack/base/query.ts

@@ -572,11 +572,21 @@ export const baseQueryRouter = router({
       const mainLinks = transformPageConnectionLinks(
         validatedFooterData.main_links
       )
+      console.log(
+        "secondary_links ",
+        validatedFooterData.secondary_links[0].links[0].pageConnection?.edges
+      )
+      const secondaryLinks = validatedFooterData.secondary_links.map(
+        (section) => ({
+          ...section,
+          links: transformPageConnectionLinks(section.links),
+        })
+      )
 
       return {
         mainLinks: mainLinks,
         appDownloads: validatedFooterData.app_downloads,
-        secondaryLinks: validatedFooterData.secondary_links,
+        secondaryLinks: secondaryLinks,
       }
     }),
 })

types/components/footer/navigation.ts

@@ -8,10 +8,10 @@ export type FooterMainNavProps = {
 
 export type FooterSecondaryNav = {
   id: string
-  href: string
-  title: string
-  openInNewTab: boolean
   isExternal: boolean
+  openInNewTab: boolean
+  title: string
+  url: string
 }
 export type FooterSecondaryNavProps = {
   secondaryLinks: {
@@ -21,9 +21,11 @@ export type FooterSecondaryNavProps = {
   appDownloads: {
     title: string
     links: {
-      title: string
-      href: string
-      id: string
+      href: {
+        href: string
+        title: string
+      }
+      type: string
     }[]
   }
 }