foundry-component-library 0.2.19 → 0.2.20

package/lib/components/CaseStudyTeaser/index.tsx

@@ -42,9 +42,10 @@ const CaseStudyTeaser = ({
               setTimeout(() => {
                 dragStarted.current = false;
               }, 0);
-            }}
-          >
+            }}>
             {cases.map((el) => {
+              if (!el) return;
+
               const { thumbnailImage, mainImage } = el.case;
 
               return (
@@ -68,8 +69,7 @@ const CaseStudyTeaser = ({
                           e.preventDefault();
                           e.stopPropagation();
                         }
-                      }}
-                    >
+                      }}>
                       {translate("See More")}
                     </a>
                   </div>

package/lib/components/Header/Menu.tsx

@@ -1,4 +1,6 @@
+"use client";
 import { Dispatch, SetStateAction } from "react";
+import { usePathname } from "next/navigation";
 import styles from "./styles.module.scss";
 import { translate } from "../../utils";
 import Arrow from "../../assets/svg/arrow.svg";
@@ -14,6 +16,14 @@ function Menu({
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
   Link: NextLink;
 }) {
+  const path = usePathname();
+  const currentLang = path.startsWith("/de") ? "DE" : "EN";
+
+  console.log(path);
+
+  const langPrefix =
+    currentLang === "EN" ? "" : `/${currentLang.toLowerCase()}`;
+
   return (
     <div className={`${styles.menu} ${isOpen}`}>
       <div
@@ -26,16 +36,18 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href="/hubs">{translate("Service Hubs")}</Link>
+            <Link href={`${langPrefix}/hubs`}>{translate("Service Hubs")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/cases">{translate("Work")}</Link>
+            <Link href={`${langPrefix}/cases`}>{translate("Work")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/about-us">{translate("About Us")}</Link>
+            <Link href={`${langPrefix}/about-us`}>{translate("About Us")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/contact">{translate("Contact Us")}</Link>
+            <Link href={`${langPrefix}/contact`}>
+              {translate("Contact Us")}
+            </Link>
           </li>
         </ul>
         <ul className={styles.menuSecondary}>
@@ -56,18 +68,31 @@ function Menu({
             </Container>
           </li> */}
           <li className={styles.secondaryMenuItem}>
-            <Link href="/team">
+            <Link href={`${langPrefix}/team`}>
               {translate("Team & Careers")}
               <Arrow />
             </Link>
           </li>
           <li className={styles.secondaryMenuItem}>
-            <Link href="/news">
+            <Link href={`${langPrefix}/news`}>
               {translate("News & Insights")}
               <Arrow />
             </Link>
           </li>
         </ul>
+        <div className={styles.languageSwitcher} aria-label="Language switcher">
+          <a
+            href={path.replace(`${langPrefix}`, "")}
+            className={`${styles.langBtn} ${currentLang === "EN" ? styles.active : ""}`}>
+            EN
+          </a>
+          <div className={styles.divider} />
+          <a
+            href={currentLang === "DE" ? "" : ` /de${path}`}
+            className={`${styles.langBtn} ${currentLang === "DE" ? styles.active : ""}`}>
+            DE
+          </a>
+        </div>
       </div>
     </div>
   );

package/lib/components/Header/styles.module.scss

@@ -172,3 +172,25 @@
     color: $color-pink;
   }
 }
+
+.languageSwitcher {
+  display: flex;
+  gap: 8px;
+  padding: 8px 0 0;
+}
+
+.langBtn {
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+.divider {
+  margin: 3px 1px;
+  width: 2px;
+  height: calc(100% - 6px);
+  background-color: $color-text;
+  opacity: 0.6;
+}
+
+.langBtn.active {
+  opacity: 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.2.19",
+  "version": "0.2.20",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",