reworked main menu for easier modification; added "aria-current" attribute
This commit is contained in:
parent
3a34c90897
commit
aeb63cd482
@ -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;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
≡
|
||||
</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" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user