Я использую sidenav компонент Materialise CSS, я хотел бы показать 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">hyperschnell11@outlook.sk</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>
В настоящий момент он свернут для каждого экрана, я хочу, чтобы он отображался по умолчанию на больших экранах и свернулся для маленьких экранов, есть ли способ сделать это?