[B] Minor header nav fixes

- Constrain dropdown width to avoid overflow-x edge case - Eliminate scroll bar flash on accordion hieght transition - Refactor extra useEffect for micro-managing header nav visibility on scroll
lsst-epo · Apr 17, 2024 · e7c2f66 · e7c2f66
1 parent 5439030
commit e7c2f66
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/components/global/Header/Navigation.js b/components/global/Header/Navigation.js
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,7 @@ export default function Navigation({
   items,
   userProfilePage,
   theme,
-  isOpenSetter,
+  desktopSetter,
   mobileActive,
   mobileSetter,
 }) {
@@ -28,10 +28,6 @@ export default function Navigation({
 
   useClickEvent(handleClick);
 
-  useEffect(() => {
-    if (isOpenSetter) isOpenSetter(!!active);
-  }, [mobileSetter, isOpenSetter, active]);
-
   function handleClick(e) {
     const isLink =
       e.target.nodeName === "A" || e.target.parentElement?.nodeName === "A";
@@ -42,15 +38,17 @@ export default function Navigation({
     }
     if (navList?.current?.contains(e.target)) return;
     setActive(null);
+    if (desktopSetter) desktopSetter(false);
   }
 
   function handleToggleClick(id) {
     setActive((prevActive) => (prevActive === id ? null : id));
+    if (desktopSetter) desktopSetter(true);
   }
 
   function handleSignOut() {
     setActive(null);
-    mobileSetter(false);
+    if (mobileSetter) mobileSetter(false);
     signOut();
   }
 
@@ -165,7 +163,7 @@ Navigation.propTypes = {
   items: PropTypes.arrayOf(internalLinkWithChildrenShape),
   userProfilePage: PropTypes.object,
   theme: PropTypes.oneOf(["desktop", "mobile"]),
-  isOpenSetter: PropTypes.func,
+  desktopSetter: PropTypes.func,
   mobileActive: PropTypes.bool,
   mobileSetter: PropTypes.func,
 };

diff --git a/components/global/Header/_subsubnavigation.scss b/components/global/Header/_subsubnavigation.scss
@@ -8,15 +8,23 @@ $_button-bg-color: functions.sass-palette(neutral02);
   height: 100%;
   max-height: 0;
   margin-left: functions.header(nav-link-padding-lateral) / 2;
-  overflow: auto;
+  overflow: hidden;
   color: $_color;
   visibility: hidden;
   transition: max-height 0.25s ease-out, visibility 0s 0.25s;
 
+  @keyframes hide-scroll {
+    from, to {
+      overflow: hidden;
+    }
+  }
+
   &--is-active {
     max-height: calc(100vh - var(--header-height));
+    overflow: auto;
     visibility: visible;
-    transition: max-height 0.5s ease-out;
+    transition: max-height 0.5s ease-in;
+    animation: hide-scroll 0.5s backwards;
   }
 
   &__item {

diff --git a/components/global/Header/index.js b/components/global/Header/index.js
@@ -25,7 +25,7 @@ import SRAuthStatus from "../../auth/SRAuthStatus";
 
 export default function Header({ navItems, userProfilePage }) {
   const [mobileNavActive, setMobileNavActive] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [desktopNavActive, setDesktopNavActive] = useState(false);
   const [mobileLogoActive, setMobileLogoActive] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -57,7 +57,7 @@ export default function Header({ navItems, userProfilePage }) {
     <header
       ref={ref}
       className={`c-global-header ${
-        visible || mobileNavActive || isOpen ? "" : "invisible"
+        visible || mobileNavActive || desktopNavActive ? "" : "invisible"
       }`}
     >
       <a href="#page-content" className="c-global-header__skip-link">
@@ -79,7 +79,11 @@ export default function Header({ navItems, userProfilePage }) {
         </Link>
       </div>
       <nav className="c-global-header__nav-block">
-        <Navigation items={navItems} theme="desktop" isOpenSetter={setIsOpen} />
+        <Navigation
+          items={navItems}
+          theme="desktop"
+          desktopSetter={setDesktopNavActive}
+        />
       </nav>
       <div className="c-global-header__search-block">
         <SearchBar />

diff --git a/theme/styles/abstracts/_variables.scss b/theme/styles/abstracts/_variables.scss
@@ -67,7 +67,7 @@ $header: (
   layout-breakpoint: 1625px,
   breakpoint-for-search-bar: 850px,
   nav-link-padding-lateral: 1em,
-  nav-width-desktop: 600px,
+  nav-width-desktop: 450px,
   nav-width-mobile: 300px,
   button-width-tablet: 114px,
   button-width-mobile: 60px,