Purpose of this code:

Navigation bar on the right which "opens" once clicked on, and "closes" once clicked on again, but also "closes" when clicked anywhere on the page once its "open".

Issues right now:

1. After running the code, on first click there is no response from navigation bar, then once clicked again it opens, and once clicked after that it closes which are intended.

2. I want the navigation bar to close when clicked on the navigation bar itself (which it does currently), but also close when clicking anywhere on the page itself(having issues with how to do this currently)

window.addEventListener("load", onl oadHandler);

function onl oadHandler(e) {
  let side = document.getElementById("mySidenav", moveNav);
  side.addEventListener("click", moveNav)
}

function moveNav() {
  const menu = document.getElementById('mySidenav')
  menu.style.width = menu.style.width === '100px' ? '250px' : '100px'
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" >
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

CodePudding user response：

This moves the state of the nav to a toggled variable, allowing us to use it in any function. On mySideNav click we toggle the toggled value, and stop propagation so that no other event listeners are triggered. We then add an additional event listener on window, that sets toggled to false. This will only get called if you're clicking outside of mySideNav.

There are definitely some other improvements we can make here but hopefully that helps in someway.

(function(){
let toggled = false;

window.addEventListener("load", onl oadHandler);

function onl oadHandler(e) {
  let side = document.getElementById("mySidenav");
  side.addEventListener("click", toggleNav);

  window.addEventListener('click', () => {
    if(toggled) { 
      toggled = false;
      moveNav();
    }
  });
}

function moveNav(e) {
  event.stopPropagation();
  const menu = document.getElementById('mySidenav');
  menu.style.width = toggled ? '250px' : '100px'
}

function toggleNav(e) {
  toggled = !toggled;
  moveNav(e);
}
})()

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" >
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

CodePudding user response：

On load there is no inline style for width applied to the menu, so menu.style.width is undefined. Your handler should account for that.

window.addEventListener("load", onl oadHandler);

function onl oadHandler(e) {
  let side = document.getElementById("mySidenav", moveNav);
  side.addEventListener("click", moveNav)
}

function moveNav() {
  const menu = document.getElementById('mySidenav')
  menu.style.width = menu.style.width === '100px' || !menu.style.width ? '250px' : '100px'
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" >
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>