aside{background-color:var(--dark);color:var(--light);display:flex;flex-direction:column;min-height:100vh;overflow:hidden;padding:1rem;transition:.2s ease-in-out;width:calc(2rem + 32px)}aside .flex{flex:1 1 0%}aside .logo{margin-bottom:1rem}aside .logo img{width:2rem}aside .menu-toggle-wrap{display:flex;justify-content:flex-end;margin-bottom:1rem;position:relative;top:0}aside .menu-toggle-wrap,aside .menu-toggle-wrap .menu-toggle{transition:.2s ease-in-out}aside .menu-toggle-wrap .menu-toggle .material-icons{color:var(--light);font-size:2rem;transition:.2s ease-out}aside .menu-toggle-wrap .menu-toggle:hover .material-icons{color:var(--primary);transform:translate(.5rem)}aside .button .text,aside h3{opacity:0;transition:opacity .3s ease-in-out}aside h3{color:var(--grey);font-size:.875rem;margin-bottom:.5rem;text-transform:uppercase}aside .menu{margin:0 -1rem}aside .menu .button{align-items:center;display:flex;padding:.5rem 1rem;text-decoration:none;transition:.2s ease-in-out}aside .menu .button .material-icons{font-size:2rem}aside .menu .button .material-icons,aside .menu .button .text{color:var(--light);transition:.2s ease-in-out}aside .menu .button:hover{background-color:var(--dark-alt)}aside .menu .button:hover .material-icons,aside .menu .button:hover .text{color:var(--primary)}aside .menu .button.router-link-exact-active{background-color:var(--dark-alt);border-right:5px solid var(--primary)}aside .menu .button.router-link-exact-active .material-icons,aside .menu .button.router-link-exact-active .text{color:var(--primary)}aside .footer{opacity:0;transition:opacity .3s ease-in-out}aside .footer p{color:var(--grey);font-size:.875rem}aside.is-expanded{width:var(--sidebar-width)}aside.is-expanded .menu-toggle-wrap{top:-3rem}aside.is-expanded .menu-toggle-wrap .menu-toggle{transform:rotate(-180deg)}aside.is-expanded .button .text,aside.is-expanded h3{opacity:1}aside.is-expanded .button .material-icons{margin-right:1rem}aside.is-expanded .footer{opacity:0}@media (max-width:1024px){aside{position:absolute;z-index:99}}:root{--primary:#4ade80;--primary-alt:#22c55e;--grey:#64748b;--dark:#1e293b;--dark-alt:#334155;--light:#f1f5f9;--sidebar-width:300px}*{box-sizing:border-box;font-family:Fira sans,sans-serif;margin:0;padding:0}body{background:var(--light)}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;outline:none}.app{display:flex}.app main{flex:1 1 0;padding:2rem}@media (max-width:1024px){.app main{padding-left:6rem}}