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"
/>
This commit is contained in:
Ella E. 2025-01-01 23:50:16 -07:00 committed by GitHub
parent 50ac0a5702
commit e04af92740
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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