From b9d9d0debd5b266880f18deb46905a8ce26adf88 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Fri, 29 Nov 2024 13:16:06 +0100 Subject: [PATCH 1/8] Add new header design with transistions --- .../languageSwitcher.module.css | 4 +- src/components/link/link.module.css | 4 +- src/components/navigation/header/Header.tsx | 15 +++++++- .../navigation/header/header.module.css | 37 +++++++++++++++---- src/utils/hooks/useScrollDirection.ts | 27 ++++++++++++++ 5 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 src/utils/hooks/useScrollDirection.ts diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css index 025cd9963..2ec2c26dc 100644 --- a/src/components/languageSwitcher/languageSwitcher.module.css +++ b/src/components/languageSwitcher/languageSwitcher.module.css @@ -6,10 +6,10 @@ } .divider { - border-left: 1px solid var(--primary-white); + border-left: 1px solid var(--text-primary); flex-grow: 1; } .link { - color: var(--primary-white) !important; + color: var(--text-primary) !important; } diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css index 13e648223..ba6c4af96 100644 --- a/src/components/link/link.module.css +++ b/src/components/link/link.module.css @@ -142,7 +142,7 @@ } .headerLink { - color: var(--primary-white); + color: var(--text-primary); cursor: pointer; text-decoration: none; font-family: var(--font-britti-sans); @@ -182,7 +182,7 @@ } .selected { - color: var(--primary-white); + color: var(--text-primary); font-weight: 700; line-height: normal; } diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index cc4f95466..c9ed8c897 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -11,6 +11,7 @@ import CustomLink from "src/components/link/CustomLink"; import LinkButton from "src/components/linkButton/LinkButton"; import { BreadCrumbMenu } from "src/components/navigation/breadCrumbMenu/BreadCrumbMenu"; import Text from "src/components/text/Text"; +import useScrollDirection from "src/utils/hooks/useScrollDirection"; import { getHref } from "src/utils/link"; import { Announcement } from "studio/lib/interfaces/announcement"; import { BrandAssets } from "studio/lib/interfaces/brandAssets"; @@ -46,6 +47,10 @@ export const Header = ({ const [isOpen, setIsOpen] = useState(false); const sidebarData = navigation.sidebar || navigation.main; + const scrollDirection = useScrollDirection(); + + console.log("#####", scrollDirection); + const links = filterLinks(navigation.main, linkID); const ctas = filterLinks(navigation.main, callToActionFieldID); @@ -88,8 +93,15 @@ export const Header = ({ className={`${styles.focusOn} ${isOpen && styles.isOpen}`} >
+
+ {showBreadcrumbs && ( header { flex: 1; @@ -30,11 +28,36 @@ } } +.spacer { + height: 8rem; + width: 100%; +} + .wrapper { display: flex; - justify-content: space-between; + position: fixed; + top: 0rem; + margin: 1.5rem 0; + justify-content: center; align-items: center; - padding: 0rem 1.5rem; + height: 5rem; + min-height: 5rem; + padding: 0rem 3rem 0rem 3rem; + border-radius: 0.75rem; + background: rgba(250, 250, 250, 0.75); + box-shadow: 0px 0.5px 2px 0px #eaeaea; + backdrop-filter: blur(40px); + width: 960px; + justify-self: center; + transition-property: top; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + left: 50%; + transform: translate(-50%, 0); +} + +.wrapper.hidden { + top: -6.5rem; } .list { @@ -69,10 +92,8 @@ .desktopLinks { composes: listDesktop; - flex: 1 0 0; gap: 1.5rem; justify-content: center; - align-self: stretch; @media (min-width: 1200px) { gap: 3rem; @@ -161,6 +182,6 @@ .logo { width: 130px; height: 37px; - background-color: var(--primary-white); + background-color: var(--text-primary); -webkit-mask: url("/_assets/variant-logo.svg") no-repeat 50% 50%; } diff --git a/src/utils/hooks/useScrollDirection.ts b/src/utils/hooks/useScrollDirection.ts new file mode 100644 index 000000000..b955d57f6 --- /dev/null +++ b/src/utils/hooks/useScrollDirection.ts @@ -0,0 +1,27 @@ +import { useEffect, useState } from "react"; + +export default function useScrollDirection() { + const [scrollDirection, setScrollDirection] = useState(null); + + useEffect(() => { + let lastScrollY = window.scrollY; + + const updateScrollDirection = () => { + const scrollY = window.scrollY; + const direction = scrollY > lastScrollY ? "down" : "up"; + if ( + direction !== scrollDirection && + (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10) + ) { + setScrollDirection(direction); + } + lastScrollY = scrollY > 0 ? scrollY : 0; + }; + window.addEventListener("scroll", updateScrollDirection); + return () => { + window.removeEventListener("scroll", updateScrollDirection); + }; + }, [scrollDirection]); + + return scrollDirection; +} From 26e26fe2d7b45fddee4e9348e0c0e48411d0a9b9 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 3 Dec 2024 10:50:03 +0100 Subject: [PATCH 2/8] New header design works on desktop --- public/_assets/dot.svg | 5 + public/_assets/green-dot.svg | 5 + public/_assets/menu.svg | 9 +- .../languageSwitcher/LanguageSwitcher.tsx | 15 ++- .../languageSwitcher.module.css | 33 ++++++- src/components/link/CustomLink.tsx | 98 +++++++++++-------- src/components/link/link.module.css | 48 ++++++--- src/components/navigation/header/Header.tsx | 19 +--- .../navigation/header/PageHeader.tsx | 2 - .../navigation/header/header.module.css | 30 +++--- 10 files changed, 164 insertions(+), 100 deletions(-) create mode 100644 public/_assets/dot.svg create mode 100644 public/_assets/green-dot.svg diff --git a/public/_assets/dot.svg b/public/_assets/dot.svg new file mode 100644 index 000000000..7db8e7676 --- /dev/null +++ b/public/_assets/dot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/_assets/green-dot.svg b/public/_assets/green-dot.svg new file mode 100644 index 000000000..aff7b014b --- /dev/null +++ b/public/_assets/green-dot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/_assets/menu.svg b/public/_assets/menu.svg index f495871d4..6e9f2b1e0 100644 --- a/public/_assets/menu.svg +++ b/public/_assets/menu.svg @@ -1,3 +1,6 @@ - - - \ No newline at end of file + + + + + + diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx index e61c0a096..587671b3d 100644 --- 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 = ( - - {pathTranslation._key.toUpperCase()} - - ); return (
  • {pathTranslation._key !== currentLanguage ? ( - {linkText} + + {pathTranslation._key.toUpperCase()} + ) : ( - linkText + + {pathTranslation._key.toUpperCase()} + )}
    • {index < pathTranslations.length - 1 && ( diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css index bcd516a29..dc8a73fad 100644 --- a/src/components/languageSwitcher/languageSwitcher.module.css +++ b/src/components/languageSwitcher/languageSwitcher.module.css @@ -1,6 +1,6 @@ .list { display: flex; - gap: 1rem; + gap: 0.25rem; list-style: none; padding: 0; margin: 0; @@ -13,4 +13,35 @@ .link { 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 index 135757ec0..d30fb9dfb 100644 --- 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" ? ( -
    - - {link.linkTitle} - -
    - ) : ( - - {link.linkTitle} - - )) - ); + switch (type) { + case "link": + return ( + link.linkTitle && ( +
    + + {link.linkTitle} + +
    + ) + ); + case "headerLink": + return ( + link.linkTitle && ( + + + {link.linkTitle} + + ) + ); + case "footerLink": + return ( + link.linkTitle && ( + + + {link.linkTitle} + + ) + ); + } }; export default CustomLink; diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css index feee68e66..43eff49b1 100644 --- a/src/components/link/link.module.css +++ b/src/components/link/link.module.css @@ -146,20 +146,32 @@ 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); - 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; } diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index ad75c71e7..1e0870ffa 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -11,7 +11,6 @@ import Button from "src/components/buttons/Button"; 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 Text from "src/components/text/Text"; import useScrollDirection from "src/utils/hooks/useScrollDirection"; import { getHref } from "src/utils/link"; @@ -29,9 +28,7 @@ export interface IHeader { assets: BrandAssets; announcement: Announcement | null; currentLanguage: string; - pathTitles: string[]; pathTranslations: InternationalizedString; - showBreadcrumbs: boolean; } const filterLinks = (data: ILink[], type: string) => @@ -41,9 +38,7 @@ export const Header = ({ navigation, announcement, currentLanguage, - pathTitles, pathTranslations, - showBreadcrumbs, }: IHeader) => { const pathname = usePathname(); const [isOpen, setIsOpen] = useState(false); @@ -51,8 +46,6 @@ export const Header = ({ const scrollDirection = useScrollDirection(); - console.log("#####", scrollDirection); - const links = filterLinks(navigation.main, linkID); const ctas = filterLinks(navigation.main, callToActionFieldID); @@ -116,7 +109,7 @@ export const Header = ({ pathTranslations={pathTranslations} /> )} - @@ -144,7 +137,7 @@ export const Header = ({ /> )} {/* TODO: add styling for this section */} - @@ -168,14 +161,6 @@ export const Header = ({ )} - - {showBreadcrumbs && ( - - )} ); }; diff --git a/src/components/navigation/header/PageHeader.tsx b/src/components/navigation/header/PageHeader.tsx index e3008095e..871cea9e9 100644 --- a/src/components/navigation/header/PageHeader.tsx +++ b/src/components/navigation/header/PageHeader.tsx @@ -66,9 +66,7 @@ export default async function PageHeader({ assets={initialBrandAssets.data} announcement={initialAnnouncement.data} currentLanguage={language} - pathTitles={pathTitles} pathTranslations={pathTranslations} - showBreadcrumbs={showBreadcrumbs} /> )) ); diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css index e7f94611d..be5f54a90 100644 --- a/src/components/navigation/header/header.module.css +++ b/src/components/navigation/header/header.module.css @@ -54,22 +54,18 @@ transition-duration: 500ms; left: 50%; transform: translate(-50%, 0); + + @media (max-width: 834px) { + width: 40rem; + } } .wrapper.hidden { top: -6.5rem; } -.logo { - overflow: hidden; - width: auto; - display: flex; - max-width: 100%; - height: 1.25rem; -} - .list { - width: fit-content; + width: 100%; list-style-type: none; margin: 0; padding: 0; @@ -100,12 +96,18 @@ } .desktopLinks { - composes: listDesktop; - gap: 1.5rem; + list-style-type: none; + width: 100%; + display: flex; + flex-direction: row; + gap: 0.25rem; + justify-items: center; justify-content: center; + margin: 0; + padding: 0; - @media (min-width: 1200px) { - gap: 3rem; + @media (max-width: 834px) { + display: none; } } @@ -190,7 +192,7 @@ } .logo { - width: 130px; + width: 9rem; height: 37px; background-color: var(--text-primary); -webkit-mask: url("/_assets/variant-logo.svg") no-repeat 50% 50%; From 66b560c45ca2ab87c798c7fc077bf261400fb186 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Tue, 3 Dec 2024 13:05:38 +0100 Subject: [PATCH 3/8] Add mobile and tablet version of header --- public/_assets/menu-close.svg | 8 +++---- .../languageSwitcher.module.css | 2 +- src/components/navigation/header/Header.tsx | 22 ++++++++++--------- .../navigation/header/header.module.css | 15 +++++++++++++ 4 files changed, 32 insertions(+), 15 deletions(-) diff --git a/public/_assets/menu-close.svg b/public/_assets/menu-close.svg index a96e8cd5c..55927f7f4 100644 --- a/public/_assets/menu-close.svg +++ b/public/_assets/menu-close.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css index dc8a73fad..090a16be8 100644 --- a/src/components/languageSwitcher/languageSwitcher.module.css +++ b/src/components/languageSwitcher/languageSwitcher.module.css @@ -3,7 +3,7 @@ gap: 0.25rem; list-style: none; padding: 0; - margin: 0; + margin: auto 0; } .divider { diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 1e0870ffa..44df1d0fa 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -130,16 +130,18 @@ export const Header = ({ > {renderPageLinks(sidebarLinks, true, pathname)} {renderPageCTAs(sidebarCtas, true)} - {defaultLanguage && ( - - )} - {/* TODO: add styling for this section */} - +
    + {defaultLanguage && ( + + )} + {/* TODO: add styling for this section */} + +
    )} diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css index be5f54a90..db0e1f3eb 100644 --- a/src/components/navigation/header/header.module.css +++ b/src/components/navigation/header/header.module.css @@ -57,6 +57,14 @@ @media (max-width: 834px) { width: 40rem; + justify-content: space-between; + align-self: stretch; + } + + @media (max-width: 425px) { + width: 22.375rem; + justify-content: space-between; + align-self: stretch; } } @@ -143,6 +151,13 @@ } } +.mobileButtons { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-self: stretch; +} + /* MOBILE BUTTON */ .button { cursor: pointer; From 95850ac0002a7fa805149e3870769b5287326b66 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Wed, 4 Dec 2024 09:10:49 +0100 Subject: [PATCH 4/8] =?UTF-8?q?Working=20mobile=20and=20tablet=20version?= =?UTF-8?q?=20=E2=9C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navigation/header/Header.tsx | 73 ++++++++++--------- .../navigation/header/header.module.css | 51 +++++++------ 2 files changed, 68 insertions(+), 56 deletions(-) diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 44df1d0fa..b6e56f849 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -99,51 +99,54 @@ export const Header = ({ (scrollDirection === "down" ? `${styles.hidden}` : "") } > - - {renderPageLinks(links, false, pathname)} - {renderPageCTAs(ctas, false)} -
    - {defaultLanguage && ( - - )} - -
    - + + + + )} + {showAnnouncement && (
    diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css index db0e1f3eb..8e2d59f9f 100644 --- a/src/components/navigation/header/header.module.css +++ b/src/components/navigation/header/header.module.css @@ -5,7 +5,7 @@ } .isOpen { - height: 100vh; + height: 100%; display: flex; flex-direction: column; @@ -13,16 +13,13 @@ background: var(--primary-bg); & > header { - flex: 1; display: flex; flex-direction: column; - padding: 1rem 2.5rem; & > nav { flex: 1; display: flex; flex-direction: column; - justify-content: flex-end; } } } @@ -35,36 +32,30 @@ .wrapper { display: flex; + flex-direction: column; position: fixed; top: 0rem; margin: 1.5rem 0; justify-content: center; align-items: center; - height: 5rem; min-height: 5rem; padding: 0rem 3rem 0rem 3rem; border-radius: 0.75rem; background: rgba(250, 250, 250, 0.75); box-shadow: 0px 0.5px 2px 0px #eaeaea; backdrop-filter: blur(40px); - width: 960px; + max-width: 960px; + width: calc(100vw - 2rem); justify-self: center; transition-property: top; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; left: 50%; transform: translate(-50%, 0); + z-index: 9998; - @media (max-width: 834px) { - width: 40rem; - justify-content: space-between; - align-self: stretch; - } - - @media (max-width: 425px) { - width: 22.375rem; - justify-content: space-between; - align-self: stretch; + @media (max-width: 375px) { + width: 100vw; } } @@ -72,6 +63,17 @@ top: -6.5rem; } +.desktopWrapper { + display: flex; + justify-content: space-between; + align-self: stretch; + align-items: center; +} + +.wrapper:has(.mobileMenu) .desktopWrapper { + padding-top: 1.25rem; +} + .list { width: 100%; list-style-type: none; @@ -136,15 +138,22 @@ } } +.divider { + border: 0; + height: 1px; + background: var(--background-bg-light-secondary); + margin: 1rem 0; + width: 100%; +} + .mobileMenu { - flex: 1; display: flex; flex-direction: column; align-items: flex-start; - justify-content: flex-end; - gap: 5rem; - padding-top: 7.5rem; - padding-bottom: 7.5rem; + justify-content: flex-start; + width: 100%; + min-height: 5rem; + padding: 1.5rem 0; @media (min-width: 1024px) { display: none; From 1824208bebadad305ffdfb9a9e609fd6434c0f9c Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Wed, 4 Dec 2024 10:35:25 +0100 Subject: [PATCH 5/8] Add aria-label to menu button --- src/components/navigation/header/Header.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index b6e56f849..31723cd42 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -120,6 +120,7 @@ export const Header = ({ className={isOpen ? styles.open : styles.closed} aria-expanded={isOpen} onClick={toggleMenu} + aria-label="Mobile menu" />
    {isOpen && ( From 449812851511fb76533ef5639c3068724b6af357 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Wed, 4 Dec 2024 10:52:33 +0100 Subject: [PATCH 6/8] Fix: Remove breadcrumbs from PageHeader --- src/app/(main)/[locale]/[...path]/page.tsx | 9 ++------- src/app/(main)/[locale]/page.tsx | 2 -- src/components/navigation/header/HeaderPreview.tsx | 6 ------ src/components/navigation/header/PageHeader.tsx | 6 ------ 4 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/app/(main)/[locale]/[...path]/page.tsx b/src/app/(main)/[locale]/[...path]/page.tsx index b3be90347..8caf1a233 100644 --- 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 ( <> - +
    {(() => { switch (docType) { diff --git a/src/app/(main)/[locale]/page.tsx b/src/app/(main)/[locale]/page.tsx index 82b7a25d6..ddf7a4f64 100644 --- a/src/app/(main)/[locale]/page.tsx +++ b/src/app/(main)/[locale]/page.tsx @@ -74,8 +74,6 @@ const Home = async ({ params }: Props) => {
    {initialLandingPage.data.sections.map((section, index) => ( diff --git a/src/components/navigation/header/HeaderPreview.tsx b/src/components/navigation/header/HeaderPreview.tsx index 3fe13023d..bd2ce2201 100644 --- a/src/components/navigation/header/HeaderPreview.tsx +++ b/src/components/navigation/header/HeaderPreview.tsx @@ -18,17 +18,13 @@ export default function HeaderPreview({ initialBrandAssets, initialAnnouncement, currentLanguage, - pathTitles, pathTranslations, - showBreadcrumbs, }: { initialNav: QueryResponseInitial; initialBrandAssets: QueryResponseInitial; initialAnnouncement: QueryResponseInitial; currentLanguage: string; - pathTitles: string[]; pathTranslations: InternationalizedString; - showBreadcrumbs: boolean; }) { const { data: newNav } = useQuery( NAV_QUERY, @@ -54,9 +50,7 @@ export default function HeaderPreview({ assets={newBrandAssets} announcement={newAnnouncement} currentLanguage={currentLanguage} - pathTitles={pathTitles} pathTranslations={pathTranslations} - showBreadcrumbs={showBreadcrumbs} /> ) ); diff --git a/src/components/navigation/header/PageHeader.tsx b/src/components/navigation/header/PageHeader.tsx index 871cea9e9..e4d8eb76f 100644 --- a/src/components/navigation/header/PageHeader.tsx +++ b/src/components/navigation/header/PageHeader.tsx @@ -16,16 +16,12 @@ import HeaderPreview from "./HeaderPreview"; interface PageHeaderProps { language: string; - pathTitles: string[]; pathTranslations: InternationalizedString; - showBreadcrumbs: boolean; } export default async function PageHeader({ language, - pathTitles, pathTranslations, - showBreadcrumbs, }: PageHeaderProps) { const { perspective, isDraftMode } = getDraftModeInfo(); @@ -56,9 +52,7 @@ export default async function PageHeader({ initialBrandAssets={initialBrandAssets} initialAnnouncement={initialAnnouncement} currentLanguage={language} - pathTitles={pathTitles} pathTranslations={pathTranslations} - showBreadcrumbs={showBreadcrumbs} /> ) : (
    Date: Wed, 4 Dec 2024 12:15:12 +0100 Subject: [PATCH 7/8] Remove todos --- src/components/navigation/header/Header.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 31723cd42..64e6cf6b5 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -140,7 +140,6 @@ export const Header = ({ pathTranslations={pathTranslations} /> )} - {/* TODO: add styling for this section */} From a401d8efa08f1db27892c8091773081b13e964b9 Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Thu, 5 Dec 2024 09:24:04 +0100 Subject: [PATCH 8/8] Fix colors --- src/components/navigation/header/header.module.css | 4 ++-- src/styles/global.css | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css index 8e2d59f9f..18fe8bfe9 100644 --- a/src/components/navigation/header/header.module.css +++ b/src/components/navigation/header/header.module.css @@ -10,7 +10,7 @@ flex-direction: column; @media (max-width: 1024px) { - background: var(--primary-bg); + background: var(--background-bg-light-primary); & > header { display: flex; @@ -41,7 +41,7 @@ min-height: 5rem; padding: 0rem 3rem 0rem 3rem; border-radius: 0.75rem; - background: rgba(250, 250, 250, 0.75); + background: var(--background-header-light-transparent); box-shadow: 0px 0.5px 2px 0px #eaeaea; backdrop-filter: blur(40px); max-width: 960px; diff --git a/src/styles/global.css b/src/styles/global.css index 7aa42779c..e49b663c1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -97,6 +97,7 @@ html { --background-bg-blue: var(--Blue-500); --background-bg-yellow: var(--Yellow-500); --background-disabled: var(--Light-700); + --background-header-light-transparent: #fafafabf; --stroke-primary: var(--Dark-700); --stroke-secondary: var(--Dark-400);