pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu): Styling active menu in SPA navigation (#25533)

Browse Source
This commit is contained in:
JUST.in DO IT 2023-12-04 13:03:29 -08:00 committed by GitHub
parent 0b477e3f7c
commit 86304ab171
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
superset-frontend/src/features/home/Menu.tsx
View File

@ -24,7 +24,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
import { Row, Col, Grid } from 'src/components'; import { Row, Col, Grid } from 'src/components';
import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu'; import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip'; 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 { GenericLink } from 'src/components/GenericLink/GenericLink';
import Icons from 'src/components/Icons'; import Icons from 'src/components/Icons';
import { useUiConfig } from 'src/components/UiConfigContext'; import { useUiConfig } from 'src/components/UiConfigContext';
@ -154,6 +154,29 @@ const globalStyles = (theme: SupersetTheme) => css`
margin-left: ${theme.gridUnit * 1.75}px; 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; const { SubMenu } = DropdownMenu;
@ -226,9 +249,9 @@ export function Menu({
if (url && isFrontendRoute) { if (url && isFrontendRoute) {
return ( return (
<DropdownMenu.Item key={label} role="presentation"> <DropdownMenu.Item key={label} role="presentation">
<Link role="button" to={url}> <NavLink role="button" to={url} activeClassName="is-active">
{label} {label}
</Link> </NavLink>
</DropdownMenu.Item> </DropdownMenu.Item>
); );
} }
@ -253,7 +276,13 @@ export function Menu({
return ( return (
<DropdownMenu.Item key={`${child.label}`}> <DropdownMenu.Item key={`${child.label}`}>
{child.isFrontendRoute ? ( {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> <a href={child.url}>{child.label}</a>
)} )}