Animated 3piece Flexbox

by amindunited

HTML

<app-container class="app_body">
  <app-nav class="main_nav">
    <nav>
      <ul>
        <li>Home</li>
        <li>Content</li>
        <li>About</li>
      </ul>
    </nav>
  </app-nav>
  <main>
    <article class="main_article">
      <h1>
        Main Article
      </h1>
    </article>
    <div class="grid_nav closed">
      <h2>
      Grid
      </h2>
    </div>
  </main>
</app-container>

CSS

html, body {
  margin: 0px;
  padding: 0px;
}
.app_body {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: fixed;
  width: auto;
  height: auto;
  background-color: white;
  display: flex;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left:30px;
}
.main_nav {
  position: absolute;
  z-index: 99;
  width: 25%;
  min-width: 20px;
  background-color: rgba(0,0,0,.75);
  top: 0px;
  left: 0px;
  bottom: 0px;
  transition: width 300ms ease-in-out;
}
.main_nav.closed {
  width: 30px;
  overflow: hidden;
}
main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.grid_nav {
  background-color: pink;
  width: 100%;
  height: 100%;
  transition: width 300ms ease-in-out;
}
.grid_nav.closed {
  width: 50%;
}
.main_article {
  background-color: lightskyblue;
  width: 50%;
  height: 100%;
  transition: width 300ms ease-in-out;
}
.main_article.closed {
  min-width: 0px;
  width: 0px;
  overflow: hidden;
}

JavaScript

/*
	main nav
*/
var mainNav = document.querySelector('.main_nav');
mainNav.addEventListener('click', function(){
	mainNav.classList.toggle('closed');
});

var mainArticle = document.querySelector('.main_article');
var gridNav = document.querySelector('.grid_nav');
gridNav.addEventListener('click', function(){
	mainArticle.classList.toggle('closed');
	gridNav.classList.toggle('closed');

});