Materializecss SideNav schließt nicht mit der Materialbreite

Question

Ich verwende Materializecss für ein Projekt, das neu erstellt wurde, und habe ein kleines Problem mit der Verwendung einer zweiten sideNav.

Ich habe einen Satz für das Menü (linksbündig), und einen zweiten für Aktionen und andere Seiten mit AJAX geladen (rechtsbündig).

Ich versuche, die Menübreite basierend auf der Größe des Geräts festzulegen. ZB Desktop 40%, sonst 90%.

Aber wenn ich einen Prozentsatz für die Einstellung der Breite verwenden, kann ich die zweite Seitenleiste nicht auf Klick schließen. Hier

ist, was ich habe:

$('.button-collapse-right').sideNav({ 
    menuWidth: '40%', // Default is 240 
    edge: 'right', // Choose the horizontal origin 
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
}); 

Mein Ziel ist: 1) zu haben, 90% für kleinere als Desktop (992px) und 40% bzw. 50% für den Desktop als die Breite für die zweite sideNav . 2) Um es automatisch schließen zu lassen, wenn man auf das Overlay dahinter klickt 3) sideNav width sollte Bildschirmdrehungen und Fenstergrößenänderungen berücksichtigen.

Ich habe versucht, mit dieser Funktion zu spielen, aber konnte es nicht für die oben genannten 3 Ziele arbeiten.

var screenWidth = $(window).resize(function() { 
    $("body").each(function(i,item){ 
     item = $(item); 
     size = item.width() > '991' ? Math.floor(item.width() * 0.5) : Math.floor(item.width() * 0.9); 
     console.log(size); 
     return size; 
    }); 
}); 

Vielen Dank im Voraus.

Answer 1

Haha und nur ein paar Minuten später habe ich es herausfinden: P

Hier ist, was ich tat, wenn jemand anderes das gleiche Problem trifft.

getPanelWidth = function() { 
    var screenWidth = $(window).width(); 
    panelSize = screenWidth > '991' ? Math.floor(screenWidth * 0.5) : Math.floor(screenWidth * 0.9); 
    console.log(panelSize); 
    return panelSize; 
}; 

$('.button-collapse-right').sideNav({ 
    menuWidth: getPanelWidth(), // Default is 240 
    edge: 'right', // Choose the horizontal origin 
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
});