Skip to content

Commit

Permalink
nesting in sidebar nav
Browse files Browse the repository at this point in the history
  • Loading branch information
pdaoust committed Mar 29, 2024
1 parent ae3b49f commit e74193f
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 19 deletions.
43 changes: 24 additions & 19 deletions src/pages/_includes/widgets/navigation.njk
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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 %}
Expand Down
31 changes: 31 additions & 0 deletions src/scss/_navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit e74193f

Please sign in to comment.