div#app
    nav
        div.side
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
        div.top
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
            a(href="#")
    div#content
        header
            button.opennav
                .icon

$transitiontime:1s;

body {
    overflow:hidden;
    background:#3C3B3D;
    #app {
        --navigation-width:6rem;
        --navigation-height:6rem;
        min-height:100vh;
        nav {
            position: absolute;
            display: grid;
            grid-template-columns: var(--navigation-width) auto;
            grid-template-rows: var(--navigation-height) auto;
            grid-template-areas: "side top" "side .";
            >div {
                display: flex;
                margin:.5rem;
                a {
                    display: block;
                    width:calc(var(--navigation-width) - 2rem);
                    height:calc(var(--navigation-height) - 2rem);
                    margin:.5rem;
                    border-radius: .5rem;
                    background: #F5F7FA;
                    &:hover, &:focus {
                        background: #E6E9ED;
                    }
                }
            }
            .side {
                flex-direction: column;
                grid-area: side;
            }
            .top {
                grid-area: top;
                margin-left: -.5rem;
            }
        }
        #content {
            z-index:1;
            display: flex;
            flex-direction: column;
            position: absolute;
            top:0rem;
            left:0rem;
            min-height:100vh;
            width:100vw;
            border-top-left-radius: 0rem;
            background:white;
            box-shadow: 0 0 2rem -1rem rgba(0,0,0,.5);
            transition:border-top-left-radius $transitiontime cubic-bezier(0.5, 0, 0, 1) -.1s, top $transitiontime cubic-bezier(0.5, 0, 0, 1) -.1s, left $transitiontime cubic-bezier(0.5, 0, 0, 1) -.1s;
            header {
                display: flex;
                align-items: center;
                height:5rem;
                button.opennav {
                    position: relative;
                    height:4rem;
                    width:4rem;
                    margin:.5rem;
                    border: none;
                    border-radius: 1rem;
                    background: #323133;
                    .icon {
                        position: absolute;
                        top:50%;
                        left:50%;
                        width:2.5rem;
                        transform: translate(-50%, -50%) rotate(0deg);
                        &, &:before, &:after {
                            height:.25rem;
                            background:white;
                            border-radius: 1rem;
                            transition:$transitiontime cubic-bezier(0.5, 0, 0, 1) -.1s;
                        }
                        &:before, &:after {
                            content: '';
                            position: absolute;
                            left:0rem;
                            width:1.5rem;
                        }
                        &:before {
                            top: .9rem;
                            transform-origin: 1rem -.75rem;
                        }
                        &:after {
                            bottom:.9rem;
                            transform-origin: 1rem 1rem;
                        }
                    }
                }
            }
        }
        #content.open, nav:focus-within ~#content {
            top:var(--navigation-height);
            left:var(--navigation-width);
            border-top-left-radius: 1.5rem;
            button.opennav {
                .icon {
                    transform: translate(-50%, -50%) rotate(45deg);
                    &:before, &:after {
                        left:.25rem;
                    }
                    &:before {
                        transform: rotate(45deg);
                    }
                    &:after {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}

$("button.opennav").click(function(){
    $("#content").toggleClass("open")
});