V3-breadcrumb-menu

src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+
+import Text from "src/components/text/Text";
+
+import styles from "./breadCrumbMenu.module.css";
+
+export interface BreadCrumbProps {
+  currentLanguage: string;
+  pathname: string;
+}
+
+export const BreadCrumbMenu = ({
+  currentLanguage,
+  pathname,
+}: BreadCrumbProps) => {
+  return (
+    <ul className={styles.breadCrumbMenu}>
+      {/* TODO: "Hjem" should be updated with translation */}
+      {[
+        "Hjem",
+        ...(pathname.includes("/" + currentLanguage + "/")
+          ? pathname.split("/").slice(2)
+          : pathname.split("/").slice(1)),
+      ].map((slug, index, path) => {
+        const href =
+          "/" + currentLanguage + "/" + path.slice(1, index + 1).join("/");
+        const isLast = index === path.length - 1;
+
+        return (
+          <li key={index} className={styles.breadCrumb}>
+            <Link className={styles.breadCrumb} href={href}>
+              {index !== 0 && (
+                <span
+                  className={
+                    isLast ? styles.lastDotSeparator : styles.dotSeparator
+                  }
+                >
+                  •
+                </span>
+              )}
+              <Text
+                className={
+                  isLast ? styles.breadCrumbText : styles.breadCrumbLink
+                }
+                type={isLast ? "labelSemibold" : "desktopLink"}
+              >
+                {slug.charAt(0).toUpperCase() +
+                  (slug.length > 1 ? slug.slice(1).toLowerCase() : "")}
+              </Text>
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

src/components/navigation/breadCrumbMenu/breadCrumbMenu.module.css

@@ -0,0 +1,38 @@
+.breadCrumbMenu {
+  color: var(--primary-black);
+  background-color: var(--primary-bg);
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  list-style: none;
+  text-decoration: none;
+}
+
+.breadCrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--primary-black);
+  text-decoration: none;
+  list-style: none;
+}
+
+.breadCrumbText {
+  color: var(--primary-black);
+}
+
+.breadCrumbLink {
+  color: var(--primary-black);
+  text-decoration: underline;
+}
+
+.dotSeparator,
+.lastDotSeparator {
+  font-size: 2.5em;
+}
+
+.lastDotSeparator {
+  color: var(--secondary-red);
+}

src/components/navigation/header/Header.tsx

@@ -10,6 +10,7 @@ import { SanityImage } from "src/components/image/SanityImage";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
+import { BreadCrumbMenu } from "src/components/navigation/breadCrumbMenu/BreadCrumbMenu";
 import { getHref } from "src/utils/link";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { InternationalizedString } from "studio/lib/interfaces/global";
@@ -68,60 +69,65 @@ export const Header = ({
   }, []);
 
   return (
-    <FocusOn
-      enabled={isOpen}
-      onClickOutside={toggleMenu}
-      onEscapeKey={toggleMenu}
-      className={`${styles.focusOn} ${isOpen && styles.isOpen}`}
-    >
-      <header>
-        <nav aria-label="Main menu">
-          <div className={styles.wrapper}>
-            {assets?.primaryLogo && (
-              <div className={styles.logo}>
-                <Link href="/" aria-label="Home">
-                  <SanityImage image={assets.primaryLogo} />
-                </Link>
-              </div>
-            )}
-            {renderPageLinks(links, false, pathname)}
-            {renderPageCTAs(ctas, false)}
-            <div className={styles.languageSwitcher}>
-              {defaultLanguage && (
-                <LanguageSwitcher
-                  currentLanguage={currentLanguage}
-                  pathTranslations={pathTranslations}
-                />
-              )}
-            </div>
-            <button
-              aria-haspopup="true"
-              aria-controls={sidebarID}
-              className={isOpen ? styles.open : styles.closed}
-              aria-expanded={isOpen}
-              onClick={toggleMenu}
-            />
-          </div>
-          {isOpen && (
-            <div
-              className={styles.mobileMenu}
-              id={sidebarID}
-              aria-label="Mobile Menu"
-              onClick={() => setIsOpen(false)}
-            >
-              {renderPageLinks(sidebarLinks, true, pathname)}
-              {renderPageCTAs(sidebarCtas, true)}
-              {defaultLanguage && (
-                <LanguageSwitcher
-                  currentLanguage={currentLanguage}
-                  pathTranslations={pathTranslations}
-                />
+    <>
+      <FocusOn
+        enabled={isOpen}
+        onClickOutside={toggleMenu}
+        onEscapeKey={toggleMenu}
+        className={`${styles.focusOn} ${isOpen && styles.isOpen}`}
+      >
+        <header>
+          <nav aria-label="Main menu">
+            <div className={styles.wrapper}>
+              {assets?.primaryLogo && (
+                <div className={styles.logo}>
+                  <Link href="/" aria-label="Home">
+                    <SanityImage image={assets.primaryLogo} />
+                  </Link>
+                </div>
               )}
+              {renderPageLinks(links, false, pathname)}
+              {renderPageCTAs(ctas, false)}
+              <div className={styles.languageSwitcher}>
+                {defaultLanguage && (
+                  <LanguageSwitcher
+                    currentLanguage={currentLanguage}
+                    pathTranslations={pathTranslations}
+                  />
+                )}
+              </div>
+              <button
+                aria-haspopup="true"
+                aria-controls={sidebarID}
+                className={isOpen ? styles.open : styles.closed}
+                aria-expanded={isOpen}
+                onClick={toggleMenu}
+              />
             </div>
-          )}
-        </nav>
-      </header>
-    </FocusOn>
+            {isOpen && (
+              <div
+                className={styles.mobileMenu}
+                id={sidebarID}
+                aria-label="Mobile Menu"
+                onClick={() => setIsOpen(false)}
+              >
+                {renderPageLinks(sidebarLinks, true, pathname)}
+                {renderPageCTAs(sidebarCtas, true)}
+                {defaultLanguage && (
+                  <LanguageSwitcher
+                    currentLanguage={currentLanguage}
+                    pathTranslations={pathTranslations}
+                  />
+                )}
+              </div>
+            )}
+          </nav>
+        </header>
+      </FocusOn>
+      {pathname !== "/" && pathname !== "/" + currentLanguage && (
+        <BreadCrumbMenu currentLanguage={currentLanguage} pathname={pathname} />
+      )}
+    </>
   );
 };
 

src/components/navigation/header/header.module.css

@@ -6,10 +6,6 @@
   background-color: var(--primary-black);
 }
 
-.scrolled {
-  background-color: var(--primary-black);
-}
-
 .isOpen {
   height: 100vh;
   display: flex;

src/components/text/text.module.css

@@ -103,10 +103,12 @@
   line-height: 120%;
 }
 
-/* TODO: add font variables */
-/* .labelSemibold, */
-/* .labelBold, */
-/* .quoteItalic, */
+.labelSemibold {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+}
 
 .quoteNormal {
   font-size: 1.5rem;
@@ -115,3 +117,10 @@
   line-height: 130%;
   white-space: pre-line;
 }
+
+/* TODO: add font variables */
+/* .labelBold */
+/* .quoteItalic */
+/* .labelSemibold, */
+/* .labelBold, */
+/* .quoteItalic, */

src/styles/global.css

@@ -27,6 +27,9 @@ html {
 
   --focus-color: #8b0f40;
 
+  /* TODO: upgrade color-scheme with correct colors */
+  --secondary-red: #f0503f;
+
   /* breakpoints */
   --breakpoint-mobile: 767px;
   --breakpoint-tablet: 640px;