mirror of https://github.com/apache/superset.git
fix(menu): Styling active menu in SPA navigation (#25533)
This commit is contained in:
parent
0b477e3f7c
commit
86304ab171
|
@ -24,7 +24,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
|
|||
import { Row, Col, Grid } from 'src/components';
|
||||
import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import { GenericLink } from 'src/components/GenericLink/GenericLink';
|
||||
import Icons from 'src/components/Icons';
|
||||
import { useUiConfig } from 'src/components/UiConfigContext';
|
||||
|
@ -154,6 +154,29 @@ const globalStyles = (theme: SupersetTheme) => css`
|
|||
margin-left: ${theme.gridUnit * 1.75}px;
|
||||
}
|
||||
}
|
||||
.ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
&:not(.ant-menu-item-active) {
|
||||
color: inherit;
|
||||
border-bottom-color: transparent;
|
||||
& > a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item:has(> .is-active) {
|
||||
color: ${theme.colors.primary.base};
|
||||
border-bottom-color: ${theme.colors.primary.base};
|
||||
& > a {
|
||||
color: ${theme.colors.primary.base};
|
||||
}
|
||||
}
|
||||
.ant-menu-vertical > .ant-menu-item:has(> .is-active) {
|
||||
background-color: ${theme.colors.primary.light5};
|
||||
& > a {
|
||||
color: ${theme.colors.primary.base};
|
||||
}
|
||||
}
|
||||
`;
|
||||
const { SubMenu } = DropdownMenu;
|
||||
|
||||
|
@ -226,9 +249,9 @@ export function Menu({
|
|||
if (url && isFrontendRoute) {
|
||||
return (
|
||||
<DropdownMenu.Item key={label} role="presentation">
|
||||
<Link role="button" to={url}>
|
||||
<NavLink role="button" to={url} activeClassName="is-active">
|
||||
{label}
|
||||
</Link>
|
||||
</NavLink>
|
||||
</DropdownMenu.Item>
|
||||
);
|
||||
}
|
||||
|
@ -253,7 +276,13 @@ export function Menu({
|
|||
return (
|
||||
<DropdownMenu.Item key={`${child.label}`}>
|
||||
{child.isFrontendRoute ? (
|
||||
<Link to={child.url || ''}>{child.label}</Link>
|
||||
<NavLink
|
||||
to={child.url || ''}
|
||||
exact
|
||||
activeClassName="is-active"
|
||||
>
|
||||
{child.label}
|
||||
</NavLink>
|
||||
) : (
|
||||
<a href={child.url}>{child.label}</a>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue