I am trying to create an animated sidebar. Initially i have a top navbar, a sidebar and a content div. Sidebar and content divs are inside a container div which has display flex row property. I am confused about transition. I want the sidebar show and hide when nav home is clicked which has a sliding effect. Right now I have a sliding sidebar but the content div is not getting full width of its parent when sidebar hides. How can I do this? Should I apply transition on flex or on transform? Any help is appreciated.
<body>
<nav>
<ul>
<li><button id="home">Home</button></li>
<li><button>Services</button></li>
<li><button>Operations</button></li>
<li><button>About</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
<div class="container">
<div id="sidebar" class="sidebar visible">
<ul>
<li><button>Inventories</button></li>
<li><button>Employees</button></li>
<li><button>Feedback</button></li>
<li><button>Projects</button></li>
</ul>
</div>
<div class="content" id="content">
LOrem issum dolor sit amet
</div>
</div>
</body>
nav{
width: 100%;
display: flex;
justify-content : center;
}
.container{
display: flex;
flex-direction: row;
}
.sidebar{
flex:1;
background-color: rgb(40,100,250);
height: 100vh;
transition: transform 0.5s linear;
transform: translatex(-100%);
}
.visible{
transform: translatex(0);
flex: 1;
}
.content{
background-color: rgb(33,31,31);
flex: 5;
text-align: center;
color: #fff;
transition: flex 0.5s ease-in-out;
}
.afterContent{
flex: 10;
}
const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
const content = document.getElementById("content");
homeButton.addEventListener("click", () => {
if (sidebarDiv.classList.contains("visible")) {
sidebarDiv.classList.remove("visible");
if(!content.classList.contains("afterContent")){
content.classList.add("afterContent");
}
} else {
sidebarDiv.classList.add("visible");
if(content.classList.contains("afterContent")){
content.classList.remove("afterContent");
}
}
});
Problem is that you just transform element, transforming will not change layout structure, it only affects element that you apply transform to and all its children.
Usually to achieve the result you want padding and position: absolute.
You have your sidebar element, that is position: absolute; top: 0; bottom: 0; left: 0;. To hide it you just transform it to the left. And then you have your content element that offsets menu with padding-left.
Here is a simple demo:
<html>
<head>
<style>
html, body {margin: 0; padding: 0}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.body {
position: relative;
}
.sidebar {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
width: 300px;
transition: transform 0.2s;
}
.content {
padding-left: 300px;
min-height: 500px;
background-color: teal;
transition: padding-left 0.2s;
}
.menu-closed > .sidebar {
transform: translateX(-300px);
}
.menu-closed > .content {
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">header menu</div>
<div id="body" class="body">
<nav class="sidebar">sidebar menu</nav>
<div class="content"><button onclick="menu()">nav</button> content</div>
<div>
<script>
const body = document.getElementById("body");
let menuClosed = false;
function menu() {
menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed");
menuClosed = !menuClosed;
}
</script>
</body>
</html>