Rework nav icons to be on the sections if there are sections

Author: davegaeddert

plain-admin/plain/admin/assets/admin/admin.js

@@ -88,15 +88,35 @@ jQuery(($) => {
     updateActiveNav();
   });
 
-  // Simple navigation section toggle with slide animation
+  // Navigation section toggle with accordion behavior
   $(document).on("click", "[data-nav-toggle]", function (e) {
     e.preventDefault();
     const sectionId = $(this).data("nav-toggle");
     const $section = $(`#${sectionId}`);
     const $svg = $(this).find("svg").last();
+    const isCurrentlyOpen = $section.is(":visible");
 
-    $section.slideToggle(80);
-    $svg.toggleClass("rotate-180");
+    // Close all other sections in the same nav area
+    const navArea = $(this).closest("div").find("[data-nav-toggle]");
+    navArea.each(function () {
+      const otherSectionId = $(this).data("nav-toggle");
+      const $otherSection = $(`#${otherSectionId}`);
+      const $otherSvg = $(this).find("svg").last();
+
+      if (otherSectionId !== sectionId) {
+        $otherSection.slideUp(80);
+        $otherSvg.removeClass("rotate-180");
+      }
+    });
+
+    // Toggle the clicked section
+    if (isCurrentlyOpen) {
+      $section.slideUp(80);
+      $svg.removeClass("rotate-180");
+    } else {
+      $section.slideDown(80);
+      $svg.addClass("rotate-180");
+    }
   });
 
   function updateActiveNav() {

plain-admin/plain/admin/templates/admin/base.html

@@ -66,30 +66,44 @@
                     <div class="mt-4 mb-2 px-2 text-xs text-stone-400 uppercase tracking-wider">App</div>
 
                     {% for section, views in app_sections.items() %}
-                    {% if section %}
+                    {% if section.name %}
                     <button
                         data-nav-toggle="app-section-{{ loop.index }}"
                         class="flex items-center justify-between w-full px-2 py-1 mt-1 text-sm rounded hover:bg-white/5 cursor-pointer"
-                        title="Toggle {{ section }}">
-                        <span class="text-stone-300/90">{{ section }}</span>
+                        title="Toggle {{ section.name }}">
+                        <div class="flex items-center">
+                            <admin.Icon name={section.icon} class="w-3.5 h-3.5 mr-2 flex-shrink-0 text-stone-400" />
+                            <span class="text-stone-300/90">{{ section.name }}</span>
+                        </div>
                         <admin.Icon name="chevron-down" class="w-3.5 h-3.5 transition-transform text-stone-500" data-nav-toggle-icon />
                     </button>
                     <div id="app-section-{{ loop.index }}" style="display: none;">
+                        {% for view in views %}
+                        {% set url = view.get_view_url() %}
+                        <a
+                            {% if url == request.path or view in parent_view_classes %}data-active{% endif %}
+                            class="data-[active]:text-blue-400 flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5 pl-8"
+                            href="{{ url }}"
+                            hx-boost="true">
+                            <span class="truncate">{{ view.get_nav_title() }}</span>
+                        </a>
+                        {% endfor %}
+                    </div>
                     {% else %}
                     <div class="mb-4">
-                    {% endif %}
                         {% for view in views %}
                         {% set url = view.get_view_url() %}
                         <a
                             {% if url == request.path or view in parent_view_classes %}data-active{% endif %}
-                            class="data-[active]:bg-white/20 data-[active]:text-white flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5"
+                            class="data-[active]:text-blue-400 flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5"
                             href="{{ url }}"
                             hx-boost="true">
-                            <admin.Icon name={view.get_nav_icon()} class="w-3.5 h-3.5 mr-3 flex-shrink-0" />
+                            <admin.Icon name={view.nav_icon} class="w-3.5 h-3.5 mr-3 flex-shrink-0 text-stone-400" />
                             <span class="truncate">{{ view.get_nav_title() }}</span>
                         </a>
                         {% endfor %}
                     </div>
+                    {% endif %}
                     {% endfor %}
                 </div>
                 {% endif %}
@@ -100,30 +114,44 @@
                     <div class="mb-2 px-2 text-xs text-stone-400 uppercase tracking-wider">Plain</div>
 
                     {% for section, views in plain_sections.items() %}
-                    {% if section %}
+                    {% if section.name %}
                     <button
                         data-nav-toggle="plain-section-{{ loop.index }}"
                         class="flex items-center justify-between w-full px-2 py-1 mt-1 text-sm rounded hover:bg-white/5 cursor-pointer"
-                        title="Toggle {{ section }}">
-                        <span class="text-stone-300/90">{{ section }}</span>
+                        title="Toggle {{ section.name }}">
+                        <div class="flex items-center">
+                            <admin.Icon name={section.icon} class="w-3.5 h-3.5 mr-2 flex-shrink-0 text-stone-400" />
+                            <span class="text-stone-300/90">{{ section.name }}</span>
+                        </div>
                         <admin.Icon name="chevron-down" class="w-3.5 h-3.5 transition-transform text-stone-500" data-nav-toggle-icon />
                     </button>
                     <div id="plain-section-{{ loop.index }}" style="display: none;">
+                        {% for view in views %}
+                        {% set url = view.get_view_url() %}
+                        <a
+                            {% if url == request.path or view in parent_view_classes %}data-active{% endif %}
+                            class="data-[active]:text-blue-400 flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5 pl-8"
+                            href="{{ url }}"
+                            hx-boost="true">
+                            <span class="truncate">{{ view.get_nav_title() }}</span>
+                        </a>
+                        {% endfor %}
+                    </div>
                     {% else %}
                     <div>
-                    {% endif %}
                         {% for view in views %}
                         {% set url = view.get_view_url() %}
                         <a
                             {% if url == request.path or view in parent_view_classes %}data-active{% endif %}
-                            class="data-[active]:bg-white/20 data-[active]:text-white flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5"
+                            class="data-[active]:text-blue-400 flex items-center px-2 py-0.5 mt-px text-sm rounded hover:text-stone-300 text-stone-300/90 hover:bg-white/5"
                             href="{{ url }}"
                             hx-boost="true">
-                            <admin.Icon name={view.get_nav_icon()} class="w-3.5 h-3.5 mr-3 flex-shrink-0" />
+                            <admin.Icon name={view.nav_icon} class="w-3.5 h-3.5 mr-3 flex-shrink-0 text-stone-400" />
                             <span class="truncate">{{ view.get_nav_title() }}</span>
                         </a>
                         {% endfor %}
                     </div>
+                    {% endif %}
                     {% endfor %}
                 </div>
                 {% endif %}
@@ -160,41 +188,27 @@
                 <div class="flex-shrink-0 overflow-hidden">
                 {% block header %}
                     <div class="flex items-center">
-                        {% block image %}
-                            {% if image %}
-                            <img src="{{ image.src }}" alt="{{ image.alt }}" class="h-20 rounded mr-3 flex-shrink-0">
-                            {% endif %}
-                        {% endblock %}
                         <div class="truncate">
                             <nav class="flex items-center text-sm sm:text-base lg:text-xl text-white/90 space-x-1" aria-label="Breadcrumb">
-                                {% set current_nav_section = view_class.get_nav_section() %}
-                                {% if parent_view_classes or current_nav_section %}
-                                    {% set ns = namespace(last_section='') %}
-                                    {% for parent_view in parent_view_classes|reverse %}
-                                        {% if parent_view.get_nav_section() and parent_view.get_nav_section() != ns.last_section %}
-                                            {% if ns.last_section %}
-                                            <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
-                                            {% endif %}
-                                            <span class="text-white/40 text-sm">{{ parent_view.get_nav_section() }}</span>
-                                            <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
-                                            {% set ns.last_section = parent_view.get_nav_section() %}
-                                        {% elif loop.index > 1 %}
-                                            <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
-                                        {% endif %}
-                                        <a href="{{ parent_view.get_view_url(object if object is defined else None) }}" class="inline-flex items-center hover:text-white/70 text-white/50 text-sm">
-                                            {{ parent_view.get_nav_title() }}
-                                        </a>
-                                    {% endfor %}
-                                    {% if current_nav_section and current_nav_section != ns.last_section %}
-                                        {% if parent_view_classes %}
+                                {% for parent_view in parent_view_classes|reverse %}
+                                    {% if parent_view.nav_section %}
+                                        <span class="text-white/40 text-sm">{{ parent_view.nav_section }}</span>
                                         <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
-                                        {% endif %}
-                                        <span class="text-white/40 text-sm">{{ current_nav_section }}</span>
                                     {% endif %}
-                                    {% if parent_view_classes or current_nav_section %}
+                                    <a href="{{ parent_view.get_view_url(object if object is defined else None) }}" class="inline-flex items-center hover:text-white/70 text-white/50 text-sm">
+                                        {{ parent_view.get_nav_title() }}
+                                    </a>
+                                    <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
+                                {% endfor %}
+                                {% if view_class.nav_section and not parent_view_classes %}
+                                    <span class="text-white/40 text-sm">{{ view_class.nav_section }}</span>
                                     <admin.Icon name="chevron-right" class="w-3 h-3 text-white/50" />
-                                    {% endif %}
                                 {% endif %}
+                                {% block image %}
+                                    {% if image %}
+                                    <img src="{{ image.src }}" alt="{{ image.alt }}" class="h-5 rounded mr-2 flex-shrink-0">
+                                    {% endif %}
+                                {% endblock %}
                                 <h1 class="font-semibold text-sm">{% block title %}{{ title }}{% endblock %}</h1>
                             </nav>
                         </div>

plain-admin/plain/admin/views/base.py

@@ -1,4 +1,4 @@
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Optional
 
 from plain.auth.views import AuthViewMixin
 from plain.urls import reverse
@@ -29,13 +29,13 @@ class AdminView(AuthViewMixin, TemplateView):
     # An explicit disabling of showing this url/page in the nav
     # which importantly effects the (future) recent pages list
     # so you can also use this for pages that can never be bookmarked
-    nav_section = ""
     nav_title = ""
+    nav_section = ""
     nav_icon = "app"
 
-    links: dict[str] = {}
+    links: dict[str, str] = {}
 
-    parent_view_class: "AdminView" = None
+    parent_view_class: Optional["AdminView"] = None
 
     template_name = "admin/page.html"
     cards: list["Card"] = []
@@ -90,17 +90,6 @@ def get_parent_view_classes(cls) -> list["AdminView"]:
             parent = parent.parent_view_class
         return parents
 
-    @classmethod
-    def get_nav_section(cls) -> str | None:
-        if not cls.nav_section:
-            return cls.nav_section  # Could be None or ""
-
-        if cls.parent_view_class:
-            # Don't show child views by default
-            return None
-
-        return cls.nav_section
-
     @classmethod
     def get_nav_title(cls) -> str:
         if cls.nav_title:
@@ -113,10 +102,6 @@ def get_nav_title(cls) -> str:
             f"Please set a title or nav_title on the {cls} class or implement get_nav_title()."
         )
 
-    @classmethod
-    def get_nav_icon(cls) -> str:
-        return cls.nav_icon
-
     @classmethod
     def get_view_url(cls, obj=None) -> str:
         # Check if this view's path expects an id parameter

plain-admin/plain/admin/views/registry.py

@@ -1,6 +1,23 @@
 from plain.urls import path, reverse_lazy
 
 
+class NavSection:
+    def __init__(self, name: str, icon: str = "folder"):
+        self.name = name
+        self.icon = icon
+
+    def __str__(self):
+        return self.name
+
+    def __eq__(self, other):
+        if isinstance(other, NavSection):
+            return self.name == other.name
+        return self.name == other
+
+    def __hash__(self):
+        return hash(self.name)
+
+
 class AdminViewRegistry:
     def __init__(self):
         # View classes that will be added to the admin automatically
@@ -32,57 +49,77 @@ def inner(viewset):
     def get_app_nav_sections(self):
         """Returns nav sections for app/user packages only."""
         sections = {}
+        section_icons = {}  # Track icons per section
 
         for view in self.registered_views:
             # Skip plain package views
             if view.__module__.startswith("plain."):
                 continue
 
-            section = view.get_nav_section()
+            section_name = view.nav_section
 
             # Skip views with nav_section = None (don't show in nav)
-            if section is None:
+            # But allow empty string "" for ungrouped items
+            if section_name is None:
                 continue
 
-            if section not in sections:
-                sections[section] = []
-            sections[section].append(view)
+            # Set section icon if this view defines one and we don't have one yet
+            if view.nav_icon and section_name not in section_icons:
+                section_icons[section_name] = view.nav_icon
+
+            # Create or get the NavSection
+            section_icon = section_icons.get(section_name, "folder")
+            nav_section = NavSection(section_name, section_icon)
+
+            if nav_section not in sections:
+                sections[nav_section] = []
+            sections[nav_section].append(view)
 
         # Sort each section by nav_title
         for section in sections.values():
             section.sort(key=lambda v: v.get_nav_title())
 
         # Sort sections alphabetically, but put empty string first
         def section_sort_key(item):
-            section_name = item[0]
+            section_name = item[0].name
             return ("z" if section_name else "", section_name)
 
         return dict(sorted(sections.items(), key=section_sort_key))
 
     def get_plain_nav_sections(self):
         """Returns nav sections for plain packages only."""
         sections = {}
+        section_icons = {}  # Track icons per section
 
         for view in self.registered_views:
             # Only include plain package views
             if not view.__module__.startswith("plain."):
                 continue
 
-            section = view.get_nav_section()
+            section_name = view.nav_section
             # Skip views with nav_section = None (don't show in nav)
-            if section is None:
+            # But allow empty string "" for ungrouped items
+            if section_name is None:
                 continue
 
-            if section not in sections:
-                sections[section] = []
-            sections[section].append(view)
+            # Set section icon if this view defines one and we don't have one yet
+            if view.nav_icon and section_name not in section_icons:
+                section_icons[section_name] = view.nav_icon
+
+            # Create or get the NavSection
+            section_icon = section_icons.get(section_name, "folder")
+            nav_section = NavSection(section_name, section_icon)
+
+            if nav_section not in sections:
+                sections[nav_section] = []
+            sections[nav_section].append(view)
 
         # Sort each section by nav_title
         for section in sections.values():
             section.sort(key=lambda v: v.get_nav_title())
 
         # Sort sections alphabetically
-        return dict(sorted(sections.items()))
+        return dict(sorted(sections.items(), key=lambda item: item[0].name))
 
     def get_urls(self):
         urls = []

plain-cache/plain/cache/admin.py

@@ -11,9 +11,9 @@
 class CachedItemViewset(AdminViewset):
     class ListView(AdminModelListView):
         nav_section = "Cache"
+        nav_icon = "archive"
         model = CachedItem
         title = "Cached items"
-        nav_icon = "archive"
         fields = [
             "key",
             "created_at",

plain-oauth/plain/oauth/admin.py

@@ -37,9 +37,9 @@ def get_chart_data(self) -> dict:
 class OAuthConnectionViewset(AdminViewset):
     class ListView(AdminModelListView):
         nav_section = "OAuth"
+        nav_icon = "link-45deg"
         model = OAuthConnection
         title = "Connections"
-        nav_icon = "link-45deg"
         fields = ["id", "user", "provider_key", "provider_user_id"]
         cards = [ProvidersChartCard]