From b44131008700c4d14fc5c46580a8a269c5265d22 Mon Sep 17 00:00:00 2001
From: Jim Martens <github@2martens.de>
Date: Sun, 24 Dec 2017 22:49:36 +0100
Subject: [PATCH] Added dynamic non-JS submenu

* closes #6

Signed-off-by: Jim Martens <github@2martens.de>
---
 _assets/css/main.scss | 12 ++++++++-
 _includes/header.html | 58 +++++++++++++++++++++++++++++--------------
 _layouts/default.html | 12 ++++++++-
 3 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/_assets/css/main.scss b/_assets/css/main.scss
index 540c2bd..981febb 100644
--- a/_assets/css/main.scss
+++ b/_assets/css/main.scss
@@ -13,8 +13,18 @@
   border-bottom: 2px solid $light;
 }
 
+$navbarHeight: 60px;
+
+#submenuNavbar {
+  top: $navbarHeight;
+}
+
 body {
-  padding-top: 60px;
+  padding-top: $navbarHeight;
+}
+
+body.submenu {
+  padding-top: 2*$navbarHeight;
 }
 
 main {
diff --git a/_includes/header.html b/_includes/header.html
index d3d308f..230bc64 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -2,7 +2,8 @@
     <nav class="navbar navbar-expand-lg navbar-light fixed-top">
         <div class="container">
             <a class="navbar-brand" href="{{ site.baseurl }}/">
-                <img src="/assets/images/2martensIco.svg" width="30" height="30" class="d-inline-block align-top" alt="">
+                <img src="/assets/images/2martensIco.svg" width="30" height="30" class="d-inline-block align-top"
+                     alt="">
                 {{ site.title }}
             </a>
 
@@ -15,28 +16,49 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav mr-auto">
                     {% for item in site.data.header-menu.items %}
-                        {% if item.items %}
-                            <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}" id="navbarDropdown" role="button"
-                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    {{ item.title }}
-                                </a>
-                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                    {% for subitem in item.items %}
-                                        <a class="dropdown-item" href="{{ subitem.link }}">{{ subitem.title }}</a>
-                                    {% endfor %}
-                                </div>
-                            </li>
-                        {% else %}
-                            <li class="nav-item">
-                                <a class="nav-link{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}">{{ item.title }}</a>
-                            </li>
-                        {% endif %}
+                    <li class="nav-item">
+                        <a class="nav-link{% if item.link == page.url %} active{% endif %}" href="{{ item.link }}">
+                            {{ item.title }}
+                        </a>
+                    </li>
                     {% endfor %}
                 </ul>
             </div>
         </div>
     </nav>
+    {% for item in site.data.header-menu.items %}
+        {% if item.items %}
+            {% if page.url == item.link %}
+                {% assign showSubmenu = true %}
+            {% elsif page.parent_link == item.link %}
+                {% assign showSubmenu = true %}
+            {% else %}
+                {% assign showSubmenu = false %}
+            {% endif %}
+            {% if showSubmenu %}
+                <nav id="submenuNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
+                    <div class="container">
+                        <button class="navbar-toggler" type="button" data-toggle="collapse"
+                                data-target="#subnavbarSupportedContent" aria-controls="subnavbarSupportedContent"
+                                aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+
+                        <div class="collapse navbar-collapse" id="subnavbarSupportedContent">
+                            <ul class="navbar-nav mr-auto">
+                                {% for subitem in item.items %}
+                                <li class="nav-item">
+                                    <a class="nav-link{% if subitem.link == page.url %} active{% endif %}"
+                                       href="{{ subitem.link }}">{{ subitem.title }}</a>
+                                </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
 </header>
 
 <div class="container my-3">
diff --git a/_layouts/default.html b/_layouts/default.html
index 26322e2..dfd935a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,7 +3,17 @@
 
 {% include head.html %}
 
-<body>
+{% assign showSubmenu = false %}
+{% for item in site.data.header-menu.items %}
+    {% if item.items %}
+        {% if page.url == item.link %}
+            {% assign showSubmenu = true %}
+        {% elsif page.parent_link == item.link %}
+            {% assign showSubmenu = true %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+<body class="{% if showSubmenu %}submenu{% endif %}">
 {% include header.html %}
 <div class="container">
     <div class="row">