RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(navigation): Improve sidebar action button styling 

Replace the grouped button wrapper with a semantic
`dropdown-item-buttons` container and render sidebar action buttons with
the `btn-ghost` style while preserving existing color support.

Scope dropdown item link styles to direct child anchors so nested action
buttons keep their intended styling, and reveal the buttons on hover,
active, and focus-within states.
This commit is contained in:
Martin Hauser 2026-06-30 13:20:03 +02:00 committed by Jeremy Stretch
parent b86145fe54
commit f027b0b206
3 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.css vendored
View File

File diff suppressed because one or more lines are too long

13
netbox/project-static/styles/transitional/_navigation.scss
View File

@ -21,21 +21,22 @@
.dropdown-menu {
// Adjust hover color & style for menu items
.dropdown-item {
a {
> a {
color: $rich-black;
}
.btn-group {
.dropdown-item-buttons {
visibility: hidden;
}
// Style menu item hover/active state
&:hover,
&.active {
&.active,
&:focus-within {
background-color: var(--tblr-navbar-active-bg);
a {
> a {
text-decoration: none;
}
.btn-group {
.dropdown-item-buttons {
visibility: visible;
}
}
@ -106,7 +107,7 @@ html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg {
// Adjust hover color & style for menu items
.dropdown-item {
a {
> a {
color: white !important;
}
&.active,

6
netbox/utilities/templates/navigation/menu.html
View File

@ -40,12 +40,12 @@
{{ group.label }}
</div>
{% for item, buttons in items %}
<div class="dropdown-item d-flex justify-content-between ps-3 py-0">
<div class="dropdown-item d-flex align-items-center justify-content-between ps-3 py-0">
<a href="{{ item.url }}" class="d-inline-flex flex-fill py-1">{{ item.link_text }}</a>
{% if buttons %}
<div class="btn-group ms-1">
<div class="dropdown-item-buttons d-inline-flex ms-1">
{% for button in buttons %}
<a href="{{ button.url }}" class="btn btn-sm btn-{{ button.color|default:"outline" }} lh-2 px-2" title="{{ button.title }}" aria-label="{{ button.title }}">
<a href="{{ button.url }}" class="btn btn-sm btn-ghost btn-{{ button.color|default:"secondary" }} px-2" title="{{ button.title }}" aria-label="{{ button.title }}">
<i class="{{ button.icon_class }}" aria-hidden="true"></i>
</a>
{% endfor %}