Clean up top menu

This commit is contained in:
Jeremy Stretch 2024-01-11 16:01:37 -05:00
parent ed41ce355a
commit d74e420ed1
5 changed files with 13 additions and 35 deletions

Binary file not shown.

View File

@ -36,3 +36,8 @@
} }
} }
} }
// Header menu styling
header.navbar {
background-color: $bg-surface-secondary;
}

View File

@ -5,9 +5,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html <html
lang="en" lang="en"
{% if preferences|get_key:'ui.colormode' == 'dark' %}
data-bs-theme="dark"
{% endif %}
data-netbox-url-name="{{ request.resolver_match.url_name }}" data-netbox-url-name="{{ request.resolver_match.url_name }}"
data-netbox-base-path="{{ settings.BASE_PATH }}" data-netbox-base-path="{{ settings.BASE_PATH }}"
> >
@ -47,7 +44,11 @@
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body> <body
{% if preferences|get_key:'ui.colormode' == 'dark' %}
data-bs-theme="dark"
{% endif %}
>
{# Page layout #} {# Page layout #}
{% block layout %}{% endblock %} {% block layout %}{% endblock %}

View File

@ -43,12 +43,13 @@ Blocks:
<header class="navbar navbar-expand-md d-none d-lg-flex d-print-none"> <header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
<div class="container-xl"> <div class="container-xl">
{# Toggle button #} {# 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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="navbar-nav flex-row order-md-last"> <div class="navbar-nav flex-row order-md-last">
{# Dark/light mode toggle #}
<div class="d-none d-md-flex"> <div class="d-none d-md-flex">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom"> <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon --> <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
@ -58,37 +59,9 @@ Blocks:
<!-- Download SVG icon from http://tabler-icons.io/i/sun --> <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a> </a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
<div class="card">
<div class="card-header">
<h3 class="card-title">Last updates</h3>
</div>
<div class="list-group list-group-flush list-group-hoverable">
<div class="list-group-item">
Item 1
</div>
<div class="list-group-item">
Item 2
</div>
<div class="list-group-item">
Item 3
</div>
<div class="list-group-item">
Item 4
</div>
</div>
</div>
</div>
</div>
</div> </div>
{# User menu #} {# User menu #}
{% include 'inc/profile_button.html' %} {% include 'inc/user_menu.html' %}
</div> </div>
{# Search box #} {# Search box #}

View File

@ -3,7 +3,6 @@
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="nav-item dropdown"> <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"> <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm"></span>
<div class="d-none d-xl-block ps-2"> <div class="d-none d-xl-block ps-2">
<div>{{ request.user }}</div> <div>{{ request.user }}</div>
<div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div> <div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div>