Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • S support
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 53
    • Issues 53
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 4
    • Merge requests 4
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The Tor Project
  • Web
  • support
  • Issues
  • #101
Closed
Open
Issue created Apr 07, 2020 by Nicolei Ocaña@nicoleiocana

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: side-nav-not-active

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>

Here is what the fix looks like below: fixed-side-nav

Edited Apr 07, 2020 by Nicolei Ocaña
Assignee
Assign to
Time tracking