Skip to content

Commit 43f0518

Browse files
committed
fix(theme): active sidebar nav link styles using aria-current under BackstageSidebar drawer
1 parent 3a3104a commit 43f0518

2 files changed

Lines changed: 14 additions & 0 deletions

File tree

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-theme': patch
3+
---
4+
5+
style the active sidebar nav link (a[aria-current="page"]) so selected colors match the resolved navigation shell

workspaces/theme/plugins/theme/src/utils/createComponents.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,15 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
635635
'& hr': {
636636
backgroundColor: general.sidebarDividerColor,
637637
},
638+
'#rhdh-sidebar-layout & a[aria-current="page"], & a[aria-current="page"]':
639+
{
640+
background: `${sidebarItemInteractionBackgroundColor} !important`,
641+
backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`,
642+
color: `${navigationSelectedColor} !important`,
643+
'& .MuiTypography-root': {
644+
color: 'inherit !important',
645+
},
646+
},
638647
'& [class*="BackstageSidebarItem-selected-"][class*="BackstageSidebarItem-root-"]':
639648
{
640649
backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`,

0 commit comments

Comments
 (0)