Clean up sidebar layout

netbox/templates/base/layout.html

@@ -6,35 +6,41 @@
 {% load static %}
 
 {% block layout %}
-  <div class="container-fluid">
-    <main class="ms-sm-auto px-0">
+  <div class="container-fluid px-0">
+    <main class="ms-sm-auto">
     {# Sidebar #}
       <nav id="sidebar-menu" class="d-md-block sidebar collapse px-0" data-simplebar>
 
         {# Sidebar content #}
-        <div class="position-sticky pt-3">
+        <div class="position-sticky">
 
           {# Logo #}
-          <a class="p-1 sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}">
-            <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
-          </a>
+          <div class="py-2">
+            <a class="sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}">
+              <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
+            </a>
+          </div>
+
+          <ul class="nav flex-column px-1">
 
-          {# Search bar #}
-          <ul class="nav flex-column px-4">
+            {# Search bar for collapsed menu #}
             <div class="d-block d-md-none mx-1 my-3 search-container">
               {% search_options %}
             </div>
             <div class="d-flex d-md-none mx-1 my-3 justify-content-center justify-content-md-end order-last order-md-0">
               {% include 'inc/profile_button.html' %}
             </div>
+
+            {# Navigation menu #}
             {% nav %}
+
           </ul>
 
         </div>
 
         {# Sidebar footer #}
         <div class="d-flex flex-column container-fluid mt-auto justify-content-end sidebar-bottom">
-          <nav class="nav justify-content-between mb-2 mt-4 px-2">
+          <nav class="nav justify-content-evenly my-2 px-2">
 
             {# Documentation #}
             <a type="button" class="nav-link" href="https://netbox.readthedocs.io/" target="_blank">

netbox/utilities/templates/navigation/nav_items.html

@@ -21,7 +21,7 @@
           
           {% for group in menu.groups %}
             {# Within each main menu, there are groups of menu items #}
-            <div class="flex-column nav px-2">
+            <div class="flex-column nav">
               
               {% if menu.groups|length > 1 %}
                 <h6 class="accordion-item-title">{{ group.label }}</h6>
@@ -32,23 +32,25 @@
                 <div class="nav-item d-flex justify-content-between align-items-center">
                   
                   {# Menu Link with Text #}
-                  <a class="nav-link flex-grow-1 me-1" href="{% url item.url %}">
+                  <a class="nav-link flex-grow-1" href="{% url item.url %}">
                     {{ item.label }}
                   </a>
                   
                   {# Add & Import Buttons #}
-                  <div class="btn-group">
-                    {% if item.has_add %}
-                        <a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}">
-                          <i class="mdi mdi-plus-thick"></i>
-                        </a>
-                    {% endif %}
-                    {% if item.has_import %}
-                        <a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}">
-                          <i class="mdi mdi-upload"></i>
-                        </a>
-                    {% endif %}
-                  </div>
+                  {% if item.has_add or item.has_import %}
+                    <div class="btn-group ps-1">
+                      {% if item.has_add %}
+                          <a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}">
+                            <i class="mdi mdi-plus-thick"></i>
+                          </a>
+                      {% endif %}
+                      {% if item.has_import %}
+                          <a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}">
+                            <i class="mdi mdi-upload"></i>
+                          </a>
+                      {% endif %}
+                    </div>
+                  {% endif %}
 
                 </div>
               {% endfor %}