My goal is to create a sidebar that shifts to the right from the left side and makes space on the page when the hamburger menu is pressed. I have made progress in achieving this, but I am encountering difficulties with the animation.
const btnToggleSideBar = document.querySelector(".btn-toggle-sidebar")
const sideBar = document.querySelector(".side-bar");
const containerBefore = document.querySelector(".before");
btnToggleSideBar.onclick = (e) => {
containerBefore.classList.toggle("hide");
sideBar.classList.toggle("hidden");
};button {
cursor: pointer;
}
.cont-outer {
display: flex;
position: relative;
height: 150px;
width: 550px;
}
.side-bar {
background-color: red;
transition: transform 1000ms ease;
position: absolute;
inset: 0 75% 0 0;
z-index: 1;
}
.side-bar.hidden {
transform: translateX(-100%);
}
.cont-inner {
display: flex;
flex-grow: 1;
}
/* This pushes the main content to the right so the sidebar doesn't cover it */
.before {
flex-grow: 1;
background-color: #a3a3a3;
transition: flex-grow 1000ms ease;
}
.before.hide {
flex-grow: 0;
}
.main-page {
background-color: blue;
flex-grow: 3;
}<button class="btn-toggle-sidebar">toggle sidebar</button>
<div class="cont-outer">
<div class="side-bar">
<h4>list of items</h4>
<ul>
<li>apples</li>
<li>oranges</li>
<li>pineapples</li>
</ul>
</div>
<div class="cont-inner">
<div class="before"></div>
<div class="main-page"></div>
</div>
</div>During the animation, the .before div becomes visible when hiding the sidebar, which is not intended. The issue arises as the .before element shrinks at a slower pace than the sidebar moves to the left, despite both elements having the same animation timing and style.