reworked main menu for easier modification; added "aria-current" attribute

This commit is contained in:
eclipse 2025-05-09 09:16:55 +02:00
parent 3a34c90897
commit aeb63cd482
2 changed files with 35 additions and 13 deletions

View File

@ -83,4 +83,9 @@ svg {
label:has([type="checkbox"]) {
width: 100%;
}
}
#navbar li[aria-current=page]>a,
#navbar li[aria-current=page]>details>summary>a {
text-decoration: underline;
}

View File

@ -1,3 +1,17 @@
{% set menu = (
("Texte", url_for("text.all")),
("Werke", url_for("werk.all")),
("Basisdaten", (
("Genres", url_for("genre.all")),
("Herausgeber:innen", url_for("herausgeber.all")),
("Pseudonyme", url_for("pseudonym.all")),
("Reihen", url_for("reihe.all")),
("Sprachen", url_for("sprache.all")),
("Textformen", url_for("textform.all")),
("Verlage", url_for("verlag.all")),
("Werksformen", url_for("werksform.all"))
))
) %}
<nav role="navigation">
<ul>
<li>
@ -13,24 +27,27 @@
<label id="hamburger-label" for="hamburger" aria-label="Menu" aria-controls="main-menu-items">
&equiv;
</label>
<ul role="list">
<li role="listitem"><a href="{{ url_for('text.all') }}">Texte</a></li>
<li role="listitem"><a href="{{ url_for('werk.all') }}">Werke</a></li>
<ul role="list" id="navbar">
{% for item in menu %}
{% if item[1] is string %}
<li role="listitem"{% if request.path == item[1] %} aria-current="page"{% endif %}>
<a href="{{ item[1] }}">{{ item[0] }}</a>
</li>
{% else %}
<li aria-haspopup="menu" role="listitem">
<details class="dropdown">
<summary><a>Basisdaten</a></summary>
<summary><a>{{ item[0] }}</a></summary>
<ul>
<li role="listitem"><a href="{{ url_for('genre.all') }}">Genres</a></li>
<li role="listitem"><a href="{{ url_for('herausgeber.all') }}">Herausgeber:innen</a></li>
<li role="listitem"><a href="{{ url_for('pseudonym.all') }}">Pseudonyme</a></li>
<li role="listitem"><a href="{{ url_for('reihe.all') }}">Reihen</a></li>
<li role="listitem"><a href="{{ url_for('sprache.all') }}">Sprachen</a></li>
<li role="listitem"><a href="{{ url_for('textform.all') }}">Textformen</a></li>
<li role="listitem"><a href="{{ url_for('verlag.all') }}">Verlage</a></li>
<li role="listitem"><a href="{{ url_for('werksform.all') }}">Werksformen</a></li>
{% for subitem in item[1] %}
<li role="listitem"{% if request.path == subitem[1] %} aria-current="page"{% endif %}>
<a href="{{ subitem[1] }}">{{ subitem[0] }}</a>
</li>
{% endfor %}
</ul>
</details>
</li>
{% endif %}
{% endfor %}
<li role="listitem" class="sun-moon-li">
<label id="sun-moon-label">
<input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1" aria-label="Toggle Light or Dark Mode" />