Navbar with default navdrawer not working correctly

tauchvogel commented 6 years ago

I wanted to test the navdrawer-default, like I can see in the documentation. When I go to the site, the navdrawer is open, but I don't see any navbar with it. After I clicked on the page, the drawer close itself and I only see a white page!

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
    <!-- CSS -->
    <!-- Add Material font (Roboto) and Material icon as needed -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Add Material CSS, replace Bootstrap CSS -->
    <link href="css/material.min.css" rel="stylesheet">
  </head>
  <body>
<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
  <div class="navdrawer-content">
    <div class="navdrawer-header">
      <a class="navbar-brand px-0" href="#">Navdrawer header</a>
    </div>
    <nav class="navdrawer-nav">
      <a class="nav-item nav-link active" href="#">Active</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
      <a class="nav-item nav-link" href="#">Link</a>
    </nav>
    <div class="navdrawer-divider"></div>
    <p class="navdrawer-subheader">Navdrawer subheader</p>
    <ul class="navdrawer-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="material-icons mr-3">link</i> Link with icon</a>
      </li>
    </ul>
  </div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
       <script>
        $(document).ready(function() {
            // This command is used to initialize some elements and make them work properly
            $('#navdrawerDefault').navdrawer('show');
        });
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <!-- Then Material JavaScript on top of Bootstrap JavaScript -->
    <script src="js/material.min.js"></script>
  </body>
</html>

Above you see my full code and the single-line javascript command I am using.

I am new to Javascript and maybe someone could help me!

ayouboudelaa commented 6 years ago

@tauchvogel you should add the Navbar by yourself ! The Navdrawer documentation page shows only the use case of the Navdrawer.

Before the Navdrawer add this:

<header class="navbar navbar-dark navbar-full bg-primary doc-navbar-default">
  <button aria-controls="navdrawerDefault" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler" data-target="#navdrawerDefault" data-toggle="navdrawer">
    <span class="navbar-toggler-icon"></span>
  </button>
  <span class="navbar-brand mr-auto">Navdrawer</span>
</header>

Check the Navbar documentation page for more: http://daemonite.github.io/material/docs/4.1/components/navbar/.

sesemaya commented 4 years ago

Close due to inactivity.

Thanks @ayouboudelaa for your help.

Daemonite / material

Navbar with default navdrawer not working correctly #192