feat(nav): add context-aware expansion for nested navigation

Children are only visible when user is viewing a page within that
section. Uses Tera's starting_with test to detect ancestor relationship.
This commit is contained in:
Timothy DeHerrera
2026-02-01 09:16:47 -07:00
parent 7f765b32e1
commit d50a8c3fbe
2 changed files with 8 additions and 2 deletions

View File

@@ -98,11 +98,15 @@ body {
margin-left: 1rem; margin-left: 1rem;
padding-left: 0.5rem; padding-left: 0.5rem;
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
display: flex; display: none;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
} }
.sidebar .nav-children.expanded {
display: flex;
}
.sidebar .nav-children a { .sidebar .nav-children a {
font-size: 0.9rem; font-size: 0.9rem;
} }

View File

@@ -35,9 +35,11 @@
</header> </header>
<nav> <nav>
{% for item in nav %} {% for item in nav %}
{% set section_prefix = item.path | replace(from="index.html", to="") %}
{% set is_current_section = page_path is starting_with(section_prefix) %}
<a href="{{ prefix }}{{ item.path }}" {% if page_path==item.path %}class="active" {% endif %}>{{ item.label }}</a> <a href="{{ prefix }}{{ item.path }}" {% if page_path==item.path %}class="active" {% endif %}>{{ item.label }}</a>
{% if config.nested_nav and item.children %} {% if config.nested_nav and item.children %}
<div class="nav-children"> <div class="nav-children{% if is_current_section %} expanded{% endif %}">
{% for child in item.children %} {% for child in item.children %}
<a href="{{ prefix }}{{ child.path }}" {% if page_path==child.path %}class="active" {% endif %}>{{ child.label <a href="{{ prefix }}{{ child.path }}" {% if page_path==child.path %}class="active" {% endif %}>{{ child.label
}}</a> }}</a>