edited navigation layout

netbox/project-static/src/sidenav.ts

@@ -68,7 +68,7 @@ class SideNav {
    * Set initial values & add event listeners.
    */
   private init() {
-    for (const toggler of this.base.querySelectorAll('.sidenav-toggle')) {
+    for (const toggler of getElements<HTMLButtonElement>('.sidenav-toggle')) {
       toggler.addEventListener('click', event => this.onToggle(event));
     }
 
@@ -221,7 +221,6 @@ class SideNav {
             break;
           case 'collapse':
             groupLink.setAttribute('aria-expanded', 'false');
-            groupItem.classList.remove('active');
             dropdownMenu.classList.remove('show');
             link.classList.remove('active');
             break;
@@ -314,7 +313,7 @@ class SideNav {
 }
 
 export function initSideNav(): void {
-  for (const sidenav of getElements<HTMLDivElement>('.navbar')) {
+  for (const sidenav of getElements<HTMLDivElement>('.navbar-vertical')) {
     new SideNav(sidenav);
   }
 }

netbox/project-static/styles/transitional/_navigation.scss

@@ -1,19 +1,65 @@
+body {
+  &[data-sidenav-hidden] {
+    .navbar-vertical.navbar-expand-lg {
+      @include media-breakpoint-up(lg) {
+        width: 3.2rem;
+      }
+
+      .nav-link-title {
+        opacity: 0;
+        transition: ease-in-out 100ms;
+      }
+    }
+  }
+
+  &:not([data-sidenav-pinned]) {
+    .page-wrapper {
+      @include media-breakpoint-up(lg) {
+        margin-left: 3.2rem!important;
+      }
+    }
+  }
+}
+
 // Navbar and light theme styling
 .navbar-vertical.navbar-expand-lg {
 
+  transition: ease-in-out 100ms;
+
+  // Overrides default side nav settings
+  @include media-breakpoint-up(lg) {
+    padding-top: 56px;
+    z-index: 1020;
+  }
+
   // Adjust hover color & style for menu items
   .navbar-collapse {
     .nav-link-icon {
       color: var(--tblr-nav-link-color)!important;
+
+      // Aligns icon and text with the menu toggle and logo
+      @include media-breakpoint-up(lg) {
+        margin-right: .7rem;
+        margin-left: .3rem;
+      }
     }
     .text-secondary {
       color: $dark-teal!important;
+
+      @include media-breakpoint-up(lg) {
+        padding-left: 1.25rem !important;
+      }
     }
 
     .dropdown-menu {
 
       // Adjust hover color & style for menu items
       .dropdown-item {
+
+        @include media-breakpoint-up(lg) {
+          padding-left: 1.25rem !important;
+        }
+
         a {
           color: $rich-black;
         }
@@ -52,24 +98,6 @@
     z-index: 1;
   }
 
-  // Logo text for non-community editions
-  .navbar-brand {
-
-    // Reduce logo padding on mobile view
-    @include media-breakpoint-down(lg) {
-      padding: 0.2rem 0;
-    }
-
-    a:hover {
-      text-decoration: none;
-    }
-    .netbox-edition {
-      font-size: .7rem;
-      letter-spacing: .15rem;
-      text-align: center;
-    }
-  }
-
   // Navigation geometric graphic for non-community editions
   img.motif {
     bottom: 0;
@@ -92,6 +120,42 @@
   }
 }
 
+.collapse-menu-toggle {
+  height: 24px;
+  width: 24px;
+  padding: 0;
+}
+
+// Logo text for non-community editions
+.navbar-brand {
+
+  &-image {
+    height: 1.8rem;
+  }
+
+  // Reduce logo padding on mobile view
+  @include media-breakpoint-down(lg) {
+    padding: 0.2rem 0;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+  .netbox-edition {
+    font-size: .7rem;
+    letter-spacing: .15rem;
+    text-align: center;
+  }
+}
+
+// Controls desktop navbar search box width
+#navbar-menu {
+  form {
+    max-width: 500px;
+    width: 100%;
+  }
+}
+
 // Light theme styling
 body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
   background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;

netbox/templates/base/layout.html

@@ -33,11 +33,11 @@ Blocks:
         </button>
 
         {# Logo #}
-        <h1 class="navbar-brand">
+        <h1 class="navbar-brand d-lg-none py-0">
           <a href="{% url 'home' %}">
             <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
             <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
-            <div class="netbox-edition fw-semibold mt-2">{{ settings.RELEASE.edition }}</div>
+            <div class="netbox-edition fw-semibold mt-1">{{ settings.RELEASE.edition }}</div>
           </a>
         </h1>
 
@@ -56,7 +56,7 @@ Blocks:
     </aside>
 
     {# Top menu #}
-    <header class="navbar navbar-expand-md sticky-top d-none d-lg-flex d-print-none">
+    <header class="navbar navbar-expand-md sticky-top d-none d-lg-flex d-print-none ms-0">
       <div class="container-fluid">
 
         <div class="navbar-nav flex-row align-items-center order-md-last">
@@ -71,9 +71,22 @@ Blocks:
           {% include 'inc/user_menu.html' %}
         </div>
 
+        <button class="btn collapse-menu-toggle sidenav-toggle me-3 rounded-circle" aria-expanded="true" aria-label="Toggle navigation">
+          <i class="mdi mdi-menu"></i>
+        </button>
+
+        {# Logo #}
+        <h1 class="navbar-brand py-0">
+          <a href="{% url 'home' %}">
+            <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
+            <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
+            <div class="netbox-edition fw-semibold mt-1">{{ settings.RELEASE.edition }}</div>
+          </a>
+        </h1>
+
         {# Search box #}
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <form action="{% url 'search' %}" method="get" autocomplete="off" novalidate>
+          <form action="{% url 'search' %}" method="get" autocomplete="off" novalidate class="mx-auto px-4">
             <div class="input-icon">
               <span class="input-icon-addon">
                 <i class="mdi mdi-magnify"></i>