Olá.
Quando clico no ícone do menu, ele aparece sem problemas. Porém, se clico em qualquer outro lugar da página, ele também aparece, o que não deveria acontecer.
Não encontrei nenhum problema parecido sendo relatado aqui no fórum. Alguém pode dar uma ajuda?
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HZC | Home</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="header">
<button class="header__menu" aria-label="Menu"><i></i></button>
<img src="assets/img/logo.svg" alt="HZC Logo – Header" class="header__logo">
<button class="header__notifications" aria-label="Notifications"><i></i></button>
</header>
<nav class="sidebar-menu">
<img src="assets/img/logo.svg" alt="HZC Logo – Sidebar" class="sidebar-menu__logo">
<a href="#" class="sidebar-menu__link sidebar-menu__link--home sidebar-menu__link--active">Home</a>
<a href="#" class="sidebar-menu__link sidebar-menu__link--videos">Videos</a>
<a href="#" class="sidebar-menu__link sidebar-menu__link--spots">Spots</a>
<a href="#" class="sidebar-menu__link sidebar-menu__link--members">Members</a>
<a href="#" class="sidebar-menu__link sidebar-menu__link--shirts">Shirts</a>
<a href="#" class="sidebar-menu__link sidebar-menu__link--liveries">Liveries</a>
</nav>
<script type="text/javascript" src="main.js"></script>
</body>
</html>CSS:
...
.sidebar-menu {
display: flex;
flex-direction: column;
background-color: #15191C;
width: 75vw;
height: 100vh;
position: absolute;
left: -100vw;
transition: .4s;
}
.sidebar-menu--active {
left: 0;
transition: .4s;
}
...
JavaScript:
const menuButton = document.querySelector('.header__menu');
const menu = document.querySelector('.sidebar-menu');
menuButton = addEventListener('click', () => {
menu.classList.toggle('sidebar-menu--active');
})
