Updated documentation to make it clear where to place the sidenav HTML

Dogfalo · Jan 25, 2018 · 7d94806 · 7d94806
1 parent 3b8cf2d
commit 7d94806
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/jade/page-contents/navbar_content.html b/jade/page-contents/navbar_content.html
@@ -138,11 +138,6 @@ <h3 class="header">Extended Navbar with Tabs</h3>
               <li><a href="badges.html">Components</a></li>
               <li><a href="collapsible.html">JavaScript</a></li>
             </ul>
-            <ul class="sidenav" id="mobile-demo">
-              <li><a href="sass.html">Sass</a></li>
-              <li><a href="badges.html">Components</a></li>
-              <li><a href="collapsible.html">JavaScript</a></li>
-            </ul>
           </div>
           <div class="nav-content">
             <ul class="tabs tabs-transparent">
@@ -153,6 +148,13 @@ <h3 class="header">Extended Navbar with Tabs</h3>
             </ul>
           </div>
         </nav>
+
+        <ul class="sidenav" id="mobile-demo">
+          <li><a href="sass.html">Sass</a></li>
+          <li><a href="badges.html">Components</a></li>
+          <li><a href="collapsible.html">JavaScript</a></li>
+        </ul>
+
         <br>
         <div id="test1" class="col s12">Test 1</div>
         <div id="test2" class="col s12">Test 2</div>
@@ -169,11 +171,6 @@ <h3 class="header">Extended Navbar with Tabs</h3>
         &lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
         &lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
       &lt;/ul>
-      &lt;ul class="sidenav" id="mobile-demo">
-        &lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
-      &lt;/ul>
     &lt;/div>
     &lt;div class="nav-content">
       &lt;ul class="tabs tabs-transparent">
@@ -184,6 +181,13 @@ <h3 class="header">Extended Navbar with Tabs</h3>
       &lt;/ul>
     &lt;/div>
   &lt;/nav>
+
+  &lt;ul class="sidenav" id="mobile-demo">
+    &lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
+    &lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
+    &lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
+  &lt;/ul>
+
   &lt;div id="test1" class="col s12">Test 1&lt;/div>
   &lt;div id="test2" class="col s12">Test 2&lt;/div>
   &lt;div id="test3" class="col s12">Test 3&lt;/div>
@@ -448,16 +452,17 @@ <h3 class="header">Mobile Collapse Button</h3>
               <li><a href="mobile.html">Mobile</a></li>
               <li><a class="btn waves-effect waves-light" href="buttons.html">Buttons</a></li>
             </ul>
-            <ul class="sidenav" id="mobile-demo">
-              <li><a href="sass.html">Sass</a></li>
-              <li><a href="badges.html">Components</a></li>
-              <li><a href="collapsible.html">Javascript</a></li>
-              <li><a href="mobile.html">Mobile</a></li>
-              <li><a class="btn waves-effect waves-light" href="buttons.html">Buttons</a></li>
-            </ul>
           </div>
         </nav>
 
+        <ul class="sidenav" id="mobile-demo">
+          <li><a href="sass.html">Sass</a></li>
+          <li><a href="badges.html">Components</a></li>
+          <li><a href="collapsible.html">Javascript</a></li>
+          <li><a href="mobile.html">Mobile</a></li>
+          <li><a class="btn waves-effect waves-light" href="buttons.html">Buttons</a></li>
+        </ul>
+
         <br>
 
         <p>When your nav bar is resized, you will see that the links on the right turn into a hamburger icon <i class="material-icons">menu</i>. Take a look at the example below to get this functionality. Add the entire <code class="language-markup">sidenav-trigger</code> line to your <code class="language-markup">nav</code>.</p>
@@ -472,14 +477,15 @@ <h3 class="header">Mobile Collapse Button</h3>
         &lt;li>&lt;a href="collapsible.html">Javascript&lt;/a>&lt;/li>
         &lt;li>&lt;a href="mobile.html">Mobile&lt;/a>&lt;/li>
       &lt;/ul>
-      &lt;ul class="sidenav" id="mobile-demo">
-        &lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="collapsible.html">Javascript&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="mobile.html">Mobile&lt;/a>&lt;/li>
-      &lt;/ul>
     &lt;/div>
   &lt;/nav>
+
+  &lt;ul class="sidenav" id="mobile-demo">
+    &lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
+    &lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
+    &lt;li>&lt;a href="collapsible.html">Javascript&lt;/a>&lt;/li>
+    &lt;li>&lt;a href="mobile.html">Mobile&lt;/a>&lt;/li>
+  &lt;/ul>
           </code></pre>
 
           <br>

diff --git a/jade/page-contents/sidenav_content.html b/jade/page-contents/sidenav_content.html
@@ -7,6 +7,9 @@
         <p class="caption">
           This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component. If you want to see a demo, our sidebar will use this on smaller screens. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.
         </p>
+        <p>
+          <strong>Please note that the sidenav HTML should not be contained within the navbar HTML.</strong>
+        </p>
 
         <a href="#" data-target="slide-out" class="sidenav-trigger btn">Side nav demo</a>
 
@@ -29,7 +32,10 @@
         <br/>
 
         <pre><code class="language-markup col s12">
-  &lt;ul id="slide-out" class="sidenav">
+
+  &lt;nav> &lt;!-- navbar content here  --> &lt;/nav>
+
+  &lt;ul> id="slide-out" class="sidenav">
     &lt;li>&lt;div class="user-view">
       &lt;div class="background">
         &lt;img src="images/office.jpg">