Sidebar

test

by maxibaezpy

HTML

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a class="icon">=</a>
  <ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  </ul>
</header>

<h1>Main</h1>
<img src="https://www.w3schools.com/html/img_girl.jpg" style="width:100%;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id urna faucibus, lobortis nunc a, sagittis turpis. Maecenas pellentesque mi libero, ac bibendum nunc tincidunt eu. Phasellus egestas, risus id tempus dignissim, justo lacus iaculis nibh, eu elementum arcu mi a purus. Fusce sagittis ut tellus blandit vulputate. Duis hendrerit arcu non mattis mattis. Fusce in rhoncus massa. Cras est orci, porttitor eu magna sed, vestibulum vulputate libero. Cras velit lacus, rhoncus et aliquet maximus, viverra nec nulla. Mauris volutpat sed sapien vitae ornare. Curabitur non ligula vitae orci commodo sodales eu in nulla. Etiam id augue bibendum, scelerisque tortor sed, condimentum eros.</p>
</body>

SCSS

header{
  position: absolute;
  top:0px;
  left:0px;
  
  a{
    padding: 10px;
    background: #eee;
    border: 1px solid #ddd;
    position: sticky;
    top: 0px;
    cursor:pointer;
  }
  ul{
    left:0px;
    margin:0px;
    padding:0px;
    width:240px;
    display:none;
    background: white;
    height:100%;
    position: fixed;

    li{
    border:1px solid #ddd;
    padding:5px;
    list-style-type:none;
    }
  }
}
body.no_scroll{
    overflow: hidden;
    position: fixed;
    top: 0px;
    width: 100%;
    height:100%;
}

JavaScript

var nav = document.querySelector("ul");
document.querySelector(".icon").addEventListener("click", (evt)=>{

if(nav.style.display == "none"){
		nav.style.display="block";
    document.body.classList.add("no_scroll")
  }else{
  	nav.style.display="none";
    document.body.classList.remove("no_scroll")
  }
})