v3.0 nav menu tweaks (#6906)

* Clean up nav menu spacing & link colors

* Shrink NetBox icon & collapsed sidebar

* Fix gap between scrollbar and righthand window border

netbox/project-static/styles/netbox.scss

@@ -501,7 +501,7 @@ div.content-container {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: calc(100% - 4.5rem);
+  width: calc(100% - 3rem);  // $sidenav-width-closed
   min-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;

netbox/project-static/styles/sidenav.scss

@@ -163,6 +163,12 @@
     }
   }
 
+  .nav-group-header {
+    padding: $sidenav-link-spacing-y / 2 $sidenav-link-spacing-x;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+
   // Child Link nav-item
   .nav .nav-item {
     display: flex;
@@ -178,25 +184,15 @@
 
   @include child-link() {
     width: 100%;
-    padding-top: $sidenav-link-spacing-y / 2.675;
+    padding-top: $sidenav-link-spacing-y / 2;
     padding-right: map.get($spacers, 1);
-    padding-bottom: $sidenav-link-spacing-y / 2.675;
+    padding-bottom: $sidenav-link-spacing-y / 2;
-    /* stylelint-disable */
+    padding-left: $sidenav-link-spacing-x;
-    padding-left: $sidenav-link-spacing-x + $sidenav-icon-width + $sidenav-link-spacing-x / 4;
+    margin-top: 0;
-    /* stylelint-enable */
+    margin-bottom: 0;
-    margin-top: $sidenav-link-spacing-y / 3.3;
-    margin-bottom: $sidenav-link-spacing-y / 3.3;
-    font-size: $font-size-xs;
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
 
-    .sidenav-normal {
-      color: $text-muted;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
     .sidenav-mini-icon {
       width: $sidenav-link-spacing-x;
       text-align: center;
@@ -209,6 +205,7 @@
     height: 100%;
     font-weight: $font-weight-bold;
     color: var(--nbx-sidenav-parent-color);
+    padding-left: $sidenav-link-spacing-x / 2;
 
     &.active {
       color: $accordion-button-active-color;
@@ -273,7 +270,10 @@
 
         &.active {
           position: relative;
-          color: var(--nbx-sidebar-link-hover-bg);
+          background-color: var(--nbx-sidebar-link-hover-bg);
+        }
+
+        &:hover {
           background-color: var(--nbx-sidebar-link-hover-bg);
         }
 
@@ -290,7 +290,7 @@
       display: block;
       font-size: $font-size-xs;
       font-weight: $font-weight-bold;
-      color: $primary;
+      color: $secondary;
       text-transform: uppercase;
       white-space: nowrap;
     }

netbox/project-static/styles/theme-base.scss

@@ -143,10 +143,9 @@ $sidebar-bottom-height: 4rem;
 $transition-100ms-ease-in-out: all 0.1s ease-in-out;
 
 // Sidebar/Sidenav
-$sidenav-width-closed: 4rem;
+$sidenav-width-closed: 3rem;
 $sidenav-width-open: 16rem;
 $sidenav-icon-width: 2rem;
-$sidenav-link-px: 1rem;
 $sidenav-spacing-x: 1.5rem;
 $sidenav-link-spacing-x: 1rem;
-$sidenav-link-spacing-y: 0.675rem;
+$sidenav-link-spacing-y: 0.5rem;

netbox/templates/base/sidenav.html

@@ -13,7 +13,7 @@
 
     {# Icon Logo #}
     <a class="sidenav-brand-icon" href="/">
-      <img src="{% static 'netbox_icon.svg' %}" height="48" class="sidenav-brand-img" alt="NetBox Logo">
+      <img src="{% static 'netbox_icon.svg' %}" height="32" class="sidenav-brand-img" alt="NetBox Logo">
     </a>
 
     {# Pin/Unpin Toggle #}

netbox/templates/inc/profile_button.html

@@ -1,10 +1,10 @@
 {% if request.user.is_authenticated %}
-<span class="dropdown ms-0 ms-md-3 profile-button">
+<span class="dropdown profile-button">
   <button
     type="button"
     aria-expanded="false"
     data-bs-toggle="dropdown"
-    class="btn btn-outline-secondary dropdown-toggle"
+    class="btn btn-outline-secondary dropdown-toggle w-100"
   >
     <i class="mdi mdi-account"></i>
     <span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
@@ -37,7 +37,7 @@
   </ul>
 </span>
 {% else %}
-<div class="btn-group ms-0 ms-md-3">
+<div class="btn-group">
   <a
     class="btn btn-primary ws-nowrap"
     type="button"

netbox/utilities/templates/navigation/nav_items.html

@@ -13,8 +13,8 @@
                     {% for group in menu.groups %}
                         {# Within each main menu, there are groups of menu items #}
                             <li class="nav-item">
-                                <div class="nav-link">
+                                {# Group Label #}
-                                    {# Group Label #}
+                                <div class="nav-group-header">
                                     <span class="nav-group-label">{{ group.label }}</span>
                                 </div>
                             </li>
@@ -24,7 +24,7 @@
                             {% if request.user|has_perms:item.permissions %}
                             <li class="nav-item{% if not item.buttons %} no-buttons{% endif %}">
                                 <a href="{% url item.link %}" class="nav-link">
-                                    <span class="sidenav-normal">{{ item.link_text }}</span>
+                                    {{ item.link_text }}
                                 </a>
 
                                 {# Menu item buttons (if any) #}
@@ -45,7 +45,7 @@
                                 <li class="nav-item disabled">
                                     <a href="#" class="nav-link disabled" aria-disabled="true" disabled>
                                         <i class='mdi mdi-lock small'></i>
-                                        <span class="sidenav-normal">{{ item.link_text }}</span>
+                                        {{ item.link_text }}
                                     </a>
                                 </li>
                             {% endif %}