How do I open a Materialize SideNav on the right, instead of the left?
<p>I am using the Materialize design framework, but I want to open the SideNav from the right side. I don't know much more about Materialize. Right now my SideNav opens from the left side, but I want to open the SideNav from the right side.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      closeOnClick: true // Closes side-nav on &lt;a&gt; clicks, useful for Angular/Meteor
    }
  );
  $('.collapsible').collapsible();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;           
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"&gt;&lt;/script&gt;         
&lt;nav&gt;
  &lt;ul class="hide-on-med-and-down"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="slide-out" class="side-nav fixed"&gt;
      &lt;li class="bold"&gt;&lt;a href="#!" class="waves-effect waves-teal"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="bold"&gt;&lt;a href="#!" class=""&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="no-padding"&gt;
        &lt;ul class="collapsible collapsible-accordion"&gt;
          &lt;li&gt;
            &lt;a class="collapsible-header waves-effect waves-teal"&gt;Dropdown&lt;i class="mdi-navigation-arrow-drop-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;div class="collapsible-body"&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#!"&gt;First&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#!"&gt;Second&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#!"&gt;Third&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#!"&gt;Fourth&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>