quick fix for navigation, not perfect but shows something

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

Author: vsoch

_includes/sidebar.html

@@ -17,49 +17,45 @@
         <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>
+                <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 {% if forloop.first%}{% else %}md-nav__item--nested{% endif %}">
-                  <a class="md-nav__link" href="#{{ section.title | slugify }}" 
+                <li class="md-nav__item">
+                  <a class="md-nav__link" href="{{ site.baseurl }}/{{ section.url }}"
                      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>
 
+          <!-- This navigation is completely for mobile -->
+          {% for section in site.data.toc %}<li class="md-nav__item mobile-nav" style="display:none">
+            <a class="md-nav__link" href="{{ site.baseurl }}/{{ section.url }}" title="{{ section.title }}">{{ section.title }}</a>
+          </li>{% endfor %}
+
+          <!-- This navigation is completely for non mobile -->
          {% for section in site.data.toc %}
-         <li class="md-nav__item md-nav__item--nested">
+         <li class="md-nav__item md-nav__item--nested not-mobile-nav">
              <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"
+                           title="{{ child.title }}"
                            class="md-nav__link pancakes-child">{{ child.title }}</a>
                         </li>{% endfor %}
                     </ul>
               </nav>{% endif %}
-         </li>
-         {% endfor %}
+         </li>{% endfor %}
+
         </ul>
       </nav>
     </div>

assets/css/main.css

@@ -2306,6 +2306,17 @@ html [dir=rtl] .md-search__inner {
     transition: width 0s, height 0s, opacity .25s;
     opacity: 1;
 }
+.not-mobile-nav {
+  display: none !important;
+}
+.mobile-nav {
+  display: normal !important;
+}
+.md-nav--primary .md-nav__item--nested>.md-nav__link:after {
+    content: "" !important}
+[dir=rtl] .md-nav--primary .md-nav__item--nested>.md-nav__link:after {
+    content: "" !important}
+
 .md-header-nav__button.md-icon--home, .md-header-nav__button.md-logo {
     display: none;
 }