This is for responsive web design, and will show how to hide the sidebar when the screen is reduced to lower than 640px.
You can either resize your window or switch to portrait mode to see how the following codes affect the layout.
The first function is to close the sidebar of the small window, and reopen the sidebar of the big window if the user is resizing the body window.
The second function is to open the sidebar of the small window if the user clicks the menu icon.
The third function is to close the sidebar of the small window if the user clicks the close (X) icon on the sidebar.
function sidebartransition(){
var w = window.outerWidth;
var sidebar = document.getElementsByClassName('sidebar')[0];
console.log(w);
if (w>=640) {openNav();sidebar.style.display = 'block';}
else {closeNav();}
}
function openNav(){
var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.display = "block";
}
function closeNav(){
var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.display = "none";
}
<body onresize="sidebartransition()">
<div class="content">
<div class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
</div>
<div style="position:absolute;float:right;right:20px;bottom:10px;">
<div><a onclick="openNav()" class="fa fa-bars bar"></a></div>
</div>
</body>
/*big screen*/
.content{padding:0% 5%;height:95vh; }
.sidebar{width:20%;height:100%; float:left; overflow-y:scroll}
.iframecontent{width:80%;height:100%;float:left}
a.bar{text-align:center;padding:0;width:30px;font-size:30px;display:none;}
a.up{text-align:center;padding:0;width:30px;font-size:30px;color:lightgreen}
a.closebtn{display:none;}
/*small screen*/
@media only screen and (max-width:640px){
.content{padding:0;height:95vh; }
.sidebar{position:absolute;width:20%;height:100%;right:10px;bottom:10px;overflow-y:scroll;z-index:1;background-color:black;padding:0 20px 0 5px;border-left:1px solid white;display:none;}
.iframecontent{width:100%;height:100%;float:left}
a.closebtn{position:fixed;text-align:center;float:right;padding:5px;margin-right:5px;font-size:20px;display:block;width:20px;background-color:red;float:right;right:5px;bottom:5px;}
a.bar{.bar;border:1px solid white;display:block;}
}