Side nav v1

_includes/side-nav.html

@@ -1,3 +1,11 @@
-{% for item in site.topic limit: 15 %}
-    <a class='badge badge-primary' href="{{ item.url }}" style='margin: 5px;'>{{ item.title }}</a>
-{% endfor %}
+<div class="side-nav">
+{% for item in site.topic %}
+    <div>
+    {% if item.url == page.url %}
+        <div class="side-nav-active">{{ item.title }}</div>
+    {% else %}
+        <a href="{{ item.url }}">{{ item.title }}</a>
+    {% endif %}
+    </div>
+{% endfor %}
+</div>

_layouts/topic.html

@@ -6,14 +6,21 @@ layout: default
 <br />
 
 <div class='container'>
-    <div class="card border-primary">
-        <div class="card-body">
-            <h1>{{ page.title }}</h1>
-            {% if page.website != "" %}
-            <a class="card-link" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
-            {% endif %}
+    <div class='row'>
+        <div class='col-sm-2'>
+            {% include side-nav.html %}
+        </div>
+        <div class='col-sm-10 col-xs-12'>
+            <div class="card border-primary">
+                <div class="card-body">
+                    <h1>{{ page.title }}</h1>
+                    {% if page.website != "" %}
+                    <a class="card-link" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
+                    {% endif %}
+                </div>
+            </div>
+            <br />
+            {{ content }}
         </div>
     </div>
-    <br />
-    {{ content }}
 </div>

assets/css/site.css

@@ -40,3 +40,11 @@ hr {
 .card-body h1 {
     margin-bottom: 0;
 }
+
+.side-nav {
+    flex-flow: column nowrap;
+}
+
+.side-nav-active {
+    padding-left: 4px;
+}