Skip to content

Commit

Permalink
Merge pull request #589 from neontribe/mobile-menu-display
Browse files Browse the repository at this point in the history 
Conditionally render menu container and add accessible name
  • Loading branch information
@Nikomus
Nikomus authored Jan 16, 2023
2 parents fb81f8d + 4903282 commit fbc6cdd
Showing 1 changed file with 41 additions and 33 deletions.
74 changes: 41 additions & 33 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const DesktopNav = () => {
</ul>

<style jsx>{`
.nav {
display:flex;
}
Expand All @@ -60,7 +60,7 @@ const DesktopNav = () => {
justify-content: space-between;
flex-direction: row;
width: auto;
list-style: none;
Expand All @@ -72,13 +72,13 @@ const DesktopNav = () => {
margin-left: 3rem;
}
@media (min-width:500px) and (max-width:700px) {
.list {
justify-content:flex-start;
}
`}</style>
</nav>
Expand Down Expand Up @@ -121,33 +121,41 @@ const Header = () => {
</div>
{windowSize > 500 && <DesktopNav />}
{windowSize <= 500 && (
<div className="hamburger-menu-container">
<button className="hamburger" onClick={() => setIsOpen(!isOpen)}>
<>
<button
className="hamburger"
onClick={() => setIsOpen(!isOpen)}
aria-label="Menu"
aria-expanded={isOpen}
aria-controls={isOpen ? 'menu' : null}
>
&#8801;
</button>
<nav className="mobile-nav">
{isOpen && (
<ul
className={classNames(
'list',
windowSize < 500 && 'z-value'
)}
>
<li className="first-item">
<NavLink active to="/our-work">
Our Work
</NavLink>
</li>
<li>
<NavLink to="/the-tribe">The team</NavLink>
</li>
<li>
<NavLink to="/contact-us">Contact</NavLink>
</li>
</ul>
)}
</nav>
</div>
{isOpen && (
<div className="hamburger-menu-container" id="menu">
<nav className="mobile-nav">
<ul
className={classNames(
'list',
windowSize <= 500 && 'z-value'
)}
>
<li className="first-item">
<NavLink active to="/our-work">
Our Work
</NavLink>
</li>
<li>
<NavLink to="/the-tribe">The team</NavLink>
</li>
<li>
<NavLink to="/contact-us">Contact</NavLink>
</li>
</ul>
</nav>
</div>
)}
</>
)}
</header>
</ConstrainedWidth>
Expand Down Expand Up @@ -226,14 +234,14 @@ const Header = () => {
}
.hamburger {
align-self: flex-end;
background: none;
color: white;
border: none;
color: white;
display: flex;
font-size: 3rem;
margin: 0;
padding-right: 1rem;
display: flex;
align-self: flex-end;
z-index: 5;
}
`}</style>
</div>
Expand Down

1 comment on commit fbc6cdd

@vercel
Copy link

@vercel vercel bot commented on fbc6cdd Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

neontribe-www – ./

neontribe-www-neontribe.vercel.app
neontribe-www-git-main-neontribe.vercel.app
www.neontribe.co.uk

Please sign in to comment.