adding start to navigation with children

Signed-off-by: Vanessa Sochat <[email protected]>

Author: vsoch

_data/toc.yml

@@ -1,5 +1,12 @@
   - title: "Getting Started"
     url: "docs/getting-started"
+    children:
+      - title: Features
+        url: "docs/getting-started#features"
+      - title: Development
+        url: "docs/getting-started#development"
+      - title: Customization
+        url: "docs/getting-started#customization"
   - title: "About"
     url: "about"
   - title: "News"

_docs/getting-started.md

@@ -110,11 +110,15 @@ that are still browsable easily via search or the table of contents on the right
 
 The `pages` folder uses the same page layout, but is not part of the docs collection.
 The two are provided to create a distinction between website pages (e.g., about,
-feed.xml) and documentation pages.  Whether you place your page under 
-"pages" or "docs," for those pages that you want added to the navigation, 
+feed.xml) and documentation pages.  
+
+### Navigation
+
+Whether you place your page under "pages" or "docs," for those pages that you want added to the navigation, 
 you should add them to `_data/toc.yml`. If you've defined a `permalink` in the
 front end matter, you can use that (e.g., "About" below). If you haven't and
 want to link to docs, the url is the path starting with the docs folder.
+Here is an example of a flat structure:
 
 ```yaml
   - title: "Getting Started"
@@ -125,6 +129,24 @@ want to link to docs, the url is the path starting with the docs folder.
     url: "news"
 ```
 
+And here is an example with nested children (currently active in the example):
+
+```yaml
+  - title: "Getting Started"
+    url: "docs/getting-started"
+    children:
+      - title: Features
+        url: "docs/getting-started#features"
+      - title: Development
+        url: "docs/getting-started#development"
+      - title: Customization
+        url: "docs/getting-started#customization"
+  - title: "About"
+    url: "about"
+  - title: "News"
+    url: "news"
+```
+
 ### News Posts
 
 It might be the case that your site or group has news items that would

_includes/footer.html

@@ -42,7 +42,12 @@
 
 </footer>
 <script src="{{ site.baseurl }}/assets/js/application.js"></script>
-<!--<script src="{{ site.baseurl }}/assets/js/application.a59e2a89.js"></script>-->
+<script>
+$(".pancakes-parent").on('click', function(){ 
+    console.log($(this).next());
+    $(this).next().find('.pancakes-child').toggle();
+})
+</script>
 {% assign slashes = page.url | split: "/" %}
 <script>console.log('{{ slashes | size }}')</script>
 <script>app.initialize({version:"0.17.4", url:{base:'{{ site.baseurl }}'}})</script>

_includes/sidebar.html

@@ -2,7 +2,7 @@
   <div class="md-sidebar__scrollwrap">
     <div class="md-sidebar__inner">
       <nav class="md-nav md-nav--primary" data-md-level="0">
-        <label class="md-nav__title md-nav__title--site" for="__drawer"><span class="md-nav__button md-logo"><img height="48" src="{{%20site.logo%20}}" width="48"></span> {{ site.title }}</label>
+        <label class="md-nav__title md-nav__title--site" for="__drawer"><span class="md-nav__button md-logo"><img height="48" src="../{{ site.logo }}" width="48"></span> {{ site.title }}</label>
         <div class="md-nav__source">
           <a class="md-source" data-md-source="github" href="{{ site.repo }}" title="Go to repository">
           <div class="md-source__icon">
@@ -14,30 +14,52 @@
           </div></a>
         </div>
 
-
         <ul class="md-nav__list" data-md-scrollfix="">
           <li class="md-nav__item md-nav__item--active">
-            <input class="md-toggle md-nav__toggle" data-md-toggle="toc" id="__toc" type="checkbox"> <label class="md-nav__link md-nav__link--active" for="__toc">Home</label> <a class="md-nav__link md-nav__link--active" href="{{ site.baseurl }}/" title="Home">Home</a>
+            <input class="md-toggle md-nav__toggle" data-md-toggle="toc" id="__toc" type="checkbox"> 
+            <label class="md-nav__link md-nav__link--active" for="__toc">Home</label> 
+               <a class="md-nav__link md-nav__link--active" href="{{ site.baseurl }}/" title="Home">Home</a>
 
             <nav class="md-nav md-nav--secondary">
               <label class="md-nav__title" for="__toc">Table of contents</label>
               <ul class="md-nav__list" data-md-scrollfix="">
+
                 {% for section in site.data.toc %}
-                <li class="md-nav__item">
+                <li class="md-nav__item {% if forloop.first%}{% else %}md-nav__item--nested{% endif %}">
                   <a class="md-nav__link" href="#{{ section.title | slugify }}" 
                      id="pancakes-{{ section.title | slugify }}" 
                      title="{{ section.title }}">{{ section.title }}</a>
+                     {% if section.children %}<nav class="md-nav">
+                         <ul class="md-nav__list">
+                             {% for child in section.children %}<li class="md-nav__item">
+                                     <a href="#{{ child.title | slugify }}" 
+                                        title="{{ child.title }}" 
+                                        class="md-nav__link child-{{ section.title | slugify }}">{{ child.title }}</a>
+                                 </li>{% endfor %}
+                         </ul>
+                     </nav>{% endif %}
                 </li>
                 {% endfor %}
               </ul>
             </nav>
           </li>
 
-          {% for section in site.data.toc %}
-          <li class="md-nav__item">
-            <a class="md-nav__link" href="{{ site.baseurl }}/{{ section.url }}" title="{{ section.title }}">{{ section.title }}</a>
-          </li>
-          {% endfor %}
+         {% for section in site.data.toc %}
+         <li class="md-nav__item md-nav__item--nested">
+             <a class="md-nav__link pancakes-parent" {% if section.children %}href="#pancakes-{{ section.title | slugify }}"{% else %}href="{{ site.baseurl }}/{{ section.url }}"{% endif %}
+                id="pancakes-{{ section.title | slugify }}" 
+                title="{{ section.title }}">{{ section.title }}</a>
+                {% if section.children %}<nav class="md-nav">
+                    <ul class="md-nav__list">
+                        {% for child in section.children %}<li class="md-nav__item">
+                        <a href="{{ site.baseurl }}{{ child.url }}" 
+                           title="{{ child.title }}" style="display:none"
+                           class="md-nav__link pancakes-child">{{ child.title }}</a>
+                        </li>{% endfor %}
+                    </ul>
+              </nav>{% endif %}
+         </li>
+         {% endfor %}
         </ul>
       </nav>
     </div>