responsive nav poc

just some stuff i was discussing with a friend re: navs

by jack gold

HTML

<div class="container">
    <header>
        <div class="logo">Moonlight</div>
        <div class="hamburger">=</div>
    </header>
</div>

SCSS

.container {
    background: #666;
    color:white;
    font-family: sans-serif;
    position:relative;
    min-height:400px;
    width:300px;
    text-align:center;
    .logo, .hamburger {
        padding:10px;
        position:absolute;
    }
    .logo {
        text-transform:uppercase;
        border: 4px solid white;
        left:5px;
        top:5px;
    }
    .hamburger {
        left:auto;
        right:5px;
        top:5px;
    }
}

// faked responsive view, pretend this is a media query

.container.desktop {
    width: 600px;

    .logo {
        position:relative;
        left:0; right:0; top:100px; margin:auto;
        max-width:80%;
        font-size:30px;
    }
}

JavaScript

var c = document.querySelector('.container');

c.onclick = function() {
    if( c.classList.contains('desktop') ) {
        c.classList.remove('desktop');
        return;
    }
    c.classList.add('desktop');
    return;
}