header {
    height: 52px;
    background-color: #baffff91;
}

body {
    margin: 0px;
    position: relative;
}
aside {width: 300px;height: 100vh;position: absolute;transition: left 0.25s ease;top: 0px;}

aside + main {
    display: block;
    float: left;
    width: 100%;
    transition: margin 0.25s ease;top: 0px;
}

aside:not(.active) {
    left: -300px;
}

aside.active + main {
    margin-left: 300px;
}
span.sandwish, 
span.sandwish:before, 
span.sandwish:after {
    width:20px;
    height: 4px;
    display:block;
}
span.sandwish{
    position:relative;
    display: inline-block;
    box-sizing: border-box;
    color: transparent;
    margin-left: 50px;
    background-color: transparent;
    height: 24px;
    border-top: outset 10px transparent;
    border-bottom: outset 10px transparent;
    -webkit-box-shadow: inset 0px 5px 0 0 #000000FF;
    box-shadow: inset 0px 5px 0 0 #000000FF;
    transition: box-shadow 0.2s ease 0.25s;
}
span.sandwish:before, span.sandwish:after {
    content: '';
    background-color: #000000;
    position: absolute;
    transition: transform 0.2s linear,top 0.25s linear 0.2s,bottom 0.25s linear 0.2s;
}
span.sandwish:before{
    top: -8px;
    left: 0px;
}
span.sandwish:after{
    top: 8px;
}

span.sandwish.active,
.active>span.sandwish {
    box-shadow: 0px 5px 0 0 #00000000;
    transition: box-shadow 0.25s ease 0.2s;
    -webkit-box-shadow: inset 0px 5px 0 0 #00000000;
}
span.sandwish.active:before,
span.sandwish.active:after,
.active>span.sandwish:before,
.active>span.sandwish:after {
    top: 0px;
    left: 0px;
    bottom: 0px;
    transition: top 0.25s linear,bottom 0.25s linear,transform 0.2s linear 0.25s;
}

span.sandwish.active:before,
.active>span.sandwish:before {
    transform: rotate(45deg);
}

span.sandwish.active:after,
.active>span.sandwish:after{
    transform: rotate(-45deg);
}