Website sidebar nested options support (#51)

* Initial support (lacking transitions) * Add carets, and transitions on submenu openings
bow-swift · Jun 1, 2019 · b8bc2b3 · b8bc2b3
1 parent efe818b
commit b8bc2b3
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 39 deletions.
diff --git a/docs/_includes/_sidebar.html b/docs/_includes/_sidebar.html
@@ -12,11 +12,46 @@
             <span class="close"></span>
         </button>
     </div>
-    <ul class="sidebar-menu">
-         {% for item in site.data.sidebar.options %}
-        <li class="{% if item.url == page.url %}active{% endif %} sidebar-menu-item">
-            <a href="{{ item.url | relative_url }}" title="{{ item.title }}">{{ item.title }}</a>
-        </li>
+    <div class="sidebar-menu">
+        {% for item in site.data.sidebar.options %}
+
+        {% comment %}
+        <!-- Needed logic to show the submenu open when the active entry is an inner element -->
+        {% endcomment %}
+        {% assign open_submenu = '' %}
+        {% if item.nested_options %}
+          {% for nested_item in item.nested_options %}
+            {% if nested_item.url == page.url %}
+              {% assign open_submenu = 'open' %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+        <div class="sidebar-menu-item {% if item.url == page.url or open_submenu == 'open' %}active{% endif %} {{ open_submenu }}">
+        {% if item.nested_options %}
+            <button
+              type="button"
+              title="Open {{ item.title }}"
+              class="button"
+              onClick="activateParent(event.target, 'open');">
+                {{ item.title }}
+            </button>
+
+            <div class="caret"></div>
+
+            <div class="sub-menu">
+                {% for nested_item in item.nested_options %}
+                <a  class="sidebar-menu-item {% if nested_item.url == page.url %}active{% endif %}"
+                    href="{{ nested_item.url }}"
+                    title="{{ nested_item.title }}">{{ nested_item.title }}</a>
+                {% endfor %}
+            </div>
+        {% else %}
+          <a
+            href="{{ item.url | relative_url }}"
+            title="{{ item.title }}">{{ item.title }}</a>
+        {% endif %}
+        </div>
         {% endfor %}
-    </ul>
+    </div>
 </div>
diff --git a/docs/_sass/components/_sidebar-menu.scss b/docs/_sass/components/_sidebar-menu.scss
@@ -0,0 +1,106 @@
+// Sidebar menu
+// -----------------------------------------------
+// -----------------------------------------------
+
+.sidebar-menu {
+  .sidebar-menu-item {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    &.active {
+      > a,
+      a.active {
+        box-shadow: 3px 0 $brand-tertiary inset;
+      }
+
+      & > button {
+        box-shadow: 3px 0 rgba($brand-tertiary, 0.5) inset;
+      }
+    }
+
+    &.open {
+      a {
+        background: rgba($brand-primary, 0.3);
+      }
+
+      .caret::before {
+        top: 4px;
+        left: -6px;
+        border-top: 6px solid rgba($white, 0.8);
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+      }
+
+      .caret::after {
+        left: -4px;
+        top: 4px;
+        border-top: 4px solid $brand-secondary;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+      }
+
+      .sub-menu {
+        max-height: 600px; // This will suffice for 9 entries in a submenu tops
+      }
+    }
+
+    button,
+    a {
+      text-align: left;
+      padding: $base-point-grid * 2;
+      width: 100%;
+      font-size: 1rem;
+      font-family: $base-font-family;
+      color: $white;
+      transition: background $base-duration $base-timing;
+
+      &:hover {
+        background: rgba($brand-primary, 0.15);
+        color: $white;
+        text-decoration: none;
+      }
+    }
+
+    .caret {
+      position: absolute;
+      right: ($base-point-grid * 3);
+      top: $base-point-grid * 2;
+      pointer-events: none;
+    }
+
+    .caret::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-left: 6px solid rgba($white, 0.8);
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      transition: border 0.3s ease, top 0.2s ease, left 0.2s ease;
+    }
+
+    .caret::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 2px;
+      border-left: 4px solid $brand-secondary;
+      border-top: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      transition: border 0.3s ease, top 0.3s ease, left 0.3s ease;
+    }
+
+
+    .sub-menu {
+      max-height: 0px;
+      transition: max-height 0.6s ease-in-out;
+      overflow: hidden;
+
+      a {
+        font-size: 0.875rem;
+        padding-left: (($base-point-grid * 3));
+      }
+    }
+  }
+}
diff --git a/docs/_sass/components/_sidebar.scss b/docs/_sass/components/_sidebar.scss
@@ -50,39 +50,6 @@
 
     .sidebar-menu {
         margin-top: ($base-point-grid * 2);
-
-        .sidebar-menu-item {
-            a {
-                display: block;
-                padding: ($base-point-grid * 2) ($base-point-grid * 3);
-                color: $white;
-                transition: background $base-duration $base-timing;
-
-                &:visited {
-                    color: $white;
-                }
-
-                &:hover {
-                    background: rgba($brand-primary, 0.15);
-                    color: $white;
-                    text-decoration: none;
-                }
-
-                &:active {
-                    color: $white;
-                }
-            }
-
-            &.active {
-                a {
-                    padding-left: (($base-point-grid * 3) - 3);
-                    background: rgba($brand-primary, 0.30);
-                    border-left: 3px solid $brand-tertiary;
-                    pointer-events: none;
-                }
-
-            }
-        }
     }
 }
 

diff --git a/docs/css/docs.scss b/docs/css/docs.scss
@@ -18,5 +18,6 @@
 @import "components/button";
 @import "components/footer";
 @import "components/sidebar";
+@import "components/sidebar-menu";
 @import "components/doc";
 @import "components/code";
diff --git a/docs/js/docs.js b/docs/js/docs.js
@@ -20,3 +20,23 @@ function toggleClasses(elemSelectors, activeClasses) {
 		toggleClass(elemSelector, activeClasses[idx]);
 	});
 }
+
+/**
+ * Remove active class from siblings DOM elements and apply it to event target.
+ * @param {Element}		element The element receiving the class, and whose siblings will lose it.
+ * @param {string}		[activeClass='active'] The class to be applied.
+ */
+function activate(element, activeClass = 'active') {
+	[...element.parentNode.children].map((elem) => elem.classList.remove(activeClass));
+	element.classList.add(activeClass);
+}
+
+/**
+ * Remove active class from siblings parent DOM elements and apply it to element target parent.
+ * @param {Element}		element The element receiving the class, and whose siblings will lose it.
+ * @param {string}		[activeClass='active'] The class to be applied.
+ */
+function activateParent(element, activeClass = 'active') {
+	const elemParent = element.parentNode;
+	activate(elemParent, activeClass);
+}