Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#14833)

* Remove dark mode styling

* Condense & rename light mode stylesheet

* Upgrade to Bootstrap 5.3.2

* Swap out Bootstrap for Tabler; remove custom styling

* Update base page layout for Tabler

* Update login page

* Bump node to v18

* Update button styles

* Update object list view

* Tweak navbar size

* Clean up dashboard widgets

* Ditch separate stylesheet for print media

* Remove simplebar

* Remove obsolete sidebar styling

* Clean up object view template

* Clean up object edit template

* Standardize primary button sizing

* Clean up object list styling

* Add buttons for add & import to navigation menu

* Fix global search bar

* Fix slim-select form widget styling

* Fix toast styling

* Set base fonts

* Clean up paginator styling

* Clean up navigation menu group headings

* Clean up footer links

* Clean up card styles

* Move SVG styles to a designated directory

* Restructure SCSS files

* Remove obsolete/redundant dependencies

* Fix icon spacing

* Update background color classes

* Tweak banner & footer styling and spacing

* Fix badge background colors in table content

* Bump @types/bootstrap to 5.2.10

* Clean up form layouts

* Fix object selector button style

* Fix icon padding inside small buttons

* Fix icon & badge spacing inside buttons and tabs

* Hide paginator for empty pages

* Fix hover color for list items (Tabler bug #1694)

* Fix width of checkbox column in empty tables

* Clean up bulk edit template

* Fix border color of reslug button

* Package & serve Google fonts locally

* Fix tab styling

* Reduce vetical space at top of dashboard

* Remove obsolete content-wrapper template block

* Fix icon spacing in dropdown menu items

* Fix color label sizing

* Separate bulk delete form & object list into tabs

* Fix styling of filter group headings

* Fix styling for object changelog & journal views

* Standardize ordering & styling of action buttons

* Fix designation of active menu item

* Automatically expand menu section containing the active link

* Clean up nav menu styling

* Remove button colors; hide buttons except on hover/active

* Highlight menu group containing the active item

* Update & standardize alert styling

* Refactor base templates to ensure consistent display of header content

* Tweak styling for links inside badges

* Clean up top menu

* Fix JSON/YAML toggles for config context data

* Fix object template header

* Constrain tabs to container-xl; tweak header margins

* Fix object identifier styling

* Fix positioning of card header buttons

* Remove padding from HTMX tables inside cards

* Ensure consistent use of row headings in attribute tables

* Remove padding surrounding tables inside cards

* Remove obsolete CSS classes

* Misc cleanup of old styling

* Refactor 'controls' template block; ditch old classes

* Fix login button sizing

* Limit object edit form width

* Append asterisk to required form field labels

* Remove obsolete styling

* Remove obsolete styling

* Fix position of progress bar outside label

* Fix alignment of delete button in report/script lists

* Fix <pre> styling

* Clean up page headers

* Replace SVG icons with Material Design icons

* Restore dark mode togle functionality

* Fix top navbar background color under dark mode

* Rebuild static assets

netbox/utilities/templates/navigation/menu.html

@@ -1,43 +1,46 @@
 {% load helpers %}
 
-<ul class="navbar-nav">
+<ul class="navbar-nav pt-lg-2">
   {% for menu, groups in nav_items %}
-    <li class="nav-item">
+    <li class="nav-item dropdown">
+
       {# Menu heading #}
-      <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 class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false" >
+        <span class="nav-link-icon d-md-none d-lg-inline-block">
+          <i class="{{ menu.icon_class }}"></i>
+        </span>
+        <span class="nav-link-title">
+          {{ menu.label }}
+        </span>
       </a>
+
       {# Menu groups #}
-      <div class="collapse" id="menu{{ menu.name }}">
-        <ul class="nav nav-sm flex-column">
-          {% for group, items in groups %}
-            {# Group heading #}
-            <li class="nav-item">
-              <div class="nav-group-header">
-                <span class="nav-group-label">{{ group.label }}</span>
+      <div class="dropdown-menu">
+        <div class="dropdown-menu-columns">
+          <div class="dropdown-menu-column pb-2">
+            {% for group, items in groups %}
+              <div class="text-uppercase fw-bold fs-5 ps-3 pt-3 pb-1">
+                {{ group.label }}
               </div>
-            </li>
-            {# Group items #}
-            {% for item, buttons in items %}
-              <li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
-                {# Item #}
-                <a href="{% url item.link %}" class="nav-link">{{ item.link_text }}</a>
-                {# Item buttons (if any) #}
-                {% if buttons %}
-                  <div class="btn-group px-2">
-                    {% for button in buttons %}
-                      <a class="btn btn-sm btn-{{ button.color }} lh-1" href="{% url button.link %}" title="{{ button.title }}">
-                        <i class="{{ button.icon_class }}"></i>
-                      </a>
-                    {% endfor %}
-                  </div>
-                {% endif %}
-              </li>
+              {% for item, buttons in items %}
+                <div class="dropdown-item d-flex justify-content-between ps-3 py-0">
+                  <a href="{% url item.link %}" class="d-inline-flex flex-fill py-1">{{ item.link_text }}</a>
+                  {% if buttons %}
+                    <div class="btn-group ms-1">
+                      {% for button in buttons %}
+                        <a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline-dark" }} lh-2" title="{{ button.title }}">
+                          <i class="{{ button.icon_class }}"></i>
+                        </a>
+                      {% endfor %}
+                    </div>
+                  {% endif %}
+                </div>
+              {% endfor %}
             {% endfor %}
-          {% endfor %}
-        </ul>
+          </div>
+        </div>
       </div>
+
     </li>
   {% endfor %}
 </ul>