JSFiddle - React, Tailwind, and code Playground

by jestho

JavaScript

var openNavPanel = function() {
    $('body').removeClass('navpanel-closed').addClass('navpanel-open');
};

var closeNavPanel = function() {
    $('body').removeClass('navpanel-open').addClass('navpanel-closed').delay(300).queue(function(){
        $('body').removeClass('navpanel-closed');
        $(this).dequeue();
    });
};

// Klikk på openNavButton
this.elements.$openNavButton.on(biip.utils.events.click, function(e) {
    e.stopPropagation(); // hindre openNavButton i å trigge lukking ved document-klikk
    
    // Kjør openNavPanel dersom den ikke allerede er åpen
    if ( !($('body').hasClass('navpanel-open')) ) {
        openNavPanel();
    // Kjør closeNavPanel dersom den _er_ åpen  
    } else {
        closeNavPanel();
    }
});

// Hindre #site-navpanel i å trigge document-klikk
$(document).on(biip.utils.events.click, '#site-navpanel', function(e) {
    e.stopPropagation();
});

// Men lukk #site-navpanel når man trykker på en vanlig link inni
this.elements.$navPanel.on(biip.utils.events.click, 'a', function(e) {
    $(closeNavPanel);
});

// Lukk navpanel når man trykker hvorsomhelst ellers i dokumentet
$(document).on(biip.utils.events.click, function(e) {
    if ( $('body').hasClass('navpanel-open') ) {
        $(closeNavPanel);
    }
});

// Og dersom man swiper.
$(document).on('swipeleft', function(){
    if ( $('body').hasClass('navpanel-open') ) {
        $(closeNavPanel);
    }
});