Skip to content

Commit

Permalink
Breakout MoreNav into own component
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndyEPhipps
AndyEPhipps committed Dec 3, 2024
1 parent 6ba0ef4 commit 1b2fbcd
Show file tree
Hide file tree
Showing 4 changed files with 368 additions and 220 deletions.
121 changes: 11 additions & 110 deletions src/components/Organisms/Header2024/HeaderNav2024/HeaderNav2024.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';

import Text from '../../../Atoms/Text/Text';
import BurgerMenu from '../Burger/BurgerMenu';
import MoreNav from './MoreNav';
import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
import { NavHelper, MoreNavPreProcess } from '../../../../utils/navHelper';
import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
Expand All @@ -19,14 +20,6 @@ import {
SubNavLink,
ChevronWrapper,
NavMetaIcons,
// More Nav stuff:
MoreNavLink,
MoreSubNavMenu,
MoreNavItem,
MoreNestedSubNavMenu,
MoreSubNavItem,
MoreNavNestedLink,
MoreSubNavLink,
DonateButtonWrapperBottom
} from './HeaderNav2024.style';

Expand Down Expand Up @@ -207,110 +200,18 @@ const HeaderNav = ({
);
})}

{/*
****************************
MORE NAV RENDER STARTS HERE:
****************************
*/}

{/* Only actually render 'More' nav stuff when we've got content */}
{(!isNotDesktop && processedItems.moreNavGroups.length > 0) && (
<MoreNavItem>
{/* The 'More' nav button: */}
<Text>
<MoreNavLink
href="#"
inline
// As this is purely used to hover-over, and never represents a
// direct link to a page, we can nip any click event in the bud:
onClick={e => { e.preventDefault(); }}
role="button"
aria-haspopup="true"
>
More
<ChevronWrapper>
<img src={menuGroupIcon} alt="Chevron icon" />
</ChevronWrapper>
</MoreNavLink>
</Text>

{/* The Ul to wrap each of the 'More Nav' menu groups */}
<MoreSubNavMenu
role="list"
isFocussed={!!isTabFocussed.more}
key="more-nav-ul"
>

{/* For each item in this menu group: */}
{processedItems.moreNavGroups.map(child => {
/* Grab the first links properties to use for our parent/button */
const thisFirstChild = child.links[0];
let thisUrl = NavHelper(thisFirstChild);
const relNoopener = (!allowListed(thisUrl) && 'noopener') || null;
const hasSubMenu = child.links && child.links.length > 1;
const hasPopUp = hasSubMenu ? 'true' : null;
thisUrl = InternalLinkHelper(thisUrl);

return (
<MoreSubNavItem key={child.title}>
{/* Either the Direct link (for a one-link menu item)
or a 'button' to show the submenu: */}
<MoreNavNestedLink
href={hasPopUp ? '#' : thisUrl}
inline
rel={relNoopener}
aria-haspopup={hasPopUp}
role={hasPopUp ? 'button' : 'link'}
onClick={hasPopUp ? e => toggleSubMenu(e, child.id) : null}
isSubMenuOpen={!!isSubMenuOpen[child.id]}
aria-expanded={!!isSubMenuOpen[child.id]}
onKeyUp={keyPressed(child.id)}
>
{thisFirstChild.title}

{hasSubMenu && (
<ChevronWrapper>
<img src={menuGroupIcon} alt="Chevron icon" />
</ChevronWrapper>
)}

</MoreNavNestedLink>

<>
{hasSubMenu && (
<MoreNestedSubNavMenu
role="list"
isSubMenuOpen={!!isSubMenuOpen[child.id]}
>
{child.links.map(subChild => {
const thisSubUrl = NavHelper(subChild);
return (
// 'More Nav' sub item:
<MoreSubNavItem key={thisSubUrl}>
<MoreSubNavLink
href={thisSubUrl}
inline
role="menuitem"
// Allows us to avoid using the 'display:none'
// approach so we can animate properly:
tabIndex={isSubMenuOpen[child.id] ? '0' : '-1'}
>
<Text>
{subChild.title}
</Text>
</MoreSubNavLink>
</MoreSubNavItem>
);
})}
</MoreNestedSubNavMenu>
)}
</>
</MoreSubNavItem>
);
})}
</MoreSubNavMenu>

</MoreNavItem>
<MoreNav
isTabFocussed={isTabFocussed}
processedItems={processedItems}
isSubMenuOpen={isSubMenuOpen}
keyPressed={keyPressed}
toggleSubMenu={toggleSubMenu}
navHelper={NavHelper}
allowListed={allowListed}
internalLinkHelper={InternalLinkHelper}
/>
)}

</NavMenu>
Expand Down
219 changes: 109 additions & 110 deletions src/components/Organisms/Header2024/HeaderNav2024/HeaderNav2024.style.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable no-multiple-empty-lines */
import styled, { css } from 'styled-components';
import styled from 'styled-components';

import Link from '../../../Atoms/Link/Link';
import hideVisually from '../../../../theme/shared/hideVisually';
Expand Down Expand Up @@ -390,106 +389,106 @@ const DonateButtonWrapperBottom = styled.div`
* **********
*/

const MoreSubNavMenu = styled(SubNavMenu)`
@media ${({ theme }) => theme.allBreakpoints('Nav')} {
// top: 88px
}
`;

const MoreNavLink = styled(NavLink)`
@media ${({ theme }) => theme.allBreakpoints('Nav')} {
:focus,
:hover,
:focus-within {
+ ${MoreSubNavMenu} {
display: flex;
}
}
}
`;

// Use for the 'More' link only
const MoreNavItem = styled(NavItem)`
@media ${({ theme }) => theme.allBreakpoints('Nav')} {
:hover,
:focus-within,
:focus {
> ${MoreSubNavMenu} {
visibility: visible;
opacity: 1;
display: flex;
}
}
:hover,
:focus,
:focus-within {
${MoreSubNavMenu} {
display: flex;
flex-direction: column;
}
}
}
`;

// Clone Of SubNavMenu, NESTED menu
const MoreNestedSubNavMenu = styled(SubNavMenu)`
@media ${({ theme }) => theme.allBreakpoints('Nav')} {
top: 0;
left: -1px;
border-radius: 0;
border-bottom: 0;
position: relative;
transition: max-height 0.5s cubic-bezier(0.5, 1.5, 0.5, 0.80);
max-height: 0;
border: 0;
box-shadow: none;
${({ isSubMenuOpen }) => (isSubMenuOpen && css`
// Calculating a realistic height ceiling (8 subnav items)
// to make animation as slick as possible
max-height: calc(57px * 8);
`)};
}
`;

const MoreSubNavItem = styled(SubNavItem)`
// Chevron icon
> a > div {
position: absolute;
width: 15px;
top: 13px;
right: 25px;
transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
}
:hover,
:focus,
:focus-within {
> a {
color: ${({ theme }) => theme.color('red')};
}
> a > div {
img {
filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
}
}
}
`;

const MoreNavNestedLink = styled(NavLink)`
padding: 20px 25px 18px;
${({ isSubMenuOpen }) => (isSubMenuOpen && css`
> div {
transform: rotate(-180deg);
}
`)};
`;

const MoreSubNavLink = styled(SubNavLink)`
//
`;
// const MoreSubNavMenu = styled(SubNavMenu)`
// @media ${({ theme }) => theme.allBreakpoints('Nav')} {
// // top: 88px
// }
// `;

// const MoreNavLink = styled(NavLink)`
// @media ${({ theme }) => theme.allBreakpoints('Nav')} {
// :focus,
// :hover,
// :focus-within {
// + ${MoreSubNavMenu} {
// display: flex;
// }
// }
// }
// `;

// // Use for the 'More' link only
// const MoreNavItem = styled(NavItem)`
// @media ${({ theme }) => theme.allBreakpoints('Nav')} {
// :hover,
// :focus-within,
// :focus {
// > ${MoreSubNavMenu} {
// visibility: visible;
// opacity: 1;
// display: flex;
// }
// }

// :hover,
// :focus,
// :focus-within {
// ${MoreSubNavMenu} {
// display: flex;
// flex-direction: column;
// }
// }
// }
// `;

// // Clone Of SubNavMenu, NESTED menu
// const MoreNestedSubNavMenu = styled(SubNavMenu)`
// @media ${({ theme }) => theme.allBreakpoints('Nav')} {
// top: 0;
// left: -1px;
// border-radius: 0;
// border-bottom: 0;
// position: relative;
// transition: max-height 0.5s cubic-bezier(0.5, 1.5, 0.5, 0.80);
// max-height: 0;
// border: 0;
// box-shadow: none;

// ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
// // Calculating a realistic height ceiling (8 subnav items)
// // to make animation as slick as possible
// max-height: calc(57px * 8);
// `)};
// }
// `;

// const MoreSubNavItem = styled(SubNavItem)`
// // Chevron icon
// > a > div {
// position: absolute;
// width: 15px;
// top: 13px;
// right: 25px;
// transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
// }

// :hover,
// :focus,
// :focus-within {
// > a {
// color: ${({ theme }) => theme.color('red')};
// }
// > a > div {
// img {
// filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
// }
// }
// }
// `;

// const MoreNavNestedLink = styled(NavLink)`
// padding: 20px 25px 18px;

// ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
// > div {
// transform: rotate(-180deg);
// }
// `)};
// `;

// const MoreSubNavLink = styled(SubNavLink)`
// //
// `;

export {
Nav,
Expand All @@ -501,13 +500,13 @@ export {
SubNavLink,
ChevronWrapper,
NavMetaIcons,
DonateButtonWrapperBottom,
DonateButtonWrapperBottom
// 'More Nav' stuff:
MoreNavLink,
MoreSubNavMenu,
MoreNavItem,
MoreNestedSubNavMenu,
MoreSubNavItem,
MoreNavNestedLink,
MoreSubNavLink
// MoreNavLink,
// MoreSubNavMenu,
// MoreNavItem,
// MoreNestedSubNavMenu,
// MoreSubNavItem,
// MoreNavNestedLink,
// MoreSubNavLink
};
Loading

0 comments on commit 1b2fbcd

Please sign in to comment.