Skip to content

Commit

Permalink
Fixes #15613: Show login button/user menu on mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeremystretch
jeremystretch committed Apr 16, 2024
1 parent 4e4c277 commit fd21054
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 48 deletions.
2 changes: 1 addition & 1 deletion netbox/project-static/dist/netbox.css
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions netbox/project-static/styles/overrides/_bootstrap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
57 changes: 10 additions & 47 deletions netbox/templates/base/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,23 @@
<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 %}
Expand All @@ -43,11 +50,6 @@ <h1 class="navbar-brand navbar-brand-autodark">
<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">
Expand All @@ -60,46 +62,7 @@ <h1 class="navbar-brand navbar-brand-autodark">
</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 #}
Expand Down
50 changes: 50 additions & 0 deletions netbox/templates/inc/user_menu.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}

0 comments on commit fd21054

Please sign in to comment.