I am new to React and am trying to create a mobile menu that I somehow created using several online resources. Now the problem is that my mobile menu is not closing after clicking on the Anchor links.
I have three different files (Burger, Navbar, and RightNav). Burger is just for icon transformation, Navbar is for main navigation, and RightNav is the mobile menu.
Can someone please specify how I can close the RightNav after clicking on any menu anchor link?
Burger.jsx file
import React, { useState } from 'react';
import styled from 'styled-components';
import RightNav from './RightNav';
const StyledBurger = styled.div`
width: 2rem;
height: 2rem;
position: fixed;
align-items:center;
right: 20px;
z-index: 20;
display: none;
top: 5%;
@media (max-width: 1000px) {
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
align-items:flex-start;
}
div {
width: 2rem;
height: 0.25rem;
background-color: ${({ open }) => open ? '#00a993' : '#00a993'};
border-radius: 10px;
transform-origin: 1px;
transition: all 0.3s linear;
&:nth-child(1) {
transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)' };
}
&:nth-child(2) {
transform: ${({ open }) => open ? 'translateX(100%)' : 'translateX(0)'};
opacity: ${({ open }) => open ? 0 : 1};
}
&:nth-child(3) {
transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
width: ${({ open }) => open ? '20px':'16px'};
}
}
`;
const Burger = () => {
const [open, setOpen] = useState(false)
return (
<>
<StyledBurger open={open} onClick={() => setOpen(!open)} id="burger" className='burger'>
<div />
<div />
<div />
</StyledBurger>
<RightNav open={open}/>
</>
)
}
export default Burger
RightNav.jsx file
import React from 'react';
import styled from 'styled-components';
import { NavHashLink } from 'react-router-hash-link';
const Ul = styled.ul`
list-style: none;
display: flex;
flex-flow: row nowrap;
li {
padding: 18px 10px;
}
@media (max-width: 1000px) {
z-index: 1;
flex-flow: column nowrap;
background-color: #13161B;
position: fixed;
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};
top: 10%;
right: 0;
width: 100%;
height:auto;
padding: 1.5rem;
align-items: center;
transition: transform 0.3s ease-in-out;
font-size: 16px;
font-family: 'Quicksand', sans-serif;
text-transform: uppercase;
font-weight: 600;
line-height: 7rem;
}
`;
const RightNav = ({ open, setOpen }) => {
return (
<Ul open={open} className="mobile-menu" id="mobile-menu">
<NavHashLink smooth to="/#welcome-section" activeClassName="selected" style={{ color: '#00a993' }}>
What
</NavHashLink>
<NavHashLink smooth to="/#how-section" activeClassName="selected" style={{ color: '#00a993' }}>
How
</NavHashLink>
<NavHashLink smooth to="/#IsItAThing-section" activeClassName="selected" style={{ color: '#00a993' }}>
Why
</NavHashLink>
<NavHashLink smooth to="/#team-section" activeClassName="selected" style={{ color: '#00a993' }}>
Who
</NavHashLink>
<NavHashLink smooth to="/#contact-section" activeClassName="selected" style={{ color: '#00a993' }}>
Where
</NavHashLink>
<a href='https://stories.therelevancehouse.com/' style={{ color: '#00a993' }}>
Stories
</a>
</Ul>
)
}
export default RightNav
Navbar.jsx file
import styled from 'styled-components';
import Burger from './Burger';
import React, { useEffect, useState } from 'react';
import '../App.css';
import logo from '../images/logomain.png'
import ln from '../images/LinkedIN_white.svg'
import medium from '../images/Medium_white.svg'
import twitter from '../images/Twitter_white.svg'
import fb from '../images/Facebook_white.svg'
import instagram from '../images/Instagram_white.svg'
import '../fonts/norwester.ttf'
import linkedinhover from '../images/LinkedinIconHover.svg'
import facebookhover from '../images/FacebookIconHover.svg'
import twitterhover from '../images/TwitterIconHover.svg'
import instagramhover from '../images/InstagramIconHover.svg'
import mediumhover from '../images/MediumIconHover.svg'
import { NavHashLink } from 'react-router-hash-link'
const Nav = styled.nav`
width: 100%;
border-bottom: 2px solid #f1f1f1;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
padding: 15px 0;
}
`
const Navbar = () => {
const [show, setShow] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);
useEffect(() => {
const controlNavbar = () => {
if (typeof window !== 'undefined') {
if ((window.scrollY > lastScrollY) && (window.scrollY > 200) && (window.innerWidth > 1000))
{
// document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("navtext").style.fontSize = "12px";
document.getElementById("navtext1").style.fontSize = "12px";
document.getElementById("navtext2").style.fontSize = "12px";
document.getElementById("navtext3").style.fontSize = "12px";
document.getElementById("navtext4").style.fontSize = "12px";
document.getElementById("navtext5").style.fontSize = "12px";
document.getElementById("nav-bar-logo1").style.height = "80px";
document.getElementById("nav").style.height = "90px";
// setShow(false);
} else {
setShow(true);
document.getElementById("navtext").style.fontSize = "14px";
document.getElementById("navtext1").style.fontSize = "14px";
document.getElementById("navtext2").style.fontSize = "14px";
document.getElementById("navtext3").style.fontSize = "14px";
document.getElementById("navtext4").style.fontSize = "14px";
document.getElementById("navtext5").style.fontSize = "14px";
document.getElementById("nav-bar-logo1").style.height = "105px";
document.getElementById("nav").style.height = "120px";
}
setLastScrollY(window.scrollY);
}
};
if (typeof window !== 'undefined') {
window.addEventListener('scroll', controlNavbar);
return () => {
window.removeEventListener('scroll', controlNavbar);
};
}
}, [lastScrollY]);
return (
<Nav >
<nav id='nav' className={ `${show && 'nav'}`} >
<a href="./" >
<img id='nav-bar-logo1' className='nav-bar-logo' alt="Marketing, Branding and Communications Agency"
src={logo} />
</a>
<div id='navigation-social'>
<a href='/'>
<img className='social-nav' src={ln} alt='linkedin' onMouseOver={e => e.currentTarget.src = linkedinhover} onMouseOut={e => e.currentTarget.src = ln} />
</a>
<a href='/'>
<img className='social-nav' src={medium} alt='medium' onMouseOver={e => e.currentTarget.src = mediumhover} onMouseOut={e => e.currentTarget.src = medium} />
</a>
<a href='/'>
<img className='social-nav' src={twitter} alt='twitter' onMouseOver={e => e.currentTarget.src = twitterhover} onMouseOut={e => e.currentTarget.src = twitter} />
</a>
<a href='/'>
<img className='social-nav' src={fb} alt='facebook' onMouseOver={e => e.currentTarget.src = facebookhover} onMouseOut={e => e.currentTarget.src = fb} />
</a>
<a href='/'>
<img className='social-nav' src={instagram} alt='instagram' onMouseOver={e => e.currentTarget.src = instagramhover} onMouseOut={e => e.currentTarget.src = instagram} />
</a>
</div>
<div id='navigation-items'>
<NavHashLink id="navtext" smooth to="/#welcome-section" activeClassName="selected" activeStyle={{ color: '#00a993' }}>
What
</NavHashLink>
<NavHashLink id="navtext1" smooth to="/#how-section" activeClassName="selected" activeStyle={{ color: '#00a993' }}>
How
</NavHashLink>
<NavHashLink id="navtext2" smooth to="/#IsItAThing-section" activeClassName="selected" activeStyle={{ color: '#00a993' }}>
Why
</NavHashLink>
<NavHashLink id="navtext3" smooth to="/#team-section" activeClassName="selected" activeStyle={{ color: '#00a993' }}>
Who
</NavHashLink>
<NavHashLink id="navtext4" smooth to="/#contact-section" activeClassName="selected" activeStyle={{ color: '#00a993' }}>
Where
</NavHashLink>
<a id="navtext5" href='https://stories.therelevancehouse.com/'>
Stories
</a>
</div>
</nav>
<Burger />
</Nav>
)
}
export default Navbar