foundry-component-library 0.2.36 → 0.2.37

package/lib/components/Header/Menu.tsx

@@ -8,10 +8,16 @@ import Close from "../../assets/svg/close.svg";
 import { NextLink } from "../../types";
 
 function Menu({
+  translationsSlug,
+  translationsCode,
+  isCasePage,
   isOpen,
   setMenuOpen,
   Link,
 }: {
+  translationsSlug: string;
+  translationsCode: string;
+  isCasePage: boolean;
   isOpen: string;
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
   Link: NextLink;
@@ -34,7 +40,9 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href={`${langPrefix}`}>{translate("Home", currentLang)}</Link>
+            <Link href={`${langPrefix}/`}>
+              {translate("Home", currentLang)}
+            </Link>
           </li>
           <li className={styles.menuListItem}>
             <Link href={`${langPrefix}/hubs`}>
@@ -88,17 +96,44 @@ function Menu({
           </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>
+          {!isCasePage && (
+            <>
+              <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>
+            </>
+          )}
+          {isCasePage && translationsCode && (
+            <>
+              <a
+                href={
+                  translationsCode === "en"
+                    ? `/cases/${translationsSlug}`
+                    : path
+                }
+                className={`${styles.langBtn} ${currentLang === "EN" ? styles.active : ""}`}>
+                EN
+              </a>
+              <div className={styles.divider} />
+              <a
+                href={
+                  translationsCode === "de"
+                    ? `/de/cases/${translationsSlug}`
+                    : path
+                }
+                className={`${styles.langBtn} ${currentLang === "DE" ? styles.active : ""}`}>
+                DE
+              </a>
+            </>
+          )}
         </div>
       </div>
     </div>

package/lib/components/Header/index.tsx

@@ -7,7 +7,20 @@ import { NextLink } from "../../types";
 import lottie from "lottie-web";
 import logo from "../../assets/logo.json";
 
-function Header({ Link }: { Link: NextLink }) {
+function Header({
+  translations,
+  isCasePage,
+  Link,
+}: {
+  translations?: {
+    language: {
+      code: string;
+    };
+    slug: string;
+  }[];
+  isCasePage?: boolean;
+  Link: NextLink;
+}) {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const isOpen = isMenuOpen ? styles.isMenuOpen : "";
 
@@ -67,7 +80,18 @@ function Header({ Link }: { Link: NextLink }) {
           </div>
         </Container>
       </header>
-      <Menu isOpen={isOpen} setMenuOpen={setMenuOpen} Link={Link} />
+      <Menu
+        isOpen={isOpen}
+        setMenuOpen={setMenuOpen}
+        Link={Link}
+        translationsCode={
+          translations?.length
+            ? translations[0].language?.code?.toLowerCase()
+            : ""
+        }
+        translationsSlug={translations?.length ? translations[0].slug : ""}
+        isCasePage={isCasePage || false}
+      />
     </>
   );
 }

package/lib/queries/getCaseBySlug.ts

@@ -35,6 +35,12 @@ export default async function getCaseBySlug({
       nodes {
         id
         title
+        translations {
+          language {
+            code
+          }
+          slug
+        }
         case {
           caption
           mainImage {

package/lib/types/index.ts

@@ -225,6 +225,12 @@ export type PostPreview = {
 export type Case = {
   id: string;
   title: string;
+  translations?: {
+    language: {
+      code: string;
+    };
+    slug: string;
+  }[];
   slug?: string;
   uri: string;
   link?: string;

package/package.json

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