diff --git a/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx b/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx new file mode 100644 index 000000000..3502d9554 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/src/components/navigation/breadCrumbMenu/breadCrumbMenu.module.css b/src/components/navigation/breadCrumbMenu/breadCrumbMenu.module.css new file mode 100644 index 000000000..0bccd2c4b --- /dev/null +++ b/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); +} diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 913571b4c..819e21665 100644 --- a/src/components/navigation/header/Header.tsx +++ b/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 ( - -
- +
+
+ {pathname !== "/" && pathname !== "/" + currentLanguage && ( + + )} + ); }; diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css index cf791ec85..e22c1497a 100644 --- a/src/components/navigation/header/header.module.css +++ b/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; diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index 57f407e1b..557bd61b3 100644 --- a/src/components/text/text.module.css +++ b/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, */ diff --git a/src/styles/global.css b/src/styles/global.css index 48dc2e3e7..d20a2e753 100644 --- a/src/styles/global.css +++ b/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;