I am trying to create a left side-bar that toggles state(show/hide)
States
x and content has a width calc(100vw - x)This is what I have done, but that transition seems a bit off and it feels like margin-left is not the way to go with the transition.
document.addEventListener('DOMContentLoaded', function () {
const WIDTH = '250px';
let opened = false;
const button = document.querySelector('#toggleSidebar');
const sidebar = document.querySelector('.sidebar__container .sidebar');
const sidebarContent = document
.querySelector('.sidebar__container .sidebar__content');
button.addEventListener('click', function () {
opened = !opened;
if (opened) {
sidebar.style.width = WIDTH;
sidebarContent.style.marginLeft = WIDTH;
sidebar.classList.add('sidebar--open');
} else {
sidebar.style.width = '0px';
sidebarContent.style.marginLeft = '0px';
sidebar.classList.remove('sidebar--open');
}
});
});.sidebar__container {
display: flex;
height: 150px;
position: relative;
}
.sidebar__container .sidebar {
position: absolute;
left: -100px;
height: 100%;
background: lightblue;
transition: 0.6s;
}
.sidebar__container .sidebar--open {
transition: 0.6s;
left: 0;
}
.sidebar__container .sidebar__content {
background-color: lightcoral;
flex: 1;
transition: 0.6s;
}<button id="toggleSidebar">Toggle</button>
<div class="sidebar__container">
<aside class="sidebar">
Side Bar Menu
</aside>
<section class="sidebar__content">
Main Content
</section>
</div>Any pointers on how to do it will be helpful.
P.S: I cannot set the width on CSS as I am trying to make it a shareable component
Fiddled a little bit, and this seems more smooth (Chrome):
document.addEventListener('DOMContentLoaded', function () {
const WIDTH = '250px';
let opened = false;
const button = document.querySelector('#toggleSidebar');
const sidebar = document.querySelector('.sidebar__container .sidebar');
button.addEventListener('click', function () {
opened = !opened;
sidebar.style.flexBasis = opened ? WIDTH : '0px';
});
});.sidebar__container {
display: flex;
height: 150px;
position: relative;
}
.sidebar__container .sidebar {
flex: 0;
height: 100%;
background: lightblue;
overflow:hidden;
transition: 0.6s;
}
.sidebar__container .sidebar__content {
background-color: lightcoral;
flex: 1;
transition: 0.6s;
}<button id="toggleSidebar">Toggle</button>
<div class="sidebar__container">
<aside class="sidebar">
Side Bar Menu
</aside>
<section class="sidebar__content">
Main Content
</section>
</div>The key is to use flex-basis instead of left/margin-left, since your container is already flex.