Полноэкранное адаптивное меню, которое по-прежнему доступно при закрытии. ⇐ Html

[Anonymous]

Я работаю над веб-сайтом и включил полноэкранное меню, которое открывается при нажатии на значок меню. Однако я столкнулся с проблемой, из-за которой элементы меню (кнопки) по-прежнему доступны для нажатия, когда меню закрыто.
Я использую React.js + Scss.

Код: Выделить всё

const  MyNav = () => {
const toggleClass = (element, stringClass) => {
if(element.classList.contains(stringClass))
element.classList.remove(stringClass);
else
element.classList.add(stringClass);
}

useEffect(() => {
const body = document.querySelector('body');
const menu = document.querySelector('.menu-icon');
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
},[]);

console.log("this is being loaded");
return (







[list]
[*]Home
[*]About
[*]Portfolio
[*]Journal
[*]Contact
[/list]



)
}
export default MyNav;

Код: Выделить всё

$font--color:var(--primary);
$font--color--active:var(--primary);
$transition--length: .8;

//default state
.menu-icon{
$size: 30px;
height: $size;
width: $size;
position: fixed;
z-index:2;
left: 50px;
top: 30px;
cursor: pointer;
&__line{
height: 2px;
width: $size;
display: block;
background-color: $font--color;
margin-bottom: 4px;
transition: transform .2s ease, background-color .5s ease;
}
&__line-left{
width: $size / 2;
}
&__line-right{
width: $size / 2;
float: right;
}
}

.nav{
$width: 100vw;
$height: 100vh;
$font--size--calc: calc(2vw + 10px);
$transition--easing: cubic-bezier(.77,0,.175,1);
position: fixed;
z-index:1;
&:before,&:after{
content: "";
position: fixed;
width:$width;
height:$height;
background: rgba(#eaeaea, .2);
z-index: -1;
transition: transform $transition--easing $transition--length + s;
transform: translateX(0%) translateY(-100%);
}
&:after{
background: var(--highlight);
transition-delay: 0s;
}
&:before{
transition-delay: .1s;
}
&__content{
position: fixed;
top:50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
font-size: $font--size--calc;
font-weight: 200;
cursor: pointer;
}
&__list-item{
position: relative;
display: inline-block;
transition-delay: $transition--length + s;
opacity: 0;
transform: translate(0%, 100%);
transition: opacity .2s ease, transform .3s ease;
margin-right: 25px;
&:before{
content: "";
position: absolute;
background: $font--color--active;
width: 20px;
height: 1px;
top: 100%;
transform: translate(0%, 0%);
transition: all .3s ease;
z-index: -1;
}
&:hover{
&:before{
width: 100%;
}
}
}
}

//active state
body.nav-active{
$menu--items--count: 5;
.menu-icon{
&__line{
background-color: var(--primary);
transform: translateX(0px) rotate(-45deg);
}
&__line-left{
transform: translateX(1px) rotate(45deg);
}
&__line-right{
transform: translateX(-2px) rotate(45deg);
}
}
.nav{
visibility:visible;
&:before,&:after{
transform: translateX(0%) translateY(0%);
}
&:after{
transition-delay: .1s;
}
&:before{
transition-delay: 0s;
}
&__list-item{
pointer-events: all;
opacity: 1;
transform: translateX(0%);
transition: opacity .3s ease, transform .3s ease, color .3s ease;
@for $i from 0 through $menu--items--count {
&:nth-child(#{$i}){
transition-delay: $transition--length * $i / 8 + .5 + s;
}
}
}
}
}

Бонусные баллы, если вы расскажете мне, как сделать так, чтобы сайт не прокручивался, когда меню открыто.


Подробнее здесь: https://stackoverflow.com/questions/626 ... hen-closed