Navigation menu sidebar not closing with click on document-CodePudding

I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.

HTML:

<!DOCTYPE html>
<html lang="en">
<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>Portfolio.</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
  <link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
  <link rel="manifest" href="Favicon/site.webmanifest">
  <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
  <header id="header">
    <div id="container">
      <nav id="nav-bar">
        <a href="" id="nav-brand">Portfolio.</a>
        <ul id="nav-menu">
          <div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
          <div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
          <div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
          <div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
          <div id="nav"><button id="resume-btn">Currículo</button></li></div>
        </ul>  
        <div >
          <h3 onclick="handleMenuToggle()">&#9776</h3>
        </div>         
      </nav>
    </div>
  </header>

<!-- Sections -->
  <main>
    <section id="hero"> <!-- Main section -->
      <div id="hero-txt">
        <h2>
          Seja bem vindo, eu sou
        </h2>
        <h1>
          Yan Calvo
        </h1>
        <p>
          Estudante de Ciência da computação e desenvolvedor web 
        </p>
        <div >
          <a href="https://www.linkedin.com/in/yan-calvo-078592252/" target="_blank"><i class='bx bxl-linkedin' ></i></a>
          <a href="https://github.com/yancalvo" target="_blank"><i class='bx bxl-github' ></i></a>
        </div>
      </div>    
    </section>
    <section id="about-me"> <!-- About section -->
      <div id="txt-container" >
        <h2>Sobre mim</h2>
        <p>
          Sou estudante de Ciência da computação, também
          focado em aprender tecnologias de forma
          independente. No momento me encontro dedicado a
          aprimorar as minhas habilidades através da
          experiência profissional e contato com outros
          profissionais dedicados.<br><br>
          O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
          Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
        </p>
      </div>
      <div  >
        <h4 id="quote">
          “<br>
            Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
          ”
        </h4>
        <h5>― Peter Drucker</h5>
      </div>       
    </section>
    <section id="experience"> <!-- Experience section -->
      <div id="txt-container" >
        <h2>Onde trabalhei  </h2>
        <p>
          Ainda em busca de oportunidades profissionais
        </p>
      </div>
    </section>

    <section id="projects"> <!-- Projects section -->
      <div id="txt-container" >
        <h2>Projetos</h2>
        <p>Trabalhos pessoais</p>
      </div>
      <div id="portfolio-content" >
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>
  
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>
  
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>
  
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>
  
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>
  
        <div >
          <img src="Img/work3.jpg">
          <div >
            <h3>Web Design</h3>
            <h5>Popup</h5>
          </div>
        </div>  
      </div>

    </section>
    <section id="habilities"> <!-- Contact section -->
      <div id="txt-container" >
        <h2>Competências</h2>
        <div id="habilities-container">
          <div id="hability-icons-container"></div>
          <img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
          <img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
          <img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
          <img id="hability-icon" src="Img/icons8-git-144.png" alt="">
          <img id="hability-icon" src="Img/icons8-github-128.png" alt="">
          <div id="habilities-description"></div>
        </div>
        
      </div>
    </section>
  </main>
<!-- Footer --> 
  <footer id="footer">
    <div id="footer-copyright">
      <h6>Projetado por Yan Calvo</h6>
    </div>
    <div id="social">
      <h6>Email para contato: [email protected]</h6>
    </div>
  </footer>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  position: relative;
  background-color: #ece7e1; 
}

html, body {
  overflow-x: hidden;
}

/* Header */

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(27,26,33,255);
  z-index: 200;
}

#container {
  width: 1800px;
  margin: auto;
}

#nav-bar {
  width: 95%;
  margin: auto;
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-brand {
  color: white;
  text-decoration: none;
  font-size: 30px;
}

#nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav {
  margin: auto 30px;
}
 
.menu-icon {
  display: none;
}

#link {
  margin-right: 15px;
  color: white;
  text-decoration: none;
  transition: color 0.15s;
}

#link:hover {
  color: gray;
  font-style: italic;
}

#resume-btn {
  width: 100px;
  font-weight: bold;
  font-size: 15px;
  color: rgba(27,26,33,255);
  background-color: #ece7e1;
  border-radius: 23.5px;
  border-style: solid;
  border-color: #ece7e1;
  padding: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, width 1.0s;
}

#resume-btn:hover {
  width: 150px;
}

/* Sections */

main {
  padding-top: 70px;
}

section {
  padding: 0px 100px;
}

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-gap: 4rem;
}

.social a {
  color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27,26,33,255);
    font-size: 17px;
    margin-right: 22px;
    margin-bottom: 30px;
  margin-top: 20px;
}

.social a:hover{
    transform: scale(1.1);
    transition: .5s;
}

#about-me {
  background-color: #191919;
  min-height: 500px;
  padding-top: 40px;
  margin-bottom: 100px;
  display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-gap: 2rem;
  white-space: normal;
}

#experience {
  min-height: 300px;
  padding-top: 40px;
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

#projects {
  background-color: #191919;
  min-height: 800px;
  padding-top: 40px;
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
    grid-gap: 2rem;
}

#portfolio-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto));
    grid-gap: 2rem;
    align-items: center;
    margin-top: 5rem;
    text-align: center;
    cursor: pointer;
}

.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    transition: all .40s;
}

.layer:hover{
    background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}

.layer h3{
    position: absolute;
    width: 100%;
    font-size: 25px;
    font-weight: 500;
    color: white;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .40s;
  margin-bottom: 7px;
}

.layer:hover h3{
    bottom: 52%;
    opacity: 1;
}

.layer h5{
    position: absolute;
    width: 100%;
    font-size:17px;
    font-weight: 500;
    color: white;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .40s;
}
.layer:hover h5{
    bottom: 48%;
    opacity: 1;
}

.col {
    position: relative;
}

.col img {
    max-width: 100%;
    width: 550px;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

#habilities {
  min-height: 500px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

li {
  list-style: none;
}

h1 {
  font-size: 90px;
  color: rgba(27,26,33,255);
  margin: 10px 0px 25px;
}

h2 {
  font-size: 30px;
  margin-bottom: 60px;
}

#about-me h2,
#projects h2
{
  color: #ece7e1;
}

#experience h2,
#habilities h2 {
  color: #191919;
}

#habilities-container {
  display: flex;
  flex-direction: column;
  align-items: ;
}

#hability-icon {
  width: 144px;
  height: 144px;
  transition: all 0.8s;
}

#hability-icon:hover {
  height: 155px;
  width: 155px;
}

h6 {
  font-size: 20px;
  color: white;
}

h4 {
  font-size: 40px;
  color: #ece7e1;
  font-style: italic;
}

h5 {
  color: rgba(27,26,33,255);
}

p {
  color: gray;
  text-align: justify;
}

#footer {
  background-color: #191919;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}

.active.fade-left {
  animation: fade-left 0.5s ease-in;
}
.active.fade-right {
  animation: fade-right 0.5s ease-in;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


@media(max-width:1800px) {
  #container {
    width: 100%;
  }
}

@media only screen and (max-width: 1015px) {
  #nav-menu {
    position: fixed;
    top: 70px;
    right: -100%;
    display: block;
    background-color: rgba(27,26,33,255);
    margin: 0;
    height: 100%;
    -webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
    box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
    width: 250px;
    transition: all 0.3s ease;
  }

  #nav-menu.show-nav {
    right: 0;
  }

  #nav {
    text-align: center;
    margin: 20px auto;
  }

  .menu-icon {
    color: white;
    display: block;
    margin: auto 0;
    padding: 0 20px;
    font-size: 30px;
    cursor: pointer;
  }

  #brush-img {
    display: none;
  }

  #about-me {
    display: flex;
    flex-direction: column;
  }
}

Javascript:

//Toggle sidebar 
const navContainer = document.getElementById('nav-menu')

function handleMenuToggle() {
  navContainer.classList.add('show-nav')
}

document.onclick = function(e) {
  if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
    navContainer.classList.remove('show-nav')
  }
}

//Scroll animation
function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i  ) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.

CodePudding user response：

By taking a look at : this question you could try to do it this way : create a navbar sublcass called like : navbar.open , and assign it these css properties :

/* If you use an id use #id_name or .classname if you use a class
*/
#sideNav.open {
  right: 0;
}

And then add to your javascript :

var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
  yournavbar.classList.remove("open");
};

And if you want your navbar to close if you click a part of it, just add this function :

//stop propagation on the side nav element
yournavbar.onclick = function(e) {
  e.stopPropagation()
}

I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.