update

Author: Desmond

_data/docbar.yml

@@ -0,0 +1,18 @@
+- introduction:
+  name: Introduction
+- view:
+  name: View
+  key: view
+- security:
+  name: Security
+  key: security
+  child: 
+    - csrf:
+      name: CSRF Protection
+      key: csrf
+    - authentication:
+      name: Authentication
+      key: authentication
+- routing:
+  name: Routing
+  key: routing

_includes/docsbar.html

@@ -1,5 +1,41 @@
-<a class="nav-link" href="{{ site.baseurl }}/docs">Introduction</a>
+<!-- <a class="nav-link" href="{{ site.baseurl }}/docs">Introduction</a>
 <a class="nav-link" href="{{ site.baseurl }}/docs/security">Security</a>
 <a class="nav-link" href="{{ site.baseurl }}/docs/view">View</a>
 <a class="nav-link" href="{{ site.baseurl }}/docs/route">Route</a>
-<a class="nav-link" href="{{ site.baseurl }}/docs/storage">Storage</a>
+<a class="nav-link" href="{{ site.baseurl }}/docs/storage">Storage</a> -->
+
+{% for site in site.data.docbar %}
+    {% if site.child %}
+        <a role="button" class="nav-link nav-link-dropdown collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="#_{{ site.key }}" href="#_{{ site.key }}">{{ site.name }}</a>
+        <div class="collapse" id="_{{ site.key }}">
+            <div class="card-body">
+                {% for child in site.child %}
+                    <a class="nav-link nav-link-child" href="/docs/~version/{{ site.key }}/{{ child.key }}">{{ child.name }}</a>
+                {% endfor %}
+            </div>
+        </div>
+    {% else %}
+        <a class="nav-link" href="/docs/~version/{{ site.key }}">{{ site.name }}</a>
+    {% endif %}
+
+{% endfor %}
+
+
+<script>
+    $('.nav-link').each(function(){
+        let url = $(this).attr('href');
+        url = url.replace('~version', window.sessionStorage.getItem('_version'));
+
+        $(this).attr('href', url);
+
+        // console.log(window.location.pathname)
+        if(url == window.location.pathname){
+            
+            if($(this).hasClass('nav-link-child')){
+                let id = $(this).closest('.collapse').attr('id');
+                $("[href='#"+id+"']").removeClass('collapsed');
+                $(this).closest('.collapse').addClass('show');
+            }
+        }
+    })
+</script>

_layouts/docs.html

@@ -5,6 +5,10 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+        <script
+            src="https://code.jquery.com/jquery-3.4.1.min.js"
+            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+            crossorigin="anonymous"></script>
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
@@ -66,7 +70,7 @@
         <!-- </div> -->
         <!-- Optional JavaScript -->
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></script>