elixir/templates/sidebar.html
Franciszek Stachura e8da1bf578 Reduce sidebar flashing on navigation
by moving some dynamic HTML generation to templates.
Also fixes no-js CSS a bit by hiding useless elements.
2024-08-20 14:32:52 +02:00

54 lines
2.4 KiB
HTML

<aside class="sidebar" id="menu">
<div class="filter">
<select class="select-projects" onchange="window.location.href=this.value">
{%- for p in projects %}
<option {% if p.name == current_project -%} selected {%- endif %} value="{{ p.url }}">{{ p.name }}</option>
{%- endfor %}
</select>
<input class="filter-input" placeholder="Filter tags">
<button class="icon-filter" tabindex="-1"><span class="screenreader">Filter tags</span></button>
<a title="Close Menu" class="close-menu icon-cross"></a>
</div>
<nav>
<h3 class="screenreader">Projects</h3>
<ul class="projects">
{%- for p in projects %}
<li {%- if p.name == current_project %} class="active" {% endif -%}><a href="{{ p.url }}">{{ p.name }}</a></li>
{%- endfor %}
</ul>
<h3 class="screenreader">Versions</h3>
<ul class="versions">
{% set current_major, current_minor, current_version = current_version_path %}
{% for major, major_versions in (versions|default({})).items() %}
<li>
<span class="{{ 'active' if current_major == major else '' }}">{{ major }}</span>
<ul>
{% for minor, minor_versions in major_versions.items() %}
{% if minor == minor_versions[0] and minor_versions|length == 1 %}
<li class="li-link">
<a href="{{ minor_versions[0].url }}">{{ minor_versions[0].version }}</a>
</li>
{% else %}
<li>
<span class="{{ 'active' if minor == current_minor else '' }}">{{ minor }}</span>
<ul>
{% for v in minor_versions %}
<li class="li-link {{ 'active' if v.version == current_tag else '' }}">
<a href="{{ v.url }}">
{{ v.version }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<div class="filter-results"></div>
</nav>
</aside>