$(document).ready(function() {
    var windowWidth = $(window).width();
    
    // Toggle sub nav menu when mobile nav icon is clicked
    $('header .mobile-nav-btn').on('click', function() {
        $('header .sub-nav').slideToggle(350);
    });

    // Toggle sidebar menu when the page menu button is clicked
    $('.sidebar .mobile-page-menu').on('click', function() {
        // Toggle the nav list
        $('.sidebar > ul').slideToggle(350);
        
        // Toggle the open class on page menu button
        $(this).toggleClass('open');
        
        // Change the button text depending on state
        var btnText = $('.sidebar .mobile-page-menu span');
        $(this).hasClass('open') ? btnText.html('Close') : btnText.html('Page menu');
    });

    // Wrap the JSON Output section in an additional wrapper
    // Needed for sideways scrolling on narrow screens
    $('.json-output div').wrap('<div class="code-wrapper"></div>');
/*
    // Stop menu sections from opening on first click (mobile only)
    $('.sidebar > ul > li').on('click', function(e) {
        // If section isn't open, stop click event and apply 'open' class instead
        if (windowWidth <= 800 && ! $(this).hasClass('open')) {
            e.preventDefault();
            // Close all sections & remove 'open' classes
            $('.sidebar .open > ul').slideUp(350, function() {
                $('.sidebar li.open').removeClass('open');
            });
            // Slide selected section open & add 'open' class
            $(this).children('ul').slideDown(350, function() {
                $(this).parent('li').addClass('open');
            });
        }
    });
    */
});