From 2a21b450cddb74e5896aa2fe513b17a2937f3b04 Mon Sep 17 00:00:00 2001
From: Anthon van der Neut <anthon@mnt.org>
Date: Thu, 3 Aug 2023 12:00:34 +0200
Subject: [PATCH] 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                          | 1 +
 lona_picocss/navigation.py                        | 5 +++++
 lona_picocss/static/lona-picocss/lona-picocss.css | 4 ++++
 lona_picocss/templates/picocss/header.html        | 8 ++++++--
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/lona_picocss/__init__.py b/lona_picocss/__init__.py
index 963fcea..658a630 100644
--- a/lona_picocss/__init__.py
+++ b/lona_picocss/__init__.py
@@ -9,6 +9,7 @@
     get_django_auth_navigation,
     get_debug_navigation,
     NavItem,
+    NavDivider,
 )
 
 from lona_picocss.views.error_views import (
diff --git a/lona_picocss/navigation.py b/lona_picocss/navigation.py
index dfb52fc..00cbce3 100644
--- a/lona_picocss/navigation.py
+++ b/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 [
diff --git a/lona_picocss/static/lona-picocss/lona-picocss.css b/lona_picocss/static/lona-picocss/lona-picocss.css
index b2fee32..b93e671 100644
--- a/lona_picocss/static/lona-picocss/lona-picocss.css
+++ b/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;
diff --git a/lona_picocss/templates/picocss/header.html b/lona_picocss/templates/picocss/header.html
index 17d97ad..96737ea 100644
--- a/lona_picocss/templates/picocss/header.html
+++ b/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>