Flexbox and Left Sidebar Overlay - html

Question

How do I get the left sidebar to overlay the content instead of pushing the content? I want it overlay on mobile but push on web layout. Flexbox is a little new to me so not sure if I need a different layout to do this or if this is possible with flexbox? I'm guessing I need to remove the sidebar from the flexbox and use a fixed relative layout ??
I'm also using angular but I removed the angular code just for simplicity so don't mind the extra divs please.
<div class="wrapper">
<header class="header">
header
</header>
<div class="main">
<div class="left-sidebar">
left sidebar
</div>
<div class="main-content-wrapper">
<div class="main-content">
<h3>Main </h3>
</div>
<footer class="footer">
<p>content</p>
<p>content</p>
<p>content</p>
</footer>
</div>
</div>
</div>
body,
html {
height: 100%;
overflow: hidden;
}
header {
min-height: 60px;
flex: none;
width: 100%;
background-color: silver;
}
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
.main {
flex: 1;
display: flex;
.main-content-wrapper {
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
.main-content {
padding: 2rem;
flex: 1;
background-color: antiquewhite;
}
footer {
background-color: silver;
min-height: 300px;
flex-shrink: 0;
}
}
}
}
.left-sidebar {
width: 0;
height: 100%;
overflow: auto;
flex: none;
&.active {
width: 250px;
}
.left-sidebar-content {
padding: 1rem;
}
}

Answer 1

Try this, I actually made pretty much a new structure, although not that different to yours, (did remove some elements just to work with less code); I'm using flexbox to make the whole wrapper a flex container, as well as media queries to indicate when the sidebar should push the content to the side, and when to overlap the content along with an overlay.
document.getElementById('toggleBtn').onclick = function() {
document.getElementById('sidebar').classList.toggle('active');
document.getElementById('overlay').classList.toggle('hidden');
}
document.getElementById('overlay').onclick = function() {
document.getElementById('overlay').classList.toggle('hidden');
document.getElementById('sidebar').classList.toggle('active');
}
body {
margin: 0;
}
.wrapper {
display: flex;
align-items: stretch;
height: 100vh;
}
.main-content-wrapper {
width: 100%;
}
#sidebar {
min-width: 230px;
max-width: 230px;
background-color: lightgray;
transition: all 0.3s;
height: 100vh;
margin-left: -230px;
/* top layer */
z-index: 3
}
#sidebar.active {
margin-left: 0px;
}
#media (max-width: 580px) {
#sidebar {
position: fixed;
top: 0;
/* top layer */
z-index: 3
}
.overlay {
background-color: rgba(0, 0, 0, 0.425);
width: 100vw;
height: 100vh;
z-index: 2;
top: 0;
left: 0;
position: absolute;
}
.overlay.hidden {
display: none;
}
}
<div class="wrapper">
<div class="left-sidebar" id="sidebar">
left sidebar
</div>
<div class="main-content-wrapper">
<div class="main-content">
<h3>Main </h3>
<button type="button" id="toggleBtn">Toggle</button>
</div>
</div>
<div class="overlay hidden" id="overlay"></div>
</div>