3 level sidebar menu

_includes/sidebar.html

@@ -1,28 +1,33 @@
 <aside class="sidebar_left">
   <nav>
     <h2>Sections</h2>
-    <ul class="aside_nav">
+
+    <ul class="aside_nav" id="aside_nav">
+
       {%- for item in site.docs -%}
       {%- if item.parent == nil -%}
-      <li>
-        <a href="{{item.url}}">{{item.title}}</a>
+      <li{% if page.title == item.title %} class="active"{% endif %}>
+        <a class="aside_nav_link{% if page.title == item.title %} active"{% endif %}" href="{{item.url}}">{{item.title}}</a>
         {%- if item.has_children -%}
         <span class="toggle_sub"> +</span>
         {%- assign this = item.title -%}
         {% assign children = site.docs | where: "parent", this %}
+
         <ul class="sub_menu hidden">
           {%- for child in children -%}
-          <li style="margin-left: 10px;">
-            <a href="{{child.url}}">- {{child.title}}</a>
+          <li{% if page.title == child.title %} class="active"{% endif %}>
+            <a class="aside_nav_link {% if page.title == child.title %} active{% endif %}" href="{{child.url}}">{{child.title}}</a>
+
             {%- if child.has_children -%}
             <span class="toggle_sub"> +</span>
             {%- assign father_name = child.title -%}
             {%- assign grandfather_name = item.title -%}
             {% assign grandsons = site.docs | where: "parent", father_name | where: "grand_parent", grandfather_name %}
+
             <ul class="sub_menu hidden">
               {%- for gs in grandsons -%}
-              <li style="margin-left: 10px;">
-                <a href="{{gs.url}}">--- {{gs.title}}</a>
+              <li{% if page.title == gs.title %} class="active"{% endif %} style="margin-left: 10px;">
+                <a class="aside_nav_link{% if page.title == gs.title %} active{% endif %}" href="{{gs.url}}">{{gs.title}}</a>
               </li>
               {%- endfor -%}
             </ul>

_sass/custom.scss

@@ -99,6 +99,9 @@ li {
         border-bottom: 2px solid $brand-color;
       }
     }
+    .hidden {
+      display: none;
+    }
   }
 }
 
@@ -332,7 +335,26 @@ li {
               color: $sidebar-hover;
             }
           }
+          .active {
+            font-weight: 700;
+          }
         }
+        .active {
+          font-weight: 700;
+          a {
+            color: $sidebar-color;
+          }
+        }
+      }
+      .sub_menu {
+        a {
+          color: $text-color-t;
+          font-weight: normal;
+          margin-left: 20px;
+        }
+      }
+      .active > .sub_menu {
+        display: block;
       }
     }
     .document {

_sass/minima.scss

@@ -16,7 +16,7 @@ $text-color-t:     #5a6170 !default;
 $background-color: #1b1f23 !default;
 $bg-color-doc:     #ffffff !default;
 $brand-color:      #2a7ae2 !default;
-$sidebar-color:    #a6b4cf !default;
+$sidebar-color:    #212f49 !default;
 $sidebar-hover:    #d8e2f5 !default;
 $grey-color:       #828282 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;

assets/js/common.js

@@ -32,4 +32,26 @@ $(".tag_filter").click(function () {
 $(".toggle_sub").click(function () {
   $(this).toggleClass('rot45');
   $(this).next('ul').toggleClass('hidden');
-});
+});
+
+$(document).ready(function () {
+  var sidebar = $(".aside_nav_link");
+  var title = $('.doc_title').text();
+ console.log(sidebar);
+l=sidebar.length;
+console.log("leng=" + l);
+  for (i=0; i<l; i++) {
+    if (sidebar[i].text == title) {
+      var parent = sidebar[i].parentElement.parentElement;
+      if (parent.classList.contains('sub_menu')) {
+        parent.classList.remove("hidden");
+        var grandparent = parent.parentElement.parentElement;
+        if (grandparent.classList.contains('sub_menu')) {
+          grandparent.classList.remove("hidden");
+        }
+        console.log(sidebar[i].text);
+      }
+    }
+  }
+});
+