<div class="container">
    <main class="main" role="main">
        <div class="mask"></div>
        <header>
            <h1>Off-Canvas Menu</h1>
        </header>
        <section class="content">
            <p>Ullamcorper inceptos in magna vestibulum penatibus aliquet tellus suspendisse nascetur convallis a id diam netus a a parturient posuere nam orci fermentum duis habitasse nam. Iaculis eros hendrerit rhoncus et enim commodo nulla vivamus consequat id rhoncus vestibulum a maecenas justo vestibulum mi vel purus id ullamcorper mus a. Potenti mattis placerat ligula a suspendisse ipsum mus elementum a himenaeos et aliquam inceptos euismod ad placerat sociosqu mauris vestibulum conubia condimentum semper penatibus ridiculus. Dictumst diam eros fames a elementum eros mus fusce feugiat vestibulum a dui parturient ad ullamcorper suspendisse eleifend vestibulum facilisi ridiculus. Condimentum felis sed laoreet aliquam proin dignissim eu mi ad vestibulum ut suspendisse volutpat nibh cras mi praesent morbi ad. Est libero facilisis vestibulum suspendisse rutrum fames a facilisi semper interdum consectetur consectetur a scelerisque parturient volutpat ad eros torquent tincidunt senectus risus adipiscing donec parturient. Maecenas mus suspendisse laoreet non morbi vestibulum eros dolor nam nullam nec parturient nascetur suspendisse tincidunt suspendisse convallis blandit.</p>

            <p>Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.</p>

            <p>Scelerisque condimentum pulvinar accumsan eget at nibh aliquet a maecenas lectus magnis per metus a mattis. Non ullamcorper dapibus in nostra a vitae scelerisque fusce ullamcorper lacinia cum magna vestibulum malesuada eros mus a phasellus a egestas pulvinar pretium aliquet. Adipiscing.</p>
        </section>
    </main>
    <aside class="sidebar">
        <nav class="nav">
            <ul class="nav-items">
                <li class="nav-title">Pages</li>
                <li><a href="#" class="nav-link">Home</a></li>
                <li><a href="#" class="nav-link">Products</a></li>
                <li><a href="#" class="nav-link">Services</a></li>
                <li><a href="#" class="nav-link">About</a></li>
                <li><a href="#" class="nav-link">News</a></li>
            </ul>
            <div class="sidebar-separator"></div>
            <ul class="nav-items">
                <li class="nav-title">More</li>
                <li><a href="#" class="nav-link">Contact</a></li>
                <li><a href="#" class="nav-link">Support</a></li>
                <li><a href="#" class="nav-link">Careers</a></li>
            </ul>
        </nav>
    </aside>
    <div class="hamburger">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</div>

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

function toggleSidebar(){
    isShowingSidebar() ? hideSidebar() : showSidebar();
}

function showSidebar(){
    container.classList.add('show-sidebar');
}

function hideSidebar(){
    container.classList.remove('show-sidebar');
}

function isShowingSidebar(){
    return container.classList.contains('show-sidebar');
}

document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false);

container.addEventListener('click', function(e){
    if(isShowingSidebar() && main.contains(e.target)){
        e.preventDefault();
        hideSidebar();
    }
}, true);