feat(SW-187): Fixed LanguageSwitcher for footer

components/Footer/Details/details.module.css

@@ -65,5 +65,6 @@
     border-bottom: 0;
     padding-bottom: 0;
     margin-bottom: 0;
+    gap: var(--Spacing-x4);
   }
 }

components/Footer/Details/index.tsx

@@ -6,8 +6,6 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { footer } from "../mockedData"
-
 import styles from "./details.module.css"
 
 import type { FooterDetailsProps } from "@/types/components/footer/navigation"
@@ -22,11 +20,12 @@ function SocialIcon({ iconName }: SocialIconsProps) {
 export default async function FooterDetails({
   socialMedia,
   tertiaryLinks,
+  languageUrls,
 }: FooterDetailsProps) {
   const lang = getLang()
   const { formatMessage } = await getIntl()
   const currentYear = new Date().getFullYear()
-  const { languageSwitcher } = footer
+
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
@@ -85,7 +84,9 @@ export default async function FooterDetails({
                 )
             )}
           </nav>
-          <LanguageSwitcher type="desktopFooter" urls={languageSwitcher.urls} />
+          {languageUrls && (
+            <LanguageSwitcher type="footer" urls={languageUrls} />
+          )}
         </div>
       </div>
     </section>

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

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

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

@@ -27,8 +27,14 @@
 
 @media screen and (min-width: 767px) {
   .secondaryNavigation {
-    margin-top: 0;
-    gap: 80px;
+    margin-top: var(--Spacing-x4);
+    gap: 120px;
     flex-direction: row;
   }
 }
+@media screen and (min-width: 1367px) {
+  .secondaryNavigation {
+    margin-top: 0;
+    gap: 80px;
+  }
+}

components/Footer/Navigation/navigation.module.css

@@ -13,10 +13,7 @@
 
 @media screen and (min-width: 767px) {
   .section {
-    padding: var(--Spacing-x9) var(--Spacing-x6);
-  }
-  .maxWidth {
-    flex-direction: row;
+    padding: var(--Spacing-x9) var(--Spacing-x5);
   }
 }
 
@@ -24,4 +21,7 @@
   .section {
     padding: var(--Spacing-x9) 0;
   }
+  .maxWidth {
+    flex-direction: row;
+  }
 }

components/Footer/index.tsx

@@ -9,7 +9,9 @@ export default async function Footer() {
   const footerData = await serverClient().contentstack.base.footer({
     lang: getLang(),
   })
-  if (!footerData) {
+  const languages = await serverClient().contentstack.languageSwitcher.get()
+
+  if (!footerData || !languages) {
     return <FooterDetails />
   }
   return (
@@ -22,6 +24,7 @@ export default async function Footer() {
       <FooterDetails
         socialMedia={footerData.socialMedia}
         tertiaryLinks={footerData.tertiaryLinks}
+        languageUrls={languages.urls}
       />
     </footer>
   )