Skip to content

Commit

Permalink
Change nav layout to display subnav on hover, inline on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@LanesGood
LanesGood committed Aug 29, 2024
1 parent 597b0ef commit 5ad7944
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 144 deletions.
2 changes: 1 addition & 1 deletion src/components/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const PageNavWrapper = styled.div`
z-index: 20;
display: flex;
flex-flow: column nowrap;
padding: 5rem 1rem 1rem;
padding: 5rem 2rem 1rem;
overflow: auto;
pointer-events: auto;
background-color: ${({ mode }) => mode && colors[mode].background};
Expand Down
307 changes: 164 additions & 143 deletions src/components/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,170 +2,191 @@ import React from "react"
import styled from "styled-components"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import {
Menu as DropdownMenu,
MenuList,
MenuButton,
MenuLink,
} from "@reach/menu-button"
import { colors, breakpoints } from "../theme"
import { POSITIVE, NEGATIVE } from "../utils/constants"
import { ChevronIcon } from "../icons"

const StyledLink = styled(Link)`
display: inline-flex;
align-items: center;
gap: 0.375rem;
`

const PrimeMenuBlock = styled.section`
color: #ffffff;
const GlobalMenu = styled.ul`
display: flex;
flex: 1;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0.5rem;
margin-left: 1rem;
list-style: none;
@media screen and (min-width: ${breakpoints["sm"]}) {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0;
list-style: none;
flex-flow: row nowrap;
box-shadow: rgba(68, 63, 63, 0.08) 0px -1px 1px 0px,
rgba(68, 63, 63, 0.08) 0px 2px 6px 0px;
border-radius: 0.125rem;
padding: 1rem;
width: 16rem;
}
`

const DropdownMenuButton = styled(MenuButton)`
margin: 0;
const PrimeMenuBlockTitle = styled.h6`
text-transform: uppercase;
background: none;
border: none;
text-shadow: none;
outline: none;
padding: 0;
font-size: initial;
font-weight: normal;
&:hover {
cursor: pointer;
opacity: 0.64;
}
font-size: 0.875rem;
font-weight: 400;
opacity: 0.64;
margin: 0 0 0.5rem 0;
display: none;
@media screen and (min-width: ${breakpoints["sm"]}) {
margin-left: 0.5rem;
}
@media screen and (min-width: ${breakpoints["md"]}) {
margin-left: 1rem;
display: block;
margin: 0 0 0.25rem 0;
}
`

const DropdownMenuList = styled(MenuList)`
background: white;
position: relative;
box-shadow: rgba(68, 63, 63, 0.08) 0px -1px 1px 0px,
rgba(68, 63, 63, 0.08) 0px 2px 6px 0px;
z-index: 501;
list-style: none;
padding: 1.5rem;
const PrimeMenu = styled.ul`
display: flex;
flex-direction: column;
flex-flow: column nowrap;
list-style: none;
gap: 0.5rem;
& > li {
margin: 0;
margin: 0;
@media screen and (min-width: ${breakpoints["sm"]}) {
flex-flow: row;
}
`
const ListLink = ({ to, children, mode }) => (
<li
css={`
> li {
position: relative;
${StyledLink} {
color: ${({ mode }) => mode && colors[mode].text};
margin: 0;
text-transform: uppercase;
@media screen and (min-width: ${breakpoints["sm"]}) {
margin-left: 0.5rem;
}
@media screen and (min-width: ${breakpoints["md"]}) {
margin-left: 1rem;
}
@media screen and (min-width: ${breakpoints["sm"]}) {
margin: 0 0 0 1rem;
}
}
${PrimeMenuBlockTitle} {
color: ${({ mode }) => mode && colors[mode].text};
}
${PrimeMenuBlock} {
transition: all 0.16s ease 0s;
@media screen and (min-width: ${breakpoints["sm"]}) {
position: absolute;
right: 0;
background: #ffffff;
visibility: hidden;
opacity: 0;
transform: translate(0, -0.25rem);
}
}
> li:hover
${/* sc-sel */ PrimeMenuBlock},
> li:focus-within
${/* sc-sel */ PrimeMenuBlock},
${/* sc-sel */ PrimeMenuBlock}:hover,
${/* sc-sel */ PrimeMenuBlock}:focus {
visibility: visible;
opacity: 1;
@media screen and (min-width: ${breakpoints["sm"]}) {
transform: translate(0, 0.25rem);
&::before {
content: "";
position: absolute;
left: 0;
bottom: 100%;
background: #ffffff;
height: 0.25rem;
width: 100%;
display: block;
}
`}
>
<Link
to={to}
activeStyle={{
borderBottom: `1px solid ${colors[mode].text}`,
fontWeight: `bold`,
}}
css={`
color: ${colors[mode].text};
`}
partiallyActive={true}
>
{children}
</Link>
</li>
)

ListLink.propTypes = {
to: function (props, propName, componentName) {
// validate that prop `to` links to an existing page
if (
!/(\/explore|\/glossary|\/about|\/faq|\/contact)/.test(props[propName])
) {
return new Error(
"Invalid prop `" +
propName +
"` supplied to" +
" `" +
componentName +
"`. Validation failed."
)
}
},
children: PropTypes.string.isRequired,
mode: PropTypes.oneOf([POSITIVE, NEGATIVE]),
}
}
`

const PrimeSubmenu = styled.ul`
display: flex;
flex-flow: column nowrap;
padding: 0.25rem 1rem;
margin: 0;
gap: 0.5rem;
list-style: none;
`

const activeStyles = {
borderBottom: `1px solid`,
fontWeight: `bold`,
}
const NavList = ({ mode, isMediumDown }) => {
console.log(isMediumDown)
return (
<GlobalMenu>
<ListLink to="/explore/campaigns" mode={mode}>
Explore
</ListLink>
<ListLink to="/about" mode={mode}>
About
</ListLink>
{isMediumDown ? (
<>
<ListLink to="/user-guide" mode={mode}>
User Guide
</ListLink>
<ListLink to="/glossary" mode={mode}>
Glossary
</ListLink>
<ListLink to="/faq" mode={mode}>
FAQS
</ListLink>
</>
) : (
<DropdownMenu>
<DropdownMenuButton
css={`
color: ${colors[mode].text};
`}
as={isMediumDown ? "ul" : null}
>
Learn <span aria-hidden>▾</span>
</DropdownMenuButton>
<DropdownMenuList>
<MenuLink as={ListLink} to="/user-guide" mode={mode}>
User Guide
</MenuLink>
<MenuLink as={ListLink} to="/glossary" mode={mode}>
Glossary
</MenuLink>
<MenuLink as={ListLink} to="/faq" mode={mode}>
FAQS
</MenuLink>
</DropdownMenuList>
</DropdownMenu>
)}
<ListLink to="/contact" mode={mode}>
Contact
</ListLink>
</GlobalMenu>
<PrimeMenu mode={mode}>
<li>
<StyledLink
to="/explore"
title="View the explore page"
activeStyle={activeStyles}
partiallyActive={true}
>
Explore
</StyledLink>
</li>
<li>
<StyledLink to="">
Learn{" "}
{!isMediumDown && (
<ChevronIcon
role="img"
color={colors[mode].text}
aria-label="chevron-icon"
/>
)}
</StyledLink>
<PrimeMenuBlock>
<PrimeMenuBlockTitle>Learn</PrimeMenuBlockTitle>
<PrimeSubmenu aria-label="submenu">
<li>
<StyledLink
to="/glossary"
title="Explore the glossary"
activeStyle={activeStyles}
>
Glossary
</StyledLink>
</li>
<li>
<StyledLink
to="/faq"
title="Explore the FAQ"
activeStyle={activeStyles}
>
FAQ
</StyledLink>
</li>
<li>
<StyledLink
to="/user-guide"
title="Explore the user guide"
activeStyle={activeStyles}
>
User Guide
</StyledLink>
</li>
</PrimeSubmenu>
</PrimeMenuBlock>
</li>
<li>
<StyledLink to="/about" title="Learn more" activeStyle={activeStyles}>
About
</StyledLink>
</li>
<li>
<StyledLink
title="Send feedback"
to="/contact"
activeStyle={activeStyles}
>
Contact
</StyledLink>
</li>
</PrimeMenu>
)
}

Expand Down

0 comments on commit 5ad7944

Please sign in to comment.