V3 update header (#944)

* Add new header design with transistions * New header design works on desktop * Add mobile and tablet version of header * Working mobile and tablet version ✨ * Add aria-label to menu button * Fix: Remove breadcrumbs from PageHeader * Remove todos * Fix colors
varianter · Dec 5, 2024 · 18f2e3e · 18f2e3e
1 parent 44d94e9
commit 18f2e3e
Show file tree

Hide file tree

Showing 16 changed files with 316 additions and 180 deletions.
diff --git a/public/_assets/dot.svg b/public/_assets/dot.svg
diff --git a/public/_assets/green-dot.svg b/public/_assets/green-dot.svg
diff --git a/public/_assets/menu-close.svg b/public/_assets/menu-close.svg
diff --git a/public/_assets/menu.svg b/public/_assets/menu.svg
diff --git a/src/app/(main)/[locale]/[...path]/page.tsx b/src/app/(main)/[locale]/[...path]/page.tsx
@@ -86,16 +86,11 @@ async function Page({ params }: Props) {
     return Page404;
   }
 
-  const { queryResponse, docType, pathTitles, pathTranslations } = pageData;
+  const { queryResponse, docType, pathTranslations } = pageData;
 
   return (
     <>
-      <PageHeader
-        language={locale}
-        pathTitles={pathTitles}
-        pathTranslations={pathTranslations}
-        showBreadcrumbs={true}
-      />
+      <PageHeader language={locale} pathTranslations={pathTranslations} />
       <main id={"main"} tabIndex={-1}>
         {(() => {
           switch (docType) {

diff --git a/src/app/(main)/[locale]/page.tsx b/src/app/(main)/[locale]/page.tsx
@@ -74,8 +74,6 @@ const Home = async ({ params }: Props) => {
       <PageHeader
         language={params.locale}
         pathTranslations={pathTranslations}
-        pathTitles={[]}
-        showBreadcrumbs={false}
       />
       <main id={"main"} tabIndex={-1}>
         {initialLandingPage.data.sections.map((section, index) => (

diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -21,23 +21,22 @@ export default function LanguageSwitcher({
         if (pathTranslation._key === undefined) {
           return null;
         }
-        const linkText = (
-          <Text type={"bodySmall"} className={styles.link}>
-            {pathTranslation._key.toUpperCase()}
-          </Text>
-        );
         return (
           <Fragment key={pathTranslation._key}>
             <li>
               {pathTranslation._key !== currentLanguage ? (
                 <Link
-                  className={styles.link}
+                  className={styles.notSelected}
                   href={`/${pathTranslation._key}/${pathTranslation.value}`}
                 >
-                  {linkText}
+                  <Text type={"bodySmall"} className={styles.link}>
+                    {pathTranslation._key.toUpperCase()}
+                  </Text>
                 </Link>
               ) : (
-                linkText
+                <Text type={"bodySmall"} className={styles.selectedLink}>
+                  {pathTranslation._key.toUpperCase()}
+                </Text>
               )}
             </li>
             {index < pathTranslations.length - 1 && (

diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css
@@ -1,17 +1,47 @@
 .list {
   display: flex;
-  gap: 1rem;
+  gap: 0.25rem;
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: auto 0;
 }
 
 .divider {
-  border-left: 1px solid var(--text-primary-light);
-  /* Todo: fix correct color */
+  border-left: 1px solid var(--text-primary);
   flex-grow: 1;
 }
 
 .link {
-  color: var(--text-primary-light) !important;
+  color: var(--text-primary) !important;
+  letter-spacing: 0.1rem;
+  line-height: 120%;
+  font-weight: 300;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.selectedLink {
+  color: var(--text-primary) !important;
+  letter-spacing: 0.1rem;
+  line-height: 120%;
+  font-weight: 600;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    font-weight: 600;
+    text-decoration: none;
+  }
+}
+
+.notSelected {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx
@@ -27,47 +27,65 @@ const CustomLink = ({
   const newTab = link.newTab;
   const target = newTab ? "_blank" : undefined;
   const rel = newTab ? "noopener noreferrer" : undefined;
-  const className =
-    type === "headerLink"
-      ? `${styles.headerLink} ${isSelected ? styles.selected : ""}`
-      : styles.footerLink;
 
-  return (
-    link.linkTitle &&
-    (type === "link" ? (
-      <div
-        className={
-          styles.wrapper +
-          (size === "small" ? ` ${styles.sizeSmall}` : "") +
-          (color === "light" ? ` ${styles.colorLight}` : "")
-        }
-      >
-        <Link
-          className={
-            link.linkType == "internal"
-              ? styles.internalLink
-              : styles.externalLink
-          }
-          href={href}
-          target={target}
-          rel={rel}
-          aria-label={link.ariaLabel}
-        >
-          <span className={styles.span}>{link.linkTitle}</span>
-        </Link>
-      </div>
-    ) : (
-      <Link
-        className={className}
-        href={href}
-        target={target}
-        rel={rel}
-        aria-label={link.ariaLabel}
-      >
-        {link.linkTitle}
-      </Link>
-    ))
-  );
+  switch (type) {
+    case "link":
+      return (
+        link.linkTitle && (
+          <div
+            className={
+              styles.wrapper +
+              (size === "small" ? ` ${styles.sizeSmall}` : "") +
+              (color === "light" ? ` ${styles.colorLight}` : "")
+            }
+          >
+            <Link
+              className={
+                link.linkType == "internal"
+                  ? styles.internalLink
+                  : styles.externalLink
+              }
+              href={href}
+              target={target}
+              rel={rel}
+              aria-label={link.ariaLabel}
+            >
+              <span className={styles.span}>{link.linkTitle}</span>
+            </Link>
+          </div>
+        )
+      );
+    case "headerLink":
+      return (
+        link.linkTitle && (
+          <Link
+            className={`${styles.headerLink} ${isSelected ? styles.selected : ""}`}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={link.ariaLabel}
+          >
+            <span className={styles.dot}></span>
+            {link.linkTitle}
+          </Link>
+        )
+      );
+    case "footerLink":
+      return (
+        link.linkTitle && (
+          <Link
+            className={styles.footerLink}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={link.ariaLabel}
+          >
+            <span className={styles.dot}></span>
+            {link.linkTitle}
+          </Link>
+        )
+      );
+  }
 };
 
 export default CustomLink;
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
@@ -140,26 +140,38 @@
 }
 
 .headerLink {
-  color: var(--background-bg-light-primary);
+  color: var(--text-primary);
   cursor: pointer;
   text-decoration: none;
   font-family: var(--font-britti-sans);
   font-size: 1.125rem;
   font-weight: 500;
+  display: inline-flex;
+  padding: 0.75rem 1rem 0.75rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.375rem;
+  position: relative;
+}
 
-  &:hover {
-    font-size: 1.125rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-  }
+.dot {
+  position: absolute;
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  width: 0.375rem;
+  height: 0.375rem;
+  background-image: url("/_assets/dot.svg");
+  background-size: 0.375rem 0.375rem;
+  opacity: 0;
+  transition:
+    left 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
 
-  &:active {
-    font-size: 1.125rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
+.headerLink:hover .dot {
+  left: 0;
+  opacity: 1;
 }
 
 .footerLink {
@@ -180,7 +192,13 @@
 }
 
 .selected {
-  color: var(--text-primary-light);
-  font-weight: 700;
-  line-height: normal;
+  font-weight: 600;
+}
+
+.selected .dot {
+  left: 0;
+  opacity: 1;
+  transition: none;
+  background-image: url("/_assets/green-dot.svg");
+  background-size: 0.375rem 0.375rem;
 }