Update default example to cover all cases of text/link items and nesting

canonical · Mar 16, 2020 · e6175cd · e6175cd
1 parent 60fda14
commit e6175cd
Showing 1 changed file with 43 additions and 15 deletions.
diff --git a/templates/docs/examples/patterns/side-navigation/default.html b/templates/docs/examples/patterns/side-navigation/default.html
@@ -1,58 +1,86 @@
 {% extends "_layouts/examples.html" %}
-{% block title %}Side navigation{% endblock %}
+{% block title %}Side navigation / Default{% endblock %}
 
 {% block standalone_css %}patterns_side-navigation{% endblock %}
 
 {% block content %}
 <div class="p-side-navigation">
   <ul class="p-side-navigation__list">
     <li class="p-side-navigation__item--title">
-      <span class="p-side-navigation__text">Heading</span>
+      <a class="p-side-navigation__link" href="#">Title that is a link</a>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link is-selected" href="#">Snap Store buttons</a>
+      <a class="p-side-navigation__link" href="#">First level link</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link is-selected" href="#">Selected link</a>
       <ul class="p-side-navigation__list">
         <li class="p-side-navigation__item">
-          <a class="p-side-navigation__link" href="#">Snap Store buttons</a>
+          <a class="p-side-navigation__link" href="#">Second level link</a>
         </li>
         <li class="p-side-navigation__item ">
-          <a class="p-side-navigation__link" href="#">GitHub badges</a>
+          <span class="p-side-navigation__text">Second level text</span>
         </li>
         <li class="p-side-navigation__item ">
-          <a class="p-side-navigation__link is-selected" href="#">Embeddable cards make it wrap</a>
+          <a class="p-side-navigation__link is-selected" href="#">Second level selected link</a>
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item">
-              <a class="p-side-navigation__link" href="#">Third level of side nav</a>
+              <span class="p-side-navigation__text">Third level text</span>
             </li>
             <li class="p-side-navigation__item ">
-              <a class="p-side-navigation__link is-active" href="#">GitHub badges on third level</a>
+              <a class="p-side-navigation__link is-active" href="#">Third level active link</a>
             </li>
             <li class="p-side-navigation__item ">
-              <a class="p-side-navigation__link" href="#">Embeddable cards on third level</a>
+              <a class="p-side-navigation__link" href="#">Third level link</a>
             </li>
           </ul>
         </li>
       </ul>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">GitHub badges</a>
+      <span class="p-side-navigation__text">First level item that is not a link</span>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">Embeddable cards</a>
+      <a class="p-side-navigation__link" href="#">First level link</a>
     </li>
   </ul>
   <ul class="p-side-navigation__list">
     <li class="p-side-navigation__item--title">
-      <a class="p-side-navigation__link">Heading</a>
+      <span class="p-side-navigation__text">Title that is not a link</span>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link" href="#">Snap Store buttons</a>
+      <span class="p-side-navigation__text">First level text</span>
+    </li>
+    <li class="p-side-navigation__item">
+      <span class="p-side-navigation__text is-selected">Selected text item</span>
+      <ul class="p-side-navigation__list">
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Second level link</a>
+        </li>
+        <li class="p-side-navigation__item ">
+          <span class="p-side-navigation__text">Second level text</span>
+        </li>
+        <li class="p-side-navigation__item ">
+          <span class="p-side-navigation__text is-selected">Second level selected text item</span>
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item">
+              <span class="p-side-navigation__text">Third level text</span>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link is-active" href="#">Third level active item</a>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link" href="#">Third level link</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">GitHub badges</a>
+      <span class="p-side-navigation__text">First level item that is not a link</span>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">Embeddable cards</a>
+      <a class="p-side-navigation__link" href="#">First level link</a>
     </li>
   </ul>
 </div>