Fix Active "nav-item" in both Side Nav Mobile View & Desktop
In both the mobile and desktop view, the activated side nav topic is not active in both the <li>
element as well as the <a>
element. See picture below:
The update in the change is to promote consistency within all three portals: Manual, Support, Community. Since the Manual templates/sidenav.html
file is the only working logic, I recommend that we update the sidenav.html in both the Support and Community repos to this below(taken from the Manual/templates/sidenav.html
):
<div class="container-fluid sidebar col-xs-12 col-sm-12 col-md-3 col-lg-3">
<nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white p-0 fixed">
<a class="text-primary bg-white font-weight-bold navbar-brand" href="#collapseTopicsNav">
{{ _('Topics') }}
</a>
<label class="side-toggler" for="menu-toggle">
<a class="btn btn-lg outline-primary text-primary navbar-toggler chevron" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-chevron-top chevron-up"></span>
<span class="oi oi-chevron-bottom chevron-down"></span>
</a>
</label>
<input type="checkbox" id="menu-toggle"/>
<div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
<ul class="nav nav-pills flex-column">
{% set topicbag = 'topics' %}
{% for id, item in bag(topicbag).items() %}
<li{% if this.is_child_of(item.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
{% if this.alt != "en" %}
{% set p = '/' + this.alt + '/' + item.path %}
{% else %}
{% set p = '/' + item.path %}
{% endif %}
<a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %} href="{{ p|url }}">{{ _(item.label) }} </a>
</li>
{% endfor %}
</ul>
</div>
<hr class="mb-0" />
</nav>
<nav class="d-none d-sm-block section-nav bg-white sidetopics sticky {{ bag('alternatives', this.alt, 'direction') }}" id="sidenav-topics">
<h4 class="text-primary pl-4">{{ _('Topics') }}</h4>
<ul class="nav nav-pills flex-column">
{% set topicbag = 'topics' %}
{% for id, item in bag(topicbag).items() %}
<li{% if this.is_child_of(item.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
{% if this.alt != "en" %}
{% set p = '/' + this.alt + '/' + item.path %}
{% else %}
{% set p = '/' + item.path %}
{% endif %}
<a role="button" {% if this.is_child_of(item.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %} href="{{ p|url }}">{{ _(item.label) }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
Edited by Nicolei Ocaña