Merge pull request #447 from holochain/feat/multi-level-nav

Nesting in sidebar nav
holochain · Mar 29, 2024 · ecbe751 · ecbe751
2 parents ca094c7 + e74193f
commit ecbe751
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 19 deletions.
diff --git a/src/pages/_includes/widgets/navigation.njk b/src/pages/_includes/widgets/navigation.njk
@@ -1,5 +1,23 @@
 {% from "widgets/svg-icons.njk" import downArrowHead, mdiSearch %}
 
+@{% macro children(navData, isCurrentParent, page) %}
+  <ul class="nav-child-level {% if isCurrentParent %}open{% endif %}">
+    {% for childLink in navData %}
+    <li {% if childLink.url == page.url %} aria-current="page" {% endif %}>
+      <a href="{{ childLink.url }}" {% if childLink.external %}target="_blank" rel="noreferrer nofollow noopener external"{% endif %} >
+        <span>
+          {{ childLink.title }}
+        </span>
+      </a>
+
+      {% if childLink.children %}
+        {{ children(childLink.children, isCurrentParent, page) }}
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}
+
 @{% macro mainNavTree(mainNavData, page) %}
 {% set activeParent = mainNavData.getActiveParentLink(page.url) %}
 <nav id="main-nav">
@@ -16,25 +34,12 @@
             {{ topLink.title }}
           </span>
         </a>
-        {% if topLink.hasChildren %}
-        <button class="clear-btn {{ "up-arrow" if isCurrentParent }}"
-            data-children-opener >
-          {{ downArrowHead() }}
-        </button>
-        {% endif %}
-
-        {% if topLink.hasChildren %}
-          <ul class="nav-child-level {% if isCurrentParent %}open{% endif %}">
-            {% for childLink in topLink.children %}
-            <li {% if childLink.url == page.url %} aria-current="page" {% endif %}>
-              <a href="{{ childLink.url }}" {% if childLink.external %}target="_blank" rel="noreferrer nofollow noopener external"{% endif %} >
-                <span>
-                  {{ childLink.title }}
-                </span>
-              </a>
-            </li>
-            {% endfor %}
-          </ul>
+        {% if topLink.children %}
+          <button class="clear-btn {{ "up-arrow" if isCurrentParent }}"
+              data-children-opener >
+            {{ downArrowHead() }}
+          </button>
+          {{ children(topLink.children, isCurrentParent, page) }}
         {% endif %}
       </li>
     {% endfor %}

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
@@ -97,10 +97,41 @@
         ul.nav-child-level {
           display: none;
 
+          /* Because we want the whole row in which the nav link sits to be
+          clickable, we can't rely on just adding a blanket margin to
+          .nav-child-level. Instead, we add increasing padding to nested
+          block-display links, which means we have to do it manually for each
+          nesting level. This imposes a limit on how many nesting levels to
+          support, because we don't want to repeat the below code infinitely. */
           a {
             padding: 3px 0 4px 12px;
           }
 
+          ul.nav-child-level {
+            a {
+              padding-left: 24px;
+            }
+
+            ul.nav-child-level {
+              a {
+                padding-left: 36px;
+              }
+
+              ul.nav-child-level {
+                a {
+                  padding-left: 48px;
+                }
+
+                /* I think that's enough levels of nesting, don't you? */
+                ul.nav-child-level {
+                  a {
+                    padding-left: 60px;
+                  }
+                }
+              }
+            }
+          }
+
           &.open {
             display: block;
           }