Skip to content

Commit

Permalink
refactor: enhance header component structure and styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jberglund
jberglund committed Dec 5, 2024
1 parent 18f2e3e commit fc9d463
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 119 deletions.
120 changes: 55 additions & 65 deletions src/components/navigation/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export const Header = ({
const ctas = filterLinks(navigation.main, callToActionFieldID);

const sidebarLinks = filterLinks(sidebarData, linkID);
const sidebarCtas = filterLinks(sidebarData, callToActionFieldID);

const sidebarID = "sidebar";

Expand Down Expand Up @@ -85,86 +84,77 @@ export const Header = ({
<>
<FocusOn
enabled={isOpen}
as="header"
onClickOutside={toggleMenu}
onEscapeKey={toggleMenu}
className={`${styles.focusOn} ${isOpen && styles.isOpen}`}
className={`${styles.header} ${styles.focusOn} ${isOpen && styles.isOpen} ${scrollDirection === "down" ? `${styles.hidden}` : ""} `}
>
<header>
<div className={styles.spacer}></div>
<nav aria-label="Main menu">
<div
className={
styles.wrapper +
` ` +
(scrollDirection === "down" ? `${styles.hidden}` : "")
}
>
<div className={styles.desktopWrapper}>
<Link href="/" aria-label="Home" className={styles.logo} />
{renderPageLinks(links, false, pathname)}
{renderPageCTAs(ctas, false)}
<div className={styles.languageSwitcher}>
<nav className={styles.nav} aria-label="Main menu">
<div className={styles.wrapper}>
<div className={styles.desktopWrapper}>
<Link href="/" aria-label="Home" className={styles.logo} />
{renderPageLinks(links, false, pathname)}
{renderPageCTAs(ctas, false)}
<div className={styles.languageSwitcher}>
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
<Button size="large" type="secondary" background="light">
<Text type="labelRegular">{t("contact_us")}</Text>
</Button>
</div>
<button
aria-haspopup="true"
aria-controls={sidebarID}
className={isOpen ? styles.open : styles.closed}
aria-expanded={isOpen}
onClick={toggleMenu}
aria-label="Mobile menu"
/>
</div>
{isOpen && (
<div
className={styles.mobileMenu}
id={sidebarID}
aria-label="Mobile Menu"
onClick={() => setIsOpen(false)}
>
{renderPageLinks(sidebarLinks, true, pathname)}
<hr className={styles.divider} />
<div className={styles.mobileButtons}>
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
<Button size="large" type="secondary" background="light">
<Button size="large" type="primary" background="dark">
<Text type="labelRegular">{t("contact_us")}</Text>
</Button>
</div>
<button
aria-haspopup="true"
aria-controls={sidebarID}
className={isOpen ? styles.open : styles.closed}
aria-expanded={isOpen}
onClick={toggleMenu}
aria-label="Mobile menu"
/>
</div>
{isOpen && (
<div
className={styles.mobileMenu}
id={sidebarID}
aria-label="Mobile Menu"
onClick={() => setIsOpen(false)}
>
{renderPageLinks(sidebarLinks, true, pathname)}
{renderPageCTAs(sidebarCtas, true)}
<hr className={styles.divider} />
<div className={styles.mobileButtons}>
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
<Button size="large" type="primary" background="dark">
<Text type="labelRegular">{t("contact_us")}</Text>
</Button>
</div>
)}
</div>
</nav>
{showAnnouncement && (
<div className={styles.announcementWrapper}>
<div className={styles.announcementContent}>
<Text type={"bodySmall"}>{announcement.text}</Text>
{announcement.link && announcement.link.linkTitle && (
<div>
<CustomLink
link={announcement.link}
size={"small"}
color={"light"}
/>
</div>
)}
</div>
</nav>
{showAnnouncement && (
<div className={styles.announcementWrapper}>
<div className={styles.announcementContent}>
<Text type={"bodySmall"}>{announcement.text}</Text>
{announcement.link && announcement.link.linkTitle && (
<div>
<CustomLink
link={announcement.link}
size={"small"}
color={"light"}
/>
</div>
)}
</div>
</div>
)}
</header>
</div>
)}
</FocusOn>
</>
);
Expand Down
94 changes: 40 additions & 54 deletions src/components/navigation/header/header.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
.focusOn {
top: 0;
overflow: hidden;
z-index: 9999;
}

.isOpen {
height: 100%;
display: flex;
flex-direction: column;

@media (max-width: 1024px) {
@media (max-width: 834px) {
background: var(--background-bg-light-primary);

& > header {
Expand All @@ -25,55 +18,51 @@
}
}

.spacer {
height: 8rem;
.nav {
--nav-height: 5rem;
max-width: min(960px, calc(100vw - 2rem));
min-height: var(--nav-height);
position: relative;
margin-inline: auto;
width: 100%;
}

.header {
position: sticky;
top: 0;
z-index: 9999;
padding-top: 1.5rem;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}

.header:is(.hidden) {
transform: translateY(-100%);
}

.wrapper {
display: flex;
flex-direction: column;
position: fixed;
top: 0rem;
margin: 1.5rem 0;
justify-content: center;
align-items: center;
min-height: 5rem;
position: absolute;
padding: 0rem 3rem 0rem 3rem;
border-radius: 0.75rem;
background: var(--background-header-light-transparent);
box-shadow: 0px 0.5px 2px 0px #eaeaea;
backdrop-filter: blur(40px);
max-width: 960px;
width: calc(100vw - 2rem);
max-width: min(960px, calc(100vw - 2rem));
width: 100%;
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;

display: grid;
grid-template-rows: var(--nav-height);
@media (max-width: 375px) {
width: 100vw;
}
}

.wrapper.hidden {
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;
Expand All @@ -88,7 +77,7 @@
flex-direction: column;
gap: 1.5rem;

@media (min-width: 1024px) {
@media (min-width: 834px) {
display: none;
}
}
Expand All @@ -97,7 +86,7 @@
composes: list;
display: none;

@media (min-width: 1024px) {
@media (min-width: 834px) {
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -111,7 +100,6 @@
display: flex;
flex-direction: row;
gap: 0.25rem;
justify-items: center;
justify-content: center;
margin: 0;
padding: 0;
Expand All @@ -131,7 +119,7 @@
.languageSwitcher {
display: none;

@media (min-width: 1024px) {
@media (min-width: 834px) {
align-items: center;
gap: 0.75rem;
display: flex;
Expand All @@ -147,15 +135,9 @@
}

.mobileMenu {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
min-height: 5rem;
padding: 1.5rem 0;

@media (min-width: 1024px) {
@media (min-width: 834px) {
display: none;
}
}
Expand All @@ -169,14 +151,15 @@

/* MOBILE BUTTON */
.button {
margin-left: auto;
cursor: pointer;
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
background-color: transparent;
border: none;

@media (min-width: 1024px) {
@media (min-width: 834px) {
display: none;
}
}
Expand All @@ -203,7 +186,7 @@
display: flex;
gap: 2rem;

@media (max-width: 1024px) {
@media (max-width: 834px) {
align-items: center;
flex-direction: column;
gap: 0.5rem;
Expand All @@ -216,8 +199,11 @@
}

.logo {
width: 9rem;
height: 37px;
background-color: var(--text-primary);
-webkit-mask: url("/_assets/variant-logo.svg") no-repeat 50% 50%;
height: 1.5rem;
aspect-ratio: 101 / 24;
display: block;
mask-image: url(/_assets/variant-logo.svg);
mask-repeat: no-repeat;
mask-size: cover;
background: currentColor;
}
8 changes: 8 additions & 0 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ html {
box-sizing: inherit;
}

:where(.debug) {
*,
*::before,
*::after {
outline: 1px solid lime;
}
}

:root {
--Blue-500: #3840ff;
--Blue-700: #0014cd;
Expand Down

0 comments on commit fc9d463

Please sign in to comment.