我正在使用Materialize CSS的sidenav组件，我想做的是在大屏幕上显示sidenav，然后在小屏幕上折叠它。
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container section">
<a href="#" class="sidenav-trigger" data-target="sidebar">
<i class="material-icons">
menu
</i>
</a>
<ul class="sidenav active" id="sidebar">
<li>
<div class="user-view">
<div class="background">
<img src="https://picsum.photos/seed/picsum/536/354" alt="">
</div>
<a href="#" >
<img class="circle" src="https://picsum.photos/id/237/536/354" alt="">
</a>
<a href="#">
<span class="name white-text">Midori Pavlichenko</span>
</a>
<a href="#">
<span class="email white-text">[email protected]</span>
</a>
</div>
</li>
<li>
<a href="#">
<i class="material-icons">edit</i> Some element
</a>
</li>
<li>
<a href="#">
<i class="material-icons">local_phone</i>
Hello
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<i class="material-icons">mail</i> Some other
</a>
</li>
</ul>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
目前，它在每个屏幕上都处于折叠状态，我希望它默认在大屏幕上显示，而在较小的屏幕上使其折叠，有没有办法做到这一点？
对于ul使用.sidenav .sidenav-fixed类。该窗口将始终在大屏幕上打开（目前无法折叠），并在中小屏幕上打开模式抽屉。有关更多信息，请参见文档中的Sidenav variations。