From 960d347f687aa75a6a0d6ec8ecb43d206da9be6d Mon Sep 17 00:00:00 2001
From: Patrick Marsceill <patrick.marsceill@gmail.com>
Date: Mon, 19 Nov 2018 13:28:59 -0500
Subject: [PATCH] Support 3 levels of pages
---
_includes/nav.html | 56 +++++++++++++++++++----------
_layouts/default.html | 9 +++--
_sass/navigation.scss | 10 ++++++
docs/ui-components/ui-components.md | 5 ++-
docs/utilities/layout.md | 1 +
docs/utilities/utilities.md | 3 +-
6 files changed, 58 insertions(+), 26 deletions(-)
diff --git a/_includes/nav.html b/_includes/nav.html
index 170fcfbd..4ebd91f3 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,26 +1,44 @@
<nav>
<ul class="navigation-list">
- {% assign pages_list = site.html_pages | sort:"nav_order" %}
+ {% assign pages_list = site.html_pages | sort:"nav_order" %}
{% for node in pages_list %}
- {% unless node.nav_exclude %}
- <li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
- {% if node.parent == nil or node.has_children == true %}
- <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
- {% if (node.has_children == true and node.parent == page.parent) %}
- {% assign children_list = site.html_pages | sort:"nav_order" %}
- <ul class="navigation-list-child-list">
- {% for child in children_list %}
- {% if child.parent == node.parent and child.title != node.title %}
- <li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
- <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- {% endif %}
+ {% unless node.nav_exclude %}
+ {% if node.parent == nil %}
+ <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+ {% if page.parent == node.title or page.grand_parent == node.title %}
+ {% assign first_level_url = node.url | absolute_url %}
+ {% endif %}
+ <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+ {% if node.has_children %}
+ {% assign children_list = site.html_pages | sort:"nav_order" %}
+ <ul class="navigation-list-child-list ">
+ {% for child in children_list %}
+ {% if child.parent == node.title %}
+ <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+ {% if page.url == child.url or page.parent == child.title %}
+ {% assign second_level_url = child.url | absolute_url %}
+ {% endif %}
+ <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+ {% if child.has_children %}
+ {% assign grand_children_list = site.html_pages | sort:"nav_order" %}
+ <ul class="navigation-list-child-list">
+ {% for grand_child in grand_children_list %}
+ {% if grand_child.parent == child.title %}
+ <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
+ <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </li>
{% endif %}
- </li>
- {% endunless %}
+ {% endunless %}
{% endfor %}
</ul>
</nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index 016725a1..d6e61059 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -37,10 +37,15 @@
</div>
<div class="main-content">
{% unless page.url == "/" %}
- {% if page.parent != nil and page.parent != page.title %}
+ {% if page.parent %}
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
- <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
+ {% if page.grand_parent %}
+ <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+ <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+ {% else %}
+ <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+ {% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 0a5fb7d3..12dedbdf 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -64,6 +64,16 @@
@include mq(md) {
@include fs-3;
}
+
+ .navigation-list-child-list {
+ display: none;
+ }
+
+ &.active {
+ .navigation-list-child-list {
+ display: block;
+ }
+ }
}
.navigation-list-link {
diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md
index 00e34b84..56ecf9ea 100644
--- a/docs/ui-components/ui-components.md
+++ b/docs/ui-components/ui-components.md
@@ -1,10 +1,9 @@
---
layout: default
-title: UI Components
+title: "UI Components"
nav_order: 3
has_children: true
-parent: UI Components
-permalink: /ui-components
+permalink: /docs/ui-components
---
# UI Components
diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md
index 33f49516..a1b564ef 100644
--- a/docs/utilities/layout.md
+++ b/docs/utilities/layout.md
@@ -3,6 +3,7 @@ layout: default
title: Layout
nav_order: 2
parent: Utilities
+has_children: true
---
# Layout Utilities
diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md
index 58cdf018..b3683375 100644
--- a/docs/utilities/utilities.md
+++ b/docs/utilities/utilities.md
@@ -2,9 +2,8 @@
layout: default
title: Utilities
nav_order: 4
-parent: Utilities
has_children: true
-permalink: /utilities
+permalink: docs/utilities
---
# Utilities
--
GitLab