Make the menu look nice

_config.yml

@@ -56,3 +56,10 @@ menu:
       folder: 'students'
     - title: 'Teaching'
       folder: 'teaching'
+
+defaults:
+  -
+    scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      hidden: false
\ No newline at end of file

_includes/header.html

@@ -25,32 +25,42 @@
   
   {% assign url_parts = page.url | split: '/' %}
   {% assign base_url = url_parts | last %}
+  {% assign base_folder = url_parts[1] %}
   {% assign sorted_pages = site.pages | sort:"menu_order" %}
   
-  {% for node in site.menu %}
-  
-    <li><div class="divider"></div></li>
-    <li><a class="subheader">{{ node.title }}</a></li>
-    
-    {% for sub in sorted_pages %}
-      
-      {% assign sub_parts = sub.url | split: '/' %}
-      {% assign sub_url = sub_parts | last %}
-      {% assign sub_folder = sub_parts[1] %}
-      
-      {% if sub_folder == node.folder %}
-        <li>
-          <a class="waves-effect {% if sub_url == base_url %}active{% endif %}" href="{{ sub.url }}">
-            {% if sub.menu_title %}
-              {{ sub.menu_title }}
-            {% else %}
-              {{ sub.title }}
-            {% endif %}
-          </a>
+  <li class="no-padding">
+    <ul class="collapsible collapsible-accordion">
+      {% for node in site.menu %}
+        <li class="bold">
+          <a class="collapsible-header {% if base_folder == node.folder %}active{% endif %}">{{ node.title }}</a>
+          <div class="collapsible-body">
+            <ul>
+              {% for sub in sorted_pages %}
+                
+                {% assign sub_parts = sub.url | split: '/' %}
+                {% assign sub_url = sub_parts | last %}
+                {% assign sub_folder = sub_parts[1] %}
+                
+                {% if sub_folder == node.folder %}
+                  {% if sub.hidden == false %}
+                    <li {% if sub_url == base_url %}class="active"{% endif %}>
+                      <a href="{{ sub.url }}">
+                        {% if sub.menu_title %}
+                          {{ sub.menu_title }}
+                        {% else %}
+                          {{ sub.title }}
+                        {% endif %}
+                      </a>
+                    </li>
+                  {% endif%}
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </div>
         </li>
-      {% endif %}
-    {% endfor %}
-  {% endfor %}
+      {% endfor %}
+    </ul>
+  </li>
   
   <li><div class="divider"></div></li>
   <li><a class="waves-effect" href="{{ site.baseurl }}/news/">News</a></li>

people/mkohlhase-activities.md

 ---
 layout: page
+hidden: true
 ---
 ## Academic Activities
 

people/mkohlhase-cv.md

 ---
 layout: page
+hidden: true
 ---
 ## CV Michael Kohlhase
 

public/css/main.css

@@ -37,7 +37,7 @@ h1, h2, h3, h4, h5, h6 {
 
 
 /* background color */
-.page-footer, nav {
+.page-footer, nav, .side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
   background-color: #5B78FD;
 }
 
@@ -107,3 +107,41 @@ footer {
 footer a, footer a:hover {
     color: #000;
 }
+
+/* side bar */
+
+ul.side-nav.fixed {
+  overflow: hidden
+}
+
+ul.side-nav.fixed li {
+  line-height: 44px
+}
+
+ul.side-nav.fixed li.active {
+  background-color: rgba(0, 0, 0, 0.05)
+}
+
+ul.side-nav.fixed li a {
+  font-size: 13px;
+  line-height: 44px;
+  height: 44px;
+  padding: 0 30px
+}
+
+ul.side-nav.fixed ul.collapsible-accordion {
+  background-color: #FFF
+}
+
+ul.side-nav.fixed ul.collapsible-accordion a.collapsible-header {
+  padding: 0 30px
+}
+
+ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
+  font-weight: 400;
+  padding: 0 37.5px 0 45px
+}
+
+ul.side-nav.fixed:hover {
+  overflow-y: auto
+}