Fixes #15613: Show login button/user menu on mobile view

netbox/project-static/styles/overrides/_bootstrap.scss

@@ -14,3 +14,9 @@ html {
 .progress {
   min-width: 80px;
 }
+
+// Reduce vertical margin around dropdown menu divider
+hr.dropdown-divider {
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
+}

netbox/templates/base/layout.html

@@ -21,16 +21,23 @@ Blocks:
     <aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
       <div class="container-fluid">
 
-        {# Header icon #}
+        {# Menu toggle (mobile view) #}
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
+
+        {# Logo #}
         <h1 class="navbar-brand navbar-brand-autodark">
           <a href="{% url 'home' %}">
-            <img src="{% static 'netbox_logo.svg' %}" height="32" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
+            <img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
           </a>
         </h1>
 
+        {# User menu (mobile view) #}
+        <div class="navbar-nav flex-row d-lg-none">
+          {% include 'inc/user_menu.html' %}
+        </div>
+
         {# Navigation menu #}
         <div class="collapse navbar-collapse" id="sidebar-menu">
           {% nav %}
@@ -43,11 +50,6 @@ Blocks:
     <header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
       <div class="container-fluid">
 
-        {# Nav menu toggle #}
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-
         <div class="navbar-nav flex-row align-items-center order-md-last">
           {# Dark/light mode toggle #}
           <div class="d-none d-md-flex">
@@ -60,46 +62,7 @@ Blocks:
           </div>
 
           {# User menu #}
-          {% if request.user.is_authenticated %}
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
-                <div class="d-xl-block ps-2">
-                  <div>{{ request.user }}</div>
-                  <div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" {% htmx_boost %}>
-                {% if config.DJANGO_ADMIN_ENABLED and request.user.is_staff %}
-                  <a class="dropdown-item" href="{% url 'admin:index' %}">
-                    <i class="mdi mdi-cog"></i> {% trans "Django Admin" %}
-                  </a>
-                {% endif %}
-                <a href="{% url 'account:profile' %}" class="dropdown-item">
-                  <i class="mdi mdi-account"></i> {% trans "Profile" %}
-                </a>
-                <a href="{% url 'account:bookmarks' %}" class="dropdown-item">
-                  <i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
-                </a>
-                <a href="{% url 'account:preferences' %}" class="dropdown-item">
-                  <i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
-                </a>
-                <a href="{% url 'account:usertoken_list' %}" class="dropdown-item">
-                  <i class="mdi mdi-key"></i> {% trans "API Tokens" %}
-                </a>
-                <div class="dropdown-divider"></div>
-                <a href="{% url 'logout' %}" hx-disable="true" class="dropdown-item">
-                  <i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
-                </a>
-              </div>
-            </div>
-          {% else %}
-            <div class="btn-group ps-2">
-              <a class="btn btn-primary" type="button" href="{% url 'login' %}?next={{ request.path }}">
-                <i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
-              </a>
-            </div>
-          {% endif %}
-          {# /User menu #}
+          {% include 'inc/user_menu.html' %}
         </div>
 
         {# Search box #}

netbox/templates/inc/user_menu.html

@@ -0,0 +1,50 @@
+{% load i18n %}
+{% load navigation %}
+
+{% if request.user.is_authenticated %}
+  <div class="nav-item dropdown">
+    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+      <div class="d-xl-block ps-2">
+        <div>{{ request.user }}</div>
+        <div class="mt-1 small text-secondary">
+          {% if request.user.is_superuser %}
+            {% trans "Admin" %}
+          {% elif request.user.is_staff %}
+            {% trans "Staff" %}
+          {% else %}
+            {% trans "User" %}
+          {% endif %}
+        </div>
+      </div>
+    </a>
+    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" {% htmx_boost %}>
+      {% if config.DJANGO_ADMIN_ENABLED and request.user.is_staff %}
+        <a class="dropdown-item" href="{% url 'admin:index' %}">
+          <i class="mdi mdi-cog"></i> {% trans "Django Admin" %}
+        </a>
+      {% endif %}
+      <a href="{% url 'account:profile' %}" class="dropdown-item">
+        <i class="mdi mdi-account"></i> {% trans "Profile" %}
+      </a>
+      <a href="{% url 'account:bookmarks' %}" class="dropdown-item">
+        <i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
+      </a>
+      <a href="{% url 'account:preferences' %}" class="dropdown-item">
+        <i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
+      </a>
+      <a href="{% url 'account:usertoken_list' %}" class="dropdown-item">
+        <i class="mdi mdi-key"></i> {% trans "API Tokens" %}
+      </a>
+      <hr class="dropdown-divider" />
+      <a href="{% url 'logout' %}" hx-disable="true" class="dropdown-item">
+        <i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
+      </a>
+    </div>
+  </div>
+{% else %}
+  <div class="btn-group align-items-center ps-2">
+    <a class="btn btn-primary" type="button" href="{% url 'login' %}?next={{ request.path }}">
+      <i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
+    </a>
+  </div>
+{% endif %}