main category

_includes/nav_list_main

@@ -0,0 +1,23 @@
+<nav class="nav__list">
+  <input id="ac-toc" name="accordion-toc" type="checkbox" />
+  <label for="ac-toc">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>
+  <ul class="nav__items" id="category_tag_menu">
+      <li>
+        <span class="nav__sub-title" v-on:click='togglec()'>Categories</span>
+        <ul v-show="flag_c">
+        {% for category in site.categories %}
+           <li><a href="/categories/{{category[0] | slugify}}" class="">{{category[0] | capitalize}} ({{category[1].size}})</a></li>
+        {% endfor %}
+        </ul>
+
+        <span class="nav__sub-title" v-on:click='togglet()'>tags</span>
+        <ul v-show="flag_t">
+        {% for tag in site.tags %}
+           <li><a href="/tags/#{{tag[0] | slugify}}" class="">{{tag[0] | capitalize }} ({{tag[1].size}})</a></li>
+        {% endfor %}
+        </ul>
+
+      </li>
+
+  </ul>
+</nav>

_includes/scripts.html

@@ -26,3 +26,21 @@
 
 {% include analytics.html %}
 {% include /comments-providers/scripts.html %}
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+ <script>
+  new Vue({
+    el : '#category_tag_menu',
+    data : {
+      flag_c : false,
+      flag_t : false
+    },
+    methods : {
+      togglec: function(){
+        this.flag_c = !this.flag_c;
+      },
+      togglet: function(){
+        this.flag_t = !this.flag_t;
+      }
+    }
+  });
+ </script> 

_includes/sidebar.html

@@ -19,5 +19,10 @@
       {% include nav_list nav=page.sidebar.nav %}
     {% endif %}
   {% endif %}
+
+{% if page.sidebar_main %}
+    {% include nav_list_main %}
+  {% endif %}
+
   </div>
 {% endif %}

index.html

@@ -1,4 +1,5 @@
 ---
 layout: home
 author_profile: true
+sidebar_main: true
 ---