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.

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

@@ -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,

netbox/utilities/templates/navigation/menu.html

@@ -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 %}