:root{--width: 300px}.grid-container{display:grid;grid-template-columns:1fr;grid-template-rows:4em 1fr;grid-template-areas:"header" "main" "footer";height:100vh}.header{grid-area:header}.main{grid-area:main}.footer{grid-area:footer}.sidenav{grid-area:sidenav;display:flex;flex-direction:column;height:100%;width:var(--width);position:fixed;overflow-y:auto;z-index:2;background-color:#394263;transform:translate(calc(var(--width) * -1));transition:all .6s ease-in-out}.sidenav.active{transform:translate(0)}.sidenav__close-icon{position:absolute;visibility:visible;top:8px;right:12px;cursor:pointer;font-size:20px;color:#ddd}.menu-icon{display:block}@media only screen and (min-width: 46.875em){.grid-container{grid-template-columns:var(--width) 1fr;grid-template-areas:"sidenav header" "sidenav main" "sidenav footer"}.sidenav{display:flex;flex-direction:column}.sidenav{position:relative;transform:translate(0)}.sidenav__close-icon{visibility:hidden}.menu-icon{display:none}}