Search code examples
javascriptpythonhtmldjangomaterialize

How to add mobile collapsing navarro to django using materialize css?

I have some problems adding a navbar that collapses into a ‘hamburger bar’ at mobile devices and when a device is in split view. This is what I have done so far, the hamburger bar shows but when I click on it nothing happens, my code:

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    {% load static %}
    <link rel="shortcut icon" type="image/JPG" href="{% static 'images/favicon.ico' %}"/>
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>

<div class="navbar-fixed">
  <nav>
      <div class="nav-wrapper  teal lighten-1">
        <a href="#!" class="brand-logo"><i class="material-icons">assignment </i>Logo</a>
        <a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="/">Home</a></li>
          <li><a href="/newsroom">Newsroom</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile">
    <li><a href="/">Home</a></li>
    <li><a href="/newsroom">Newsroom</a></li>
  </ul>

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
</script>

  <div>
    {% block content %}
    {% endblock %}
  </div>

</body>

<script src="{% static "tinymce/js/prism.js" %}"></script>

I think the problem is about the javascript part, but I can’t solve it.

Thanks from now!

Solution

  • Take out the undefined options variable:

    <script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

    it is an issue with the documentation, not you.