From e04af92740d4a40e6b72121c155c5178888799e0 Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Wed, 1 Jan 2025 23:50:16 -0700
Subject: [PATCH] UX: Add highlight for active nav in admin secondary sidebar
 (#30486)

This PR makes the secondary sidebar in the admin UI more consistent
navigation experience:

* Added a coloured background for links on hover
* Replaced the bold text and line style with a distinct background
highlight, ensuring it complements the admin sidebar while maintaining
its own identity
* Bringing in arrow indicators to match the active navigation state in
the category settings

### Before
<img width="488" alt="image"
src="https://github.com/user-attachments/assets/aa843766-0ed7-435a-8880-6f0598aa4782"
/>


### After
<img width="475" alt="image"
src="https://github.com/user-attachments/assets/ec31bab9-0f51-4757-ab06-95a961ae17ee"
/>
---
 app/assets/stylesheets/common/admin/admin_base.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 605c17e4bf9..73f547f40bf 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -778,15 +778,18 @@ $mobile-breakpoint: 700px;
 
     a.active {
       color: var(--primary);
-      background-color: initial;
+      background-color: var(--d-sidebar-admin-background);
       font-weight: 700;
-      border-right: 4px solid var(--d-nav-color--active);
 
       &::after {
         display: none; // Hides the arrow
       }
     }
   }
+
+  .admin-site-settings-category-nav__item:hover {
+    background: var(--d-sidebar-highlight-background);
+  }
 }
 
 .admin-detail {