16394 distinguish product edition (#16924)

* closes #16907: web ui refresh

* closes #16907: changed default widget color to primary color

* closes #16907: removed comma

* closes #16394: distinguish product edition

* Revert dashboard changes

* Clean up redundant styling (merge error)

* removed labs logo and added sub text for all editions

* fixed motif bug

* Fix "flashing" of side nav under dark mode

* Use title case for edition label

* altered edition text style

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

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

@@ -1,9 +1,6 @@
 // Navbar and light theme styling
 .navbar-vertical.navbar-expand-lg {
 
-  // Background Gradient
-  background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
-
   // Adjust hover color & style for menu items
   .navbar-collapse {
     .nav-link-icon {
@@ -49,6 +46,55 @@
       }
     }
   }
+
+  // Ensures theme toggle appears above background image
+  .navbar-nav {
+    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;
+    display: none;
+    left:0;
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%);
+    opacity: .5;
+    position: fixed;
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    width:18rem;
+
+    @include media-breakpoint-up(lg) {
+      display: block;
+    }
+  }
+}
+
+// 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;
 }
 
 // Dark theme styling
@@ -83,4 +129,8 @@ body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
   .text-secondary {
     color: $bright-teal!important;
   }
+
+  img.motif {
+    opacity: .25;
+  }
 }

netbox/templates/base/layout.html

@@ -20,6 +20,11 @@
 
     {# Sidebar #}
     <aside class="navbar navbar-vertical navbar-expand-lg">
+
+      {% if settings.RELEASE.edition != 'Community' %}
+        <img class="motif" src="{% static 'motif.svg' %}" alt="{% trans "NetBox Motif" %}">
+      {% endif %}
+
       <div class="container-fluid">
 
         {# Menu toggle (mobile view) #}
@@ -32,6 +37,7 @@ <h1 class="navbar-brand">
           <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>
           </a>
         </h1>