fix: bottom links layout in the footer (#311)

* fix: bottom links layout in the footer * refactor: some links
AtB-AS · Jul 3, 2024 · 7050017 · 7050017
1 parent fc567fb
commit 7050017
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/src/layouts/shared/footer.module.css b/src/layouts/shared/footer.module.css
@@ -54,6 +54,12 @@
   gap: var(--spacings-medium);
   flex-wrap: wrap;
 }
+.footer__bottomLinks > div:only-child {
+  margin: 0 auto;
+}
+.footer__bottomLinks:has(> :last-child:nth-child(2)) {
+  justify-content: space-evenly;
+}
 .footer__bottomLinks__mid {
   text-align: center;
   display: flex;

diff --git a/src/layouts/shared/footer.tsx b/src/layouts/shared/footer.tsx
@@ -11,12 +11,37 @@ export type FooterProps = {
   withoutSettings?: boolean;
 };
 
+type SomeLink = {
+  href: string;
+  iconSrc: string;
+  title: string;
+};
+
 const { urls, fylkeskommune } = getOrgData();
 
 export default function Footer({ withoutSettings = false }: FooterProps) {
   const { isDarkMode, toggleDarkmode } = useTheme();
   const { t, language } = useTranslation();
 
+  const someLinks: SomeLink[] = [
+    urls.facebookLink && {
+      href: urls.facebookLink,
+      iconSrc: '/fb.svg',
+      title: 'Facebook',
+    },
+    urls.instagramLink && {
+      href: urls.instagramLink,
+      iconSrc: '/ig.svg',
+      title: 'Instagram',
+    },
+    urls.twitterLink && {
+      href: urls.twitterLink,
+      iconSrc: '/twitter.svg',
+      title: 'Twitter',
+    },
+  ].filter(Boolean) as SomeLink[];
+
+  console.log(someLinks);
   return (
     <footer className={style.footer}>
       <div className={style.footer__content}>
@@ -120,53 +145,26 @@ export default function Footer({ withoutSettings = false }: FooterProps) {
         <hr />
 
         <section className={style.footer__bottomLinks}>
-          <div className={style.footer__some}>
-            {urls.facebookLink && (
-              <ButtonLink
-                mode={isDarkMode ? 'interactive_2' : 'interactive_1'}
-                radius="top-bottom"
-                display="inline"
-                radiusSize="circular"
-                icon={{ left: <img src="/fb.svg" alt="Facebook" /> }}
-                href={urls.facebookLink}
-                aProps={{
-                  target: '_blank',
-                  rel: 'noreferrer',
-                  title: 'Facebook',
-                }}
-              />
-            )}
-            {urls.instagramLink && (
-              <ButtonLink
-                mode={isDarkMode ? 'interactive_2' : 'interactive_1'}
-                radius="top-bottom"
-                display="inline"
-                radiusSize="circular"
-                icon={{ left: <img src="/ig.svg" alt="Instagram" /> }}
-                href={urls.instagramLink}
-                aProps={{
-                  target: '_blank',
-                  rel: 'noreferrer',
-                  title: 'Instagram',
-                }}
-              />
-            )}
-            {urls.twitterLink && (
-              <ButtonLink
-                mode={isDarkMode ? 'interactive_2' : 'interactive_1'}
-                radius="top-bottom"
-                display="inline"
-                radiusSize="circular"
-                icon={{ left: <img src="/twitter.svg" alt="Twitter" /> }}
-                href={urls.twitterLink}
-                aProps={{
-                  target: '_blank',
-                  rel: 'noreferrer',
-                  title: 'Twitter',
-                }}
-              />
-            )}
-          </div>
+          {someLinks.length > 0 && (
+            <div className={style.footer__some}>
+              {someLinks.map((link) => (
+                <ButtonLink
+                  key={link.href}
+                  mode={isDarkMode ? 'interactive_2' : 'interactive_1'}
+                  radius="top-bottom"
+                  display="inline"
+                  radiusSize="circular"
+                  icon={{ left: <img src={link.iconSrc} alt={link.title} /> }}
+                  href={link.href}
+                  aProps={{
+                    target: '_blank',
+                    rel: 'noreferrer',
+                    title: link.title,
+                  }}
+                />
+              ))}
+            </div>
+          )}
 
           <div className={style.footer__bottomLinks__mid}>
             <a