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

the_works/static/the_works.css

@@ -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;
+}

the_works/templates/_nav.html

@@ -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">
+  <ul role="list" id="navbar">
-    <li role="listitem"><a href="{{ url_for('text.all') }}">Texte</a></li>
+    {% for item in menu %} 
-    <li role="listitem"><a href="{{ url_for('werk.all') }}">Werke</a></li>
+    {% 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>
+          {% for subitem in item[1] %}
-          <li role="listitem"><a href="{{ url_for('herausgeber.all') }}">Herausgeber:innen</a></li>
+          <li role="listitem"{% if request.path == subitem[1] %} aria-current="page"{% endif %}>
-          <li role="listitem"><a href="{{ url_for('pseudonym.all') }}">Pseudonyme</a></li>
+            <a href="{{ subitem[1] }}">{{ subitem[0] }}</a>
-          <li role="listitem"><a href="{{ url_for('reihe.all') }}">Reihen</a></li>
+          </li>
-          <li role="listitem"><a href="{{ url_for('sprache.all') }}">Sprachen</a></li>
+          {% endfor %}
-          <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>
         </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" />