<div class="container" id="js-container">
  <div class="main">
    <div class="content">
      <h1>Split screen menu</h1>
    </div>
    <div class="aside">
      <h2>Menu</h2>
    </div>
  </div>
  <span class="hamburger" id="js-hamburger"><i></i></span>
</div>

$primary-color        : #443875;
$secondary-color      : #9c9cbb;

$content-background   : $secondary-color;
$content-color        : $primary-color;
$aside-background     : $primary-color;
$aside-color          : #fff;
$aside-size           : 25%;
$hamburger-background : $primary-color;
$hamburger-color      : #fff;
$hamburger-size       : 4px;

* {
  box-sizing: border-box;
}

body, html{
  width: 100%;
  height: 100%;
}

body {
  padding: 1em;
  font-family:'helvetica neue', helvetica, arial, sans-serif;
}

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.main {
  width: 200%;
  height: 100%;
  margin-left: -100%;
  position: relative;
}

.content {
  background: $content-background;
  float: right;
  width: 50%;
  height: 100%;
  transition: width 300ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: $content-color;
  
  .active & {
    width: 25%;
  }
  
}

.aside {
  background: $aside-background;
  float: right;
  width: 25%;
  height: 100%;
  color: $aside-color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hamburger {
  position: absolute;
  width: 50px;
  height: 50px;
  background: $hamburger-background;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  &:hover {
    background:transparentize($hamburger-background, .5)
  }
  
  i {
    width: 50%;
    height: $hamburger-size;
    background: $hamburger-color;
    display: block;
    border-radius:2px;
    
    &:after,
    &:before {
      border-radius:2px;
      content: '';
      width:100%;
      height:$hamburger-size;
      background:inherit;
      display:block;
      position:relative
    }
    
    &:after {
      bottom:-$hamburger-size;
    }
    
    &:before {
      top:-($hamburger-size*2);
    }
    
  }
}

const hamburger = document.getElementById('js-hamburger');
const container = document.getElementById('js-container');


hamburger.addEventListener('click', () => {
  container.classList.toggle('active');
})