general layout attempt orca v2

this is how we could do our raw html layout

HTML

<html>
<body>
<div class="layout">
  <div class="header">
    <div class="search">
      <input type="text" placeholder="search"/>
    </div>
    <div class="actionMenu">
      <div class="addEntity">
        (+)
      </div>
      <div class="userDropdown">
        User
      </div>
    </div>
  </div>
  <div class="main">
    <div class="sidebar">
      Sidebar here <button class="sidebar-close">close</button>
    </div>
    <div class="search">  
      Search results here
    </div>
    <div class="ttlv">
      <div class="header">        
        <div class="owner">
          Showing <strong>name</strong>
        </div>
        <div class="actionMenu">
          <div class="showInactive">
            show inactive
          </div>
          <div class="coOwnerFilter">
            filter coowner
          </div>
          <div class="coOwnerFilter">
            <button class="toggle-filter">
            filter
            </button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="levels">        
          TTLV Levels here
          <button class="sidebar-open">open sidebar</button>
        </div>      
        <div class="filters"></div>
      </div>
    </div>  
  </div>
</div>
</body>
</html>

SCSS

body,html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.layout {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  & > .header {
    background-color: #ddd;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    display: flex;
    justify-content: space-between;
    & > .actionMenu {
      display: flex;
    }
  }
  & > .main {
    background-color: yellow;
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    & > .sidebar {
      width: 300px;      
      background-color: pink;
    }
    & > .search {
      transition: width 1s ease-in-out;
      width: 300px;
      background-color: blue;
    }
    &:not(.sidebar-opened) > .sidebar {
      width: 0px;
    }
    &:not(.search-opened) > .search {
      width: 0px;
    }
    &.search-opened > .sidebar {
      display: none;
    }
    & > .ttlv {
      background-color: green;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      align-items: stretch;
      & > .header {
        background-color: #aaa;
        display: flex;
        justify-content: space-between;
        & > .actionMenu {
          display: flex;
        }
      }
      & > .content {
        display: flex;
        flex-grow: 1;
        & > .levels {
          flex-grow: 1;
        }
        & > .filters { 
          width: 300px;
          background-color: orange;
        }
        &:not(.filter-opened) > .filters {
          display: none;
        }
      }
    }
  }
}

JavaScript

$(".search input").on('focus', () => {
	$(".main").addClass("search-opened")
})
$(".search input").on('blur', () => {
	$(".main").removeClass("search-opened")
})
$(".sidebar-open").on('click', () => {
	$(".main").addClass("sidebar-opened")
})
$(".sidebar-close").on('click', () => {
	$(".main").removeClass("sidebar-opened")
})
$(".toggle-filter").on('click', () => {
	$(".content").toggleClass("filter-opened")
})