Fixes #10984: Fix navigation menu expansion for plugin menus comprisi…

…ng multiple words
netbox-community · Nov 21, 2022 · 150cb77 · 150cb77
1 parent e494d7b
commit 150cb77
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/docs/release-notes/version-3.4.md b/docs/release-notes/version-3.4.md
@@ -14,6 +14,7 @@
 * [#10973](https://github.com/netbox-community/netbox/issues/10973) - Fix device links in VDC table
 * [#10980](https://github.com/netbox-community/netbox/issues/10980) - Fix view tabs for plugin objects
 * [#10982](https://github.com/netbox-community/netbox/issues/10982) - Catch `NoReverseMatch` exception when rendering tabs with no registered URL
+* [#10984](https://github.com/netbox-community/netbox/issues/10984) - Fix navigation menu expansion for plugin menus comprising multiple words
 
 ## v3.4-beta1 (2022-11-16)
 

diff --git a/netbox/extras/plugins/navigation.py b/netbox/extras/plugins/navigation.py
@@ -19,6 +19,10 @@ def __init__(self, label, groups, icon_class=None):
         if icon_class is not None:
             self.icon_class = icon_class
 
+    @property
+    def name(self):
+        return self.label.replace(' ', '_')
+
 
 class PluginMenuItem:
     """

diff --git a/netbox/extras/tests/dummy_plugin/navigation.py b/netbox/extras/tests/dummy_plugin/navigation.py
@@ -26,7 +26,7 @@
 )
 
 menu = PluginMenu(
-    label=_('Dummy'),
+    label=_('Dummy Plugin'),
     groups=(('Group 1', items),),
 )
 menu_items = items
diff --git a/netbox/netbox/navigation/__init__.py b/netbox/netbox/navigation/__init__.py
@@ -51,6 +51,10 @@ class Menu:
     icon_class: str
     groups: Sequence[MenuGroup]
 
+    @property
+    def name(self):
+        return self.label.replace(' ', '_')
+
 
 #
 # Utility functions

diff --git a/netbox/utilities/templates/navigation/menu.html b/netbox/utilities/templates/navigation/menu.html
@@ -4,12 +4,12 @@
   {% for menu, groups in nav_items %}
     <li class="nav-item">
       {# Menu heading #}
-      <a class="nav-link" href="#menu{{ menu.label }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.label }}">
+      <a class="nav-link" href="#menu{{ menu.name }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.name }}">
        <i class="{{ menu.icon_class }}"></i>
        <span class="nav-link-text">{{ menu.label }}</span>
       </a>
       {# Menu groups #}
-      <div class="collapse" id="menu{{ menu.label }}">
+      <div class="collapse" id="menu{{ menu.name }}">
         <ul class="nav nav-sm flex-column">
           {% for group, items in groups %}
             {# Group heading #}