-
Notifications
You must be signed in to change notification settings - Fork 13.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(menu): Styling active menu in SPA navigation #25533
fix(menu): Styling active menu in SPA navigation #25533
Conversation
Hi @michael-s-molina @john-bodley @craig-rueda! Can you approve this PR? |
@@ -154,6 +154,29 @@ const globalStyles = (theme: SupersetTheme) => css` | |||
margin-left: ${theme.gridUnit * 1.75}px; | |||
} | |||
} | |||
.ant-menu-item-selected { | |||
background-color: transparent !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to avoid !important
here? Maybe using a more specific class?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@michael-s-molina I just removed all these redundant !important
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
(cherry picked from commit 86304ab)
(cherry picked from commit 86304ab)
SUMMARY
Fixes the addressed issue (no. 2) on #25151 (comment)
This commit replaces Link with NavLink to fix outdated highlighted menu. This commit replaces the ant-menu-item-selected style by NavLink active style to sync the router active link status.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
before--navlink.mov
After:
after--navlink.mov
TESTING INSTRUCTIONS
Click Chart (or Dashboard) link
Click Query History menu under the SQL Link
Navigate back by the browser button
See the highlighted menu on the header
ADDITIONAL INFORMATION