support main nav layers

README.md

@@ -35,7 +35,7 @@ A full page front matter could look like this:
 
 ### Multi Layer Navigation
 
-If you have more complex setups, use a `navigation.yml` file under `_data/navigation.yml`. Currently only supported for the `page` layout with two levels.
+If you have more complex setups, use a `navigation.yml` file under `_data/navigation.yml`. Currently only supporting two levels.
 See https://portal.mytum.de/corporatedesign/livingstyleguide/section-3.html if you want to extend the functionality.
 For example:
 

_includes/nav_main.html

@@ -1,18 +1,57 @@
+
 <nav class="main-nav js-main-nav">
   <ul class="main-nav__list clearfix js-main-nav-list">
 
     <div class="container">
       <div class="row">
 
-        {% assign pages = site.pages | where_exp: 'item', 'item.toc != nil' | sort: 'order' %}
-        {% for item in pages %}
+        {% if site.data.navigation %}
+          {% for item in site.data.navigation.toc %}
+          <li class="main-nav__item-1-level main-nav__item-1-level--hover js-main-nav-item-1-level">
+            {% assign activeSubPages = item.subfolderitems | where:"url",page.url  %}
+            {% if item.url == page.url or activeSubPages.size > 0 %}
+              {% assign isActive = true  %}
+            {% else %}
+              {% assign isActive = false  %}
+            {% endif %}
+
+            {% if item.url %}
+              {% assign myURL = item.url  %}
+            {% else %}
+              {% assign myURL = item.subfolderitems[0].url  %}
+            {% endif %}
+
+            {% if item.subfolderitems %}
+              <span class="main-nav__toggle main-nav__toggle--1-level js-main-nav-sub-toggle {% if isActive %}main-nav__toggle--minus{% endif %}"></span>
+            {% endif %}
+
+            <a href="{{ myURL  | relative_url }}" class="{% if isActive %}main-nav__link--current{% endif %} {% if item.subfolderitems %}main-nav__link--has-submenu{% endif %} main-nav__link js-main-nav-link main-nav__link--1-level">{{ item.name }}</a>
+
+            {% if item.subfolderitems %}
+              <ul class="main-nav__list main-nav__list--2-level js-main-nav-list" style="{% if isActive %}display: block{% endif %}">
+                {% for entry in item.subfolderitems %}
+                <li class="main-nav__item-2-level">
+                  <a href="{{ entry.url  | relative_url }}" class="{% if entry.url == page.url %}main-nav__link--current{% endif %} main-nav__link js-main-nav-link main-nav__link--2-level">{{ entry.name }}</a>
+                </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+
+          </li>
+          {% endfor %}
+
+        {% else %}
+
+          {% assign pages = site.pages | where_exp: 'item', 'item.toc != nil' | sort: 'order' %}
+          {% for item in pages %}
 
 
-        <li class="main-nav__item-1-level main-nav__item-1-level--hover js-main-nav-item-1-level">
-          <a href="{{ item.url  | relative_url }}" class="{% if item.url == page.url %}main-nav__link--current{% endif %} main-nav__link js-main-nav-link main-nav__link--1-level">{{ item.toc }}</a>
-        </li>
+          <li class="main-nav__item-1-level main-nav__item-1-level--hover js-main-nav-item-1-level">
+            <a href="{{ item.url  | relative_url }}" class="{% if item.url == page.url %}main-nav__link--current{% endif %} main-nav__link js-main-nav-link main-nav__link--1-level">{{ item.toc }}</a>
+          </li>
 
-        {%- endfor -%}
+          {%- endfor -%}
+        {% endif %}
       </div>
     </div>
   </ul>

_sass/_style-1.0.0.scss

@@ -3649,7 +3649,7 @@ div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
 }
 
 .main-nav__toggle {
-  background: url("../../Images/icon/nav-plus-2x.png") center center no-repeat;
+  background: url($baseurl + "/assets/images/icon/nav-plus-2x.png") center center no-repeat;
   border-left: 1px solid #8a8a8a;
   cursor: pointer;
   display: none;
@@ -3663,7 +3663,7 @@ div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
 }
 
 .main-nav__toggle--minus {
-  background: url("../../Images/icon/nav-minus-2x.png") center center no-repeat
+  background: url($baseurl + "/assets/images/icon/nav-minus-2x.png") center center no-repeat
 }
 
 .main-nav__toggle--1-level {