style: add fade transition to bottom border on navbar menu items (#10402)

* Add fade transition to bottom border on navbar menu items

* lint fix

* use theme variables

* fix spec

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(<Menu {...props} />);
+    const versionedWrapper = mount(<Menu {...props} />, {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: { theme: supersetTheme },
+    });
 
     expect(versionedWrapper.find('.version-info div')).toHaveLength(2);
   });

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({