Material Inspired Side Off-canvas Nav With Pure JavaScript

A Material design inspired nav written in ES 6 that enables the user to toggle an off-canvas menu from the edge, while blurring the main content.

How to use it:

Install the side nav to your web project.

Include the Material Icons iconic font for the icons.

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Create the off-canvas menu from a nav list.

<nav id="primary-nav">
  <ul>
    <li><i class="material-icons">home</i>Home</li>
    <li><i class="material-icons">add</i>Add</li>
    <li><i class="material-icons">bubble_chart</i>Ideas</li>
    <li><i class="material-icons">insert_photo</i>Insert a Photo</li>
    <li><i class="material-icons">headset</i>Audio Options</li>
    <li><i class="material-icons">cast</i>Cast Options</li>
    <li><i class="material-icons">nature_people</i>Man Tree</li>
    <li><i class="material-icons">tag_faces</i>Are you Happy?</li>
    <li><i class="material-icons">settings</i>Settings</li>
  </ul>
</nav>

Create a hamburger menu toggle button.

<button id="primary-nav-toggle" class="material-icons" aria-label="toggle navigation">menu</button>