v3 - Header CSS refactor (#949)

* refactor: enhance header component structure and styling * Remove bg color on isOpen --------- Co-authored-by: Ida Marie Andreassen <[email protected]>
varianter · Dec 5, 2024 · 9c90ce4 · 9c90ce4
1 parent 18f2e3e
commit 9c90ce4
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 121 deletions.
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -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";
 
@@ -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>
     </>
   );

diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
@@ -1,17 +1,8 @@
-.focusOn {
-  top: 0;
-  overflow: hidden;
-  z-index: 9999;
-}
-
 .isOpen {
   height: 100%;
   display: flex;
   flex-direction: column;
-
-  @media (max-width: 1024px) {
-    background: var(--background-bg-light-primary);
-
+  @media (max-width: 834px) {
     & > header {
       display: flex;
       flex-direction: column;
@@ -25,55 +16,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;
@@ -88,7 +75,7 @@
   flex-direction: column;
   gap: 1.5rem;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 834px) {
     display: none;
   }
 }
@@ -97,7 +84,7 @@
   composes: list;
   display: none;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 834px) {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -111,7 +98,6 @@
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
-  justify-items: center;
   justify-content: center;
   margin: 0;
   padding: 0;
@@ -131,7 +117,7 @@
 .languageSwitcher {
   display: none;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 834px) {
     align-items: center;
     gap: 0.75rem;
     display: flex;
@@ -147,15 +133,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;
   }
 }
@@ -169,14 +149,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;
   }
 }
@@ -203,7 +184,7 @@
   display: flex;
   gap: 2rem;
 
-  @media (max-width: 1024px) {
+  @media (max-width: 834px) {
     align-items: center;
     flex-direction: column;
     gap: 0.5rem;
@@ -216,8 +197,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;
 }
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -8,6 +8,14 @@ html {
   box-sizing: inherit;
 }
 
+:where(.debug) {
+  *,
+  *::before,
+  *::after {
+    outline: 1px solid lime;
+  }
+}
+
 :root {
   --Blue-500: #3840ff;
   --Blue-700: #0014cd;