I want to implement the expanding sidebar menu as done in the below link https://www.uplabs.com/posts/expanding-sidebar-menu using materialize css.

i have used sidenav from materialize css but could not get the final result. any help is much appreciated.



<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style type="text/css">

main{
margin-left:-200px;
transition: margin-left .3s;
}

#sidenav-overlay {
opacity:0 !important;
}

</style>
</head>

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

<ul id="slide-out" class="side-nav">
<li>
<div class="user-view">
<div class="background">
</div></li>
<li><a href="#!">First Link</a></li>
<li><a href="#!">Second Link</a></li>
<li><a href="#!">Third Link</a></li>
<li><a href="#!">Fourth Link</a></li>
</ul>


<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
<main id="main">
<div class="section">
<div class="container">
<div class="row">
<div class="col s12 m7">
<h1 class="header center-on-small-only">Main section</h1>
</div>
</div>
</div>
</div>
</main>


<script type="text/javascript">
$(".button-collapse").sideNav({
menuWidth: 200,
onOpen:function(){
document.getElementById("main").style.marginLeft = "0px";

},
onClose:function(){
document.getElementById("main").style.marginLeft = "-200px";
},
});
//$('.collapsible').collapsible();
</script>

</body>
</html>