From 6fde7f8984e88e61949ef9f447616139742be1be Mon Sep 17 00:00:00 2001
From: Moriah Kreeger <moar.riah@gmail.com>
Date: Thu, 23 Jul 2020 12:49:28 -0700
Subject: [PATCH] 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
---
 .../spec/javascripts/components/Menu_spec.jsx |  6 ++++-
 .../src/components/Menu/Menu.jsx              | 22 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

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(<Menu {...props} />);
+    const versionedWrapper = mount(<Menu {...props} />, {
+      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({