add NavDivider for non-selectable menu entries

Adds a `NavDivider` dataclass that can be used in a `nav_items` list
like a `NavItem`, only taking `title` (and `icon`). It will be rendered
in the pull-down with a grey background, and is unclickable.

Styling can be changed with CSS: `li[role=divider] { ...; }`

As Jinja2 cannot test if a variable is an instance (beyond some built-ins)
the `divider` attribute (default: `True`) is tested. Dataclasses do not
have the option to make an attribute immutable, so this can be broken
by assigning to that attribute.

lona_picocss/__init__.py

@@ -9,6 +9,7 @@
     get_django_auth_navigation,
     get_debug_navigation,
     NavItem,
+    NavDivider,
 )
 
 from lona_picocss.views.error_views import (

lona_picocss/navigation.py

@@ -10,6 +10,11 @@ class NavItem:
     icon: str = ''
     nav_items: list[NavItem] = field(default_factory=list)
 
+@dataclass
+class NavDivider:
+    title: str = ''
+    icon: str = ''
+    divider: bool = True
 
 def get_debug_navigation(server, request):
     return [

lona_picocss/static/lona-picocss/lona-picocss.css

@@ -54,6 +54,10 @@ header#lona-header summary svg {
     }
 }
 
+li[role=divider] {
+    background-color: var(--form-element-disabled-background-color);
+}
+
 /* auth -------------------------------------------------------------------- */
 .auth-form dialog article {
     min-width: 30em;

lona_picocss/templates/picocss/header.html

@@ -10,8 +10,12 @@
                         <summary aria-haspopup="listbox" role="link">{% if nav_item.icon %}<i data-feather="{{ nav_item.icon }}"></i>{% endif %}{{ nav_item.title }}</summary>
                         <ul role="listbox">
                             {% for sub_nav_item in nav_item.nav_items %}
-                                <li>
-                                  <a href="{{ sub_nav_item.url }}">{% if sub_nav_item.icon %}<i data-feather="{{ sub_nav_item.icon }}"></i>{% endif %}{{ sub_nav_item.title }}</a>
+                                <li{% if sub_nav_item.divider %} role="divider"{% endif %}>
+                                    {% if sub_nav_item.divider %}
+                                        {% if sub_nav_item.icon %}<i data-feather="{{ sub_nav_item.icon }}"></i>{% endif %}{{ sub_nav_item.title }}
+                                     {% else %}
+                                        <a href="{{ sub_nav_item.url }}">{% if sub_nav_item.icon %}<i data-feather="{{ sub_nav_item.icon }}"></i>{% endif %}{{ sub_nav_item.title }}</a>
+                                     {% endif %}
                                 </li>
                             {% endfor %}
                         </ul>