CODEWITHSUNDEEP
javascriptsidebar
OscarDev
OscarDev

Reputation: 977

Close SideBar with Javascript

I need to close my sidebar with JavaScript. I try with the following code, but when I click on the icon that executes the opening of the sidebar, it simply does not open it anymore because the display:none is executed immediately.

This is my code with which I open and close the SideBar:

function openNavCategories() { 
    const overlayContent = document.getElementById('overlayContent-categories');

    document.getElementById('nav-categories').style.width = '30%';
    overlayContent.style.display = 'block';
    overlayContent.style.width = '100%';
    document.getElementById('category-icon').style.display = 'none';
    document.getElementById('category-icon-open').style.display = 'block';
}

function closeNavCategories() {
    const navCategories = document.getElementById('nav-categories');
    navCategories.style.width = '0%';
    navCategories.style.transition = 'all 0.4s';
    document.getElementById('overlayContent-categories').style.display = 'none';
}

And this one with which I try to verify that the click is outside of my SideBar but it does not even show it anymore:

window.addEventListener('mouseup', function(event) {
    var SideBar = document.getElementById('nav-categories');
    if(event.target != SideBar && event.target.parentNode != SideBar ) {
        SideBar.style.display = 'none';
    }
})

And this is my HTML and SCSS:

    <a href="#" class="closeBtn-categories" onclick="closeNavCategories()">X</a>

    <div id="overlayContent-categories" class="overlay__content-categories">
        <h2>Categorías</h2>
        <a href="#" onclick="closeNavCategories()">Categoría 1</a>
        <a href="#" onclick="closeNavCategories()">Categoría 2</a>
        <a href="#" onclick="closeNavCategories()">Categoría 3</a>
        <a href="#" onclick="closeNavCategories()">Categoría 4</a>
    </div>
</div>

SCSS:

    .overlay-categories {
      position: fixed;
      top:0;
      right:0; // de derecha
      width: 0%;
      height: 100%;
      background: rgba(0,0,0,.9);
      overflow-x: hidden;
      z-index: 10;
      transition: all 0.8s; 

      h2 {
        color: #506a80;
        margin: .2rem 0 .5rem 0rem;
      }

      a {
        padding: 10px;
        color: #ccc;
        font-size: 1rem;
        text-decoration: none;
        display:block;

        &:hover {
            color: #fff;
        }
      }

      .closeBtn-categories {
          position: absolute;
          top:20px;
          right: 35px;
          font-size: 2rem;
      }

      .overlay__content-categories {
          position: relative;
          display: none;
          top: 10%;
          width: 0%;
          text-align: center;
          margin-top: 20px;
          transition: all 2s linear;  
      }

  }

Can you help me? Thanks.

Upvotes: 1

Views: 1378

Answers (1)

Mr. Brickowski
Mr. Brickowski

Reputation: 1181

You can define css class for the opened/closed style rather than manipulate style attribute in the script runtime. It let you keep all the styles one place in the SCSS.

  /* defined nav-categories__closed class*/
  #nav-categories{
    width: 30%;
    .overlayContent-categories{
      display: block;
      width: 100%;
    }
  }

  #nav-categories.nav-categories__closed{
    width: 0%;
    transition: all 0.4s;

    .overlayContent-categories{
      display: none;
    }
  }

Modify openNavCategories() and closeNavCategories() to only toggling the nav-categories__closed

function openNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', false);

}

function closeNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', true);
}

You have a third function to close the sidebar when a click is performed outside the sidebar. You may need to modify the function to include in the checking: If the event target is also not the control to open the sidebar, then invoke closeNavCategories(). The purpose of closeNavCategories() and the core part of mouseup event more or less doing the same job: to close the sidebar. You can eliminate the repeating code by referring to the same function.

Example: https://jsfiddle.net/rgfbLyon/5/

Upvotes: 1

Related Questions