Initial implementation of sidebar nav

_data/navigation.yaml

@@ -0,0 +1,40 @@
+
+top_nav:
+  - title: Docs
+    url: /pages/docs/start
+
+  - title: News
+    url: /pages/news
+
+  - title: GitHub
+    url: /pages/contributing
+
+  - title: Help
+    url: /pages/help
+
+  - title: Get Started
+    url: /pages/docs/start
+    primary: true
+
+docs_nav:
+  - title: Introduction
+    subitems:
+      - title: Getting Started
+        url: /pages/docs/start
+
+  - title: Developer Tutorials
+    subitems:
+      - title: Start
+        url: /pages/docs/developer/new_developer
+  - title: Maintainer Tutorials
+    subitems:
+      - title: Start
+        url: /pages/docs/maintainer/new_maintainer
+  - title: Empty Item
+  - title: Empty Item
+
+other_nav:
+  - title: Maintainer Tutorials
+    subitems:
+      - title: Start
+        url: /pages/docs/maintainer/new_maintainer

_data/top_nav_nodes.yaml

@@ -1,15 +0,0 @@
-- text: Docs
-  url: /pages/docs/start
-
-- text: News
-  url: /pages/news
-
-- text: GitHub
-  url: /pages/contributing
-
-- text: Help
-  url: /pages/help
-
-- text: Get Started
-  url: /pages/docs/start
-  primary: true

_includes/base/footer.html

@@ -7,9 +7,9 @@
       </div>
       <div class="col-9 d-none d-md-block text-right">
         <ul class="list-inline">
-          {% for link in site.data.top_nav_nodes %}
+          {% for link in site.data.navigation.top_nav %}
             <li class="list-inline-item">
-              <a href={{ link.url | absolute_url }}>{{ link.text }}</a>
+              <a href="{{ link.url | absolute_url }}">{{ link.title }}</a>
             </li>
           {% endfor %}
         </ul>

_includes/base/side_nav.html

@@ -1,22 +1,29 @@
+{% assign side_nav_items = site.data.navigation[page.navigation_source] %}
+
+{% if side_nav_items[0] %}
+  <div class="docsite-side-nav">
+
+    {% for item in side_nav_items %}
+      <div>
+        {% if item.subitems[0] %}
+          <a href="{{ item.subitems[0].url | absolute_url }}">{{ item.title }}</a>
+          <ul>
+            {% for subitem in item.subitems %}
+              {% assign temp = subitem.url | append: '/' %}
+              {% if page.url == subitem.url or page.url == temp %}
+                <li class="docsite-side-nav-selection"><a href="{{ subitem.url }}">{{ subitem.title }}</a></li>
+              {% else %}
+                <li><a href="{{ subitem.url }}">{{ subitem.title }}</a></li>
+              {% endif %}
+
+            {% endfor %}
+          </ul>
+        {% else %}
+          {{ item.title }}
+        {% endif %}
+      </div>
+    {% endfor %}
 
-<div class="docsite-side-nav">
-  <div><a href="#">Section 1</a></div>
-  <div>
-    <a href="#">Section 2</a>
-    <ul>
-      <li><a href="#">Getting Started</a></li>
-      <li class="docsite-side-nav-selection">Getting Started</li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-      <li><a href="#">Getting Started</a></li>
-    </ul>
   </div>
 
-  <div><a href="#">Section 3</a></div>
-  <div><a href="#">Section 4</a></div>
-</div>
+{% endif %}

_includes/base/top_nav.html

@@ -34,9 +34,9 @@
       </script>
       <!-- SEARCH BOX - END -->
 
-      {% for link in site.data.top_nav_nodes %}
+      {% for link in site.data.navigation.top_nav %}
         <a class="btn {% if link.primary %} btn-primary {% endif %}" href="{{ link.url | absolute_url }}">
-          {{ link.text }}
+          {{ link.title }}
         </a>
       {% endfor %}
 

_layouts/custom_page.html

@@ -1,13 +0,0 @@
----
-layout: default
----
-
-<article class="page">
-  <div class="container" style="padding: 2rem;">
-    <h1>{{ page.title }}</h1>
-
-    <div class="entry">
-      {{ content }}
-    </div>
-  </div>
-</article>

_layouts/page.html

@@ -17,7 +17,7 @@ layout: default
 
     {% comment %} For small displays this takes 10 columns, for large displays 8 columns {% endcomment %}
     <article role="main" class="col-10 col-md-8 px-4">
-      <div class="pt-3 pb-2 mb-3 border-bottom">
+      <div class="pt-3 pb-2 mb-3">
         <h1>{{ page.title }}</h1>
         <div class="entry">
           {{ content }}

_sass/_docsite.scss

@@ -37,27 +37,29 @@
   margin-right: 1rem;
   margin-bottom: 1rem;
 
-  div {
-    font-weight: 600;
-    padding-bottom: 1rem;
-  }
+  color: $dark;
+  font-weight: bold;
+
   a {
     color: $dark;
   }
 
   ul {
     @extend .list-unstyled;
-    font-weight: 400;
+    font-weight: normal;
   }
 
   li {
-    font-size: 90%;
+    font-size: 85%;
   }
 }
 
 .docsite-side-nav-selection {
-  font-weight: 600;
-  color: $primary;
+  font-weight: bold;
+
+  a {
+    color: $link-hover-color;
+  }
 }
 
 .docsite-sidebar {

pages/docs/developer/new_developer.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Working in a Rush Repo
+navigation_source: docs_nav
 ---
 
 Content goes here

pages/docs/maintainer/new_maintainer.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Setting Up a New Repo
+navigation_source: other_nav
 ---
 
 Content goes here

pages/docs/start.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Getting Started
+navigation_source: docs_nav
 ---
 
 Content goes here