fix: navbar and navbar examples

Author: joestr

partials/navbar.html

@@ -3,28 +3,30 @@
 
   <!-- Top Nav -->
   <div class="navbar-fixed">
-    <nav class="primary">
-      <div class="nav-wrapper">
+    <nav class="nav navbar">
+      <div class="nav-wrapper primary">
+        <a class="brand-logo">{{page.name}}</a>
         <a class="sidenav-trigger" href="#" data-target="nav-mobile"><i class="material-icons">menu</i></a>
-        <ul>
-          <li>{{page.name}}</li>
-        </ul>
         <ul class="right">
           <li>
             <a href="" onclick="paletteSelectorModal.showModal(); return false;">
               <i class="material-icons">palette</i>
             </a>
           </li>
           <li>
-            <a id="theme-switch" href="#"><i class="material-icons">dark_mode</i></a>
+            <a id="theme-switch" href="#">
+              <i class="material-icons">dark_mode</i>
+            </a>
           </li>
           <li>
-            <a class="ext-link" href="https://github.com/materializecss/materialize" target="_blank" title="Check out our GitHub"
-              ><img src="images/github.svg" style="height: 20px"
-            /></a>
+            <a class="ext-link" href="https://github.com/materializecss/materialize" target="_blank" rel="noopener" title="Check out our GitHub">
+              <img src="images/github.svg" alt="GitHub logo" style="height: 20px" />
+            </a>
           </li>
           <li>
-            <a class="ext-link" href="https://opencollective.com/materialize" target="_blank" title="Support us via OpenCollective"><img src="images/opencollective.svg" /></a>
+            <a class="ext-link" href="https://opencollective.com/materialize" target="_blank" rel="noopener" title="Support us via OpenCollective">
+              <img src="images/opencollective.svg" alt="Open Collective logo" />
+            </a>
           </li>
         </ul>
       </div>
@@ -37,8 +39,7 @@
       <a class="brand-logo" id="logo-container" href="/">
         <img id="front-page-logo" src="images/materialize.svg" alt="Materialize Web Logo"/>
         Materialize
-      </a
-      >
+      </a>
     </li>
 
     <li class="search">
@@ -74,12 +75,12 @@ <h4>Color Scheme</h4>
   </div>
   <div class="modal-content">
     <div class="color-row">
-      <label>Primary Color</label>
-      <input type="color" id="color-picker" value="#0000ff" />
+      <input type="color" id="color-picker" value="#0000ff">
+      <label for="color-picker">Primary Color</label>
     </div>
     <button id="downloadCss" type="button" class="btn tonal">Download css style</button>
   </div>
   <div class="modal-footer">
-    <button class="btn text waves-effect" onclick="paletteSelectorModal.close()">Close</a>
+    <button type="button" class="btn text waves-effect" onclick="paletteSelectorModal.close()">Close</button>
   </div>
 </dialog>

src/navbar.html

@@ -21,7 +21,7 @@ <h3 class="header">Right Aligned Links</h3>
                 <code class="language-html">ul</code>
                 that contains them.
               </p>
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <div class="col s12">
                     <a href="#!" class="brand-logo">Logo</a>
@@ -42,7 +42,7 @@ <h3 class="header">Right Aligned Links</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo">Logo</a>
     <ul id="nav-mobile" class="right hide-on-med-and-down">
@@ -63,7 +63,7 @@ <h3 class="header">Left Aligned Links</h3>
                 <code class="language-html">ul</code>
                 that contains them.
               </p>
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <div class="col s12">
                     <a href="#!" class="brand-logo right">Logo</a>
@@ -84,7 +84,7 @@ <h3 class="header">Left Aligned Links</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo right">Logo</a>
     <ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -107,7 +107,7 @@ <h3 class="header">Centering the logo</h3>
                   &lt;a class=&quot;brand-logo&quot;&gt;&lt;/a&gt;
                 </code>. You will have to make sure yourself that links do not overlap if you use this.
               </p>
-              <nav>
+              <nav clas="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo center">Logo</a>
                   <ul class="left hide-on-med-and-down">
@@ -123,7 +123,7 @@ <h3 class="header">Centering the logo</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo center">Logo</a>
     <ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -141,7 +141,7 @@ <h3 class="header">Centering the logo</h3>
               <h3 class="header">Active Items</h3>
               <p>Add active class to your li tags to denote the current page.</p>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo center">Logo</a>
                   <ul class="left hide-on-med-and-down">
@@ -160,7 +160,7 @@ <h3 class="header">Active Items</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo center">Logo</a>
     <ul class="left hide-on-med-and-down">
@@ -182,7 +182,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
                 can just include a tabs component inside the <span class="language-html">nav-wrapper</span>.
               </p>
 
-              <nav class="navbar nav-extended">
+              <nav class="nav navbar nav-extended">
                 <div class="nav-wrapper">
                   <a href="#" class="brand-logo">Logo</a>
                   <a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -237,7 +237,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar nav-extended">
+<nav class="nav navbar nav-extended">
   <div class="nav-wrapper">
     <a href="#" class="brand-logo">Logo</a>
     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
@@ -282,7 +282,7 @@ <h3 class="header">Fixed Navbar</h3>
               <pre><code class="language-html">
 <xmp>
 <div class="navbar-fixed">
-  <nav class="navbar">
+  <nav class="nav navbar">
     <div class="nav-wrapper">
       <a href="#!" class="brand-logo">Logo</a>
       <ul class="right hide-on-med-and-down">
@@ -317,7 +317,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
                   <a href="#!">three</a>
                 </li>
               </ul>
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -347,7 +347,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
   <li class="divider"></li>
   <li><a href="#!">three</a></li>
 </ul>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -382,7 +382,7 @@ <h5>Trigger dropdown menu on click</h5>
             <div id="icons" class="section scrollspy">
               <h3 class="header">Icon Links</h3>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo"> <i class="material-icons">cloud</i>Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -415,7 +415,7 @@ <h3 class="header">Icon Links</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -429,7 +429,7 @@ <h3 class="header">Icon Links</h3>
 </xmp>
 </code></pre>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -452,7 +452,7 @@ <h3 class="header">Icon Links</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -468,7 +468,7 @@ <h3 class="header">Icon Links</h3>
             <div id="buttons" class="section scrollspy">
               <h3 class="header">Buttons</h3>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -494,7 +494,7 @@ <h3 class="header">Buttons</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -510,7 +510,7 @@ <h3 class="header">Buttons</h3>
               <h5>Halfway FAB in Extended Navbar</h5>
               <p>Add a halfway FAB to your extended navbar.</p>
 
-              <nav class="navbar nav-extended">
+              <nav class="nav navbar nav-extended">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <ul class="right hide-on-med-and-down">
@@ -535,7 +535,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
 
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar nav-extended">
+<nav class="nav navbar nav-extended">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <ul class="right hide-on-med-and-down">
@@ -558,7 +558,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
             <div id="search-docs" class="section scrollspy">
               <h3 class="header">Search Bar</h3>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <form>
                     <div class="input-field">
@@ -593,7 +593,7 @@ <h3 class="header">Search Bar</h3>
             <div id="mobile-collapse" class="section scrollspy">
               <h3 class="header">Mobile Collapse Button</h3>
 
-              <nav class="navbar">
+              <nav class="nav navbar">
                 <div class="nav-wrapper">
                   <a href="#!" class="brand-logo">Logo</a>
                   <a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -643,7 +643,7 @@ <h3 class="header">Mobile Collapse Button</h3>
               </p>
               <pre><code class="language-html">
 <xmp>
-<nav class="navbar">
+<nav class="nav navbar">
   <div class="nav-wrapper">
     <a href="#!" class="brand-logo">Logo</a>
     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>