fix: alignment and load fixes for Nav2025 (#698)

* fix: alignment and load fixes for Nav2025 * Tweak alignment, keep mobile styles * Shadow tweak
comicrelief · Jan 24, 2025 · 4e6ae91 · 4e6ae91
1 parent e83efbe
commit 4e6ae91
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/components/Organisms/Header2025/Header2025.style.js b/src/components/Organisms/Header2025/Header2025.style.js
@@ -14,11 +14,11 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   height: 75px;
 
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
-    height: auto;
+    height: 86px;
   }
 
   ${({ showBoxShadow }) => showBoxShadow && css`
-    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.05);
   `};
 `;
 
@@ -66,12 +66,13 @@ const DonateButtonWrapperTop = styled.div`
   display: flex;
   justify-content: center;
   margin-left: 5px;
+  height: 2.8rem;
 
   // Donate button
   a {
     width: 100%;
+    height: inherit;
     transition: width 0.4s cubic-bezier(0.5, 1.5, 0.5, 0.80);
-  
     &:hover,
     &:focus {
       width: 100%;

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js b/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js
@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useState, useEffect, useCallback, useMemo
+} from 'react';
 import PropTypes from 'prop-types';
 
 import Text from '../../../Atoms/Text/Text';
@@ -50,7 +52,7 @@ const HeaderNav2025 = ({
   };
 
   // Process the nav items on initial mount:
-  useEffect(() => {
+  useMemo(() => {
     // Divide up nav items accordingly and determine breakpoint,
     // assigned as local vars since useState won't be ready in time below:
     const theseItems = MoreNavPreProcess(menuGroups, characterLimit);

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js b/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js
@@ -121,11 +121,11 @@ const SubNavMenu = styled.ul`
     padding: 0;
     position: absolute;
     top: 86px;
-    left: -42px;
+    left: -29px;
     border-radius: 0 0 25px 25px;
     transition: opacity ${transitionDuration}s linear;
     opacity: 0;
-    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.05);
   }
 `;
 
@@ -157,6 +157,11 @@ const SubNavLink = styled(NavLinkClass)`
   color: ${({ theme }) => theme.color('black')};
   height: auto;
   position: relative;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    padding: 20px 30px 22px;
+  }
+
 `;
 
 /**

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js b/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js
@@ -164,7 +164,7 @@ const MoreNavSubItem = styled(MoreSubNavItem)`
 `;
 
 const MoreNavNestedLink = styled(NavLink)`
-  padding: 20px 25px 22px 42px;
+  padding: 20px 30px 22px 30px;
 
   > div {
     height: auto;