Merge pull request #33 from SwedbankPay/feature/dx-622_more_dynamic_f…

…ixes

Feature/dx 622 more dynamic fixes

_config.yml

@@ -12,7 +12,7 @@ opengraph:
   image: /image1.png
 design_guide:
   base_url: https://design.swedbankpay.com
-  version: 4.3.0
+  version: 4.5.0
 search:
   enabled: true
   url: /search

_includes/sidebar.html

@@ -1,49 +1,86 @@
 {% comment %}
 Original creator: https://sebnitu.com/2016/10/13/dynamic-menus-in-jekyll/
 {% endcomment %}
-<nav class="documentation-nav">
-  {% assign pages = site.pages | sort: 'menu-order' %}
-  {% for node in pages %}
-  {% assign node_parts = node.url | split: '/' %}
-  {% assign node_depth = node_parts | size %}
-
-  {% if node_depth == 2 and node.hide_from_sidebar == nil %}
-  <div class="nav-group {% if page.url contains node.url %} active {% endif %}">
-    <div class="nav-heading">
-      <i class="material-icons">keyboard_arrow_right</i>
-      <a {% if page.url contains node.url %} aria-current="page" class="active" {% endif %} href="{{ node.url }}">
-        {{ node.title }}
-      </a>
-    </div>
-
-    {% assign node_root = '/' | append: node_parts[1] | append: '/' %}
-    {% assign has_children = false %}
-    {% for subnode in pages %}
-    {% if subnode.url contains node_root and subnode.url != node_root %}
-    {% assign has_children = true %}
-    {% endif %}
-    {% endfor %}
-
-    {% if has_children == true %}
-    <ul>
-      {% for subnode in pages %}
-      {% if subnode.url contains node_root and subnode.url != node_root %}
-      {% assign node_parts = subnode.url | split: '/' %}
+<div id="dg-sidebar" class="sidebar sidebar-topbar-sticky">
+  <nav class="sidebar-nav">
+    <ul class="main-nav-ul">
+      {% assign pages = site.pages | sort: 'menu-order' %}
+      {% for node in pages %}
+      {% assign node_parts = node.url | split: '/' %}
       {% assign node_depth = node_parts | size %}
 
-      {% if node_depth == 3 and subnode.hide_from_sidebar == nil %}
-      <li>
-        <a {% if page.url contains subnode.url %} aria-current="page" class="active" {% endif %}
-          href="{{ subnode.url }}">
-          {{ subnode.title }}
-        </a>
-      </li>
-      {% endif %}
-      {% endif %}
-      {% endfor %}
+      {% if node_depth == 2 and node.hide_from_sidebar == nil %}
+
+      <li class="nav-group">
+        <div class="nav-group-heading">
+          <i class="material-icons">arrow_right</i>
+          <span>{{ node.title }}</span>
+        </div>
+        <ul class="nav-ul">
+          <li {% if page.url contains node.url %} aria-current="page" class="nav-leaf active" {% else %}
+            class="nav-leaf" {% endif %}>
+            <a href="{{ node.url }}">{{ node.title }}</a>
+          </li>
+
+
+          {% assign node_root = '/' | append: node_parts[1] | append: '/' %}
+          {% assign has_children = false %}
+          {% for subnode in pages %}
+          {% if subnode.url contains node_root and subnode.url != node_root %}
+          {% assign has_children = true %}
+          {% endif %}
+          {% endfor %}
+
+          {% if has_children == true %}
+
+          {% for subnode in pages %}
+          {% if subnode.url contains node_root and subnode.url != node_root %}
+          {% assign node_parts = subnode.url | split: '/' %}
+          {% assign node_depth = node_parts | size %}
+
+          {% if node_depth == 3 and subnode.hide_from_sidebar == nil %}
+          <li {% if page.url contains subnode.url %} aria-current="page" class="nav-subgroup active" {% else %}
+            class="nav-subgroup" {% endif %}>
+            <div class="nav-subgroup-heading">
+              <i class="material-icons">arrow_right</i>
+              <span>{{ subnode.title}}</span>
+            </div>
+            {% assign subnode_root = '/' | append: node_parts[1] | append: '/' | append: node_parts[2] | append: '/' %}
+            {% assign has_children = false %}
+            {% for subsubnode in pages %}
+            {% if subsubnode.url contains subnode_root and subsubnode.url != subnode_root %}
+            {% assign has_children = true %}
+            {% endif %}
+            {% endfor %}
+            <ul class="nav-ul">
+              <li {% if page.url contains subnode.url %} aria-current="page" class="nav-leaf active" {% else %}
+                class="nav-leaf" {% endif %}>
+                <a href="{{ subnode.url }}">{{ subnode.title }}</a>
+              </li>
+
+              {% if has_children == true %}
+
+              {% for subsubnode in pages %}
+              {% if subsubnode.url contains subnode_root and subsubnode.url != subnode_root %}
+              <li {% if page.url contains subsubnode.url %} class=" nav-leaf active" {% else %} class="nav-leaf"
+                {% endif %}>
+                <a href="{{ subsubnode.url }}">
+                  {{ subsubnode.title }} subsubnode title
+                </a>
+              </li>
+              {% endif %}
+              {% endfor %}
+              {% endif %}
+            </ul>
+
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+          </li>
+          {% endif %}
+        </ul>
+        {% endif %}
+        {% endfor %}
     </ul>
-    {% endif %}
-  </div>
-  {% endif %}
-  {% endfor %}
-</nav>
+  </nav>
+</div>