diff --git a/superset-frontend/spec/javascripts/components/Menu_spec.jsx b/superset-frontend/spec/javascripts/components/Menu_spec.jsx index b0d9a986bd..103453d33a 100644 --- a/superset-frontend/spec/javascripts/components/Menu_spec.jsx +++ b/superset-frontend/spec/javascripts/components/Menu_spec.jsx @@ -19,6 +19,7 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { Nav } from 'react-bootstrap'; +import { supersetTheme, ThemeProvider } from '@superset-ui/style'; import Menu from 'src/components/Menu/Menu'; @@ -156,7 +157,10 @@ describe('Menu', () => { ...overrideProps, }; - const versionedWrapper = mount(); + const versionedWrapper = mount(, { + wrappingComponent: ThemeProvider, + wrappingComponentProps: { theme: supersetTheme }, + }); expect(versionedWrapper.find('.version-info div')).toHaveLength(2); }); diff --git a/superset-frontend/src/components/Menu/Menu.jsx b/superset-frontend/src/components/Menu/Menu.jsx index ccfd94aad2..0902c8df96 100644 --- a/superset-frontend/src/components/Menu/Menu.jsx +++ b/superset-frontend/src/components/Menu/Menu.jsx @@ -59,6 +59,28 @@ const StyledHeader = styled.header` flex-direction: column; justify-content: center; } + + .navbar-nav > li > a { + &:after { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: ${({ theme }) => theme.colors.primary.base}; + opacity: 0; + transition: opacity ${({ theme }) => theme.transitionTiming * 2}s; + } + + &:hover { + border-bottom: none; + + &:after { + opacity: 1; + } + } + } `; export default function Menu({