added 2nd level menus to main navbar

pelicanconf.py

@@ -42,11 +42,24 @@ RELATIVE_URLS = True
 
 DISPLAY_PAGES_ON_MENU = DISPLAY_CATEGORIES_ON_MENU = False
 MENUITEMS = (
-    ("Werke", "werke/"),
+    ("Werke", (
+        ("", "werke/"),
+        ("Romane", "romane/"),
+        ("Kurzprosa", "kurzprosa"),
+        ("Lyrik", "lyrik/")
+    )),    
     ("Neues", "neues/"),
-    ("Termine", "termine/"),
+    ("Termine", (
+        ("", "termine/"),
+        ("Lesereihen", "lesereihen")
+    )),
     ("Autor", "autor/"),
-    ("Kontakt", "kontakt/")
+    ("Kontakt", (
+        ("", "kontakt/"),
+        ("Newsletter", "newsletter/"),
+        ("Datenschutz", "datenschutz/"),
+        ("Impressum", "impressum/"),
+    ))
 )
 
 IGNORE_FILES = ['**/.*']

theme/static/css/custom.css

@@ -179,22 +179,42 @@ a {
     margin-left: 0;
     margin-right: 0;
 
-    li:last-child {
+    li.sun-moon-li {
       padding-right: 0;
     }
 
     li[aria-current=page] a {
       text-decoration: underline;
     }
-  }
 
-  a {
-    font-size: calc(var(--pico-font-size) * 0.9);
-    font-weight: bold;
-    text-align: right;
+    a {
+      font-size: calc(var(--pico-font-size) * 0.9);
+      font-weight: bold;
+      text-align: right;
+    }
+
+    details.dropdown {
+      margin-block-end: calc(var(--pico-spacing) * -1);
+
+      >summary:not([role]) a,
+      li a {
+        color: var(--pico-primary);
+      }
+
+      >summary:not([role]) {
+        background-color: inherit;
+        border: none;
+      }
+    }
+
+    li a {
+      text-align: left;
+    }
   }
 }
 
+
+
 /* make hamburger icon bigger */
 #hamburger-label {
   font-size: calc(var(--pico-font-size) * 2);

theme/templates/includes/navbar.html

@@ -8,16 +8,25 @@
   </label>
   <ul id="main-menu-items" role="list">
     {% for title, link in MENUITEMS %}
-    {% if output_file[-10:] == "index.html" and output_file[:-10] == link %} {# 10 characters is the length of
-    "index.html" #}
-    <li aria-current="page" role="listitem">
-      {% else %}
-    <li role="listitem">
-      {% endif %}
+    {% if link is iterable and link is not string %}{% set submenu = true %}{% endif %}
+    <li role="listitem"{% if output_file[-10:] == "index.html" and (output_file[:-10] == link or (submenu and output_file[:-10] == link[0][1])) %} aria-current="page"{% endif %}>
+      {% if submenu %}
+      <details class="dropdown">
+        <summary><a href="{{ SITEURL }}/{{ link[0][1]}}">{{ title }}</a></summary>
+        <ul>
+        {% for t, l in link %}
+          {% if not loop.first %}
+          <li role="listitem"{% if output_file[-10:] == "index.html" and output_file[:-10] == l %} aria-current="page"{% endif %}><a href="{{ SITEURL }}/{{ l }}">{{ t }}</a></li>
+          {% endif %}
+        {% endfor %}
+        </ul>
+      </details>
+    {% else %}
       <a href="{{ SITEURL }}/{{ link }}">{{ title }}</a>
+    {% endif %}
     </li>
     {% endfor %}
-    <li role="listitem">
+    <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">