fix: nav submenu dropdown styles (apache#14580)

* fix nav submenu dropdown styles * lint * fix mobile view styles * run lint * address comments * undo comit lock files * Update superset-frontend/src/common/components/index.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> (cherry picked from commit 3ad8b54)
preset-io · May 18, 2021 · 15126ef · 15126ef
1 parent d99d173
commit 15126ef
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 32 deletions.
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -123,18 +123,29 @@ export const StyledNav = styled(AntdMenu)`
       color: ${({ theme }) => theme.colors.grayscale.dark1};
     }
   }
+
   &:not(.ant-menu-dark) > .ant-menu-submenu,
   &:not(.ant-menu-dark) > .ant-menu-item {
-    margin: 0px;
     &:hover {
       border-bottom: none;
     }
   }
 
+  @media (min-width: 767px) {
+    &:not(.ant-menu-dark) > .ant-menu-submenu,
+    &:not(.ant-menu-dark) > .ant-menu-item {
+      margin: 0px;
+    }
+  }
+
   & > .ant-menu-item > a {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
   }
+`;
 
+export const StyledSubMenu = styled(AntdMenu.SubMenu)`
+  color: ${({ theme }) => theme.colors.grayscale.dark1};
+  border-bottom: none;
   .ant-menu-submenu-open,
   .ant-menu-submenu-active {
     background-color: ${({ theme }) => theme.colors.primary.light5};
@@ -149,12 +160,9 @@ export const StyledNav = styled(AntdMenu)`
       }
     }
   }
-`;
-
-export const StyledSubMenu = styled(AntdMenu.SubMenu)`
-  color: ${({ theme }) => theme.colors.grayscale.dark1};
-  border-bottom: none;
   .ant-menu-submenu-title {
+    position: relative;
+    top: ${({ theme }) => -theme.gridUnit - 3}px;
     &:after {
       content: '';
       position: absolute;
@@ -168,17 +176,24 @@ export const StyledSubMenu = styled(AntdMenu.SubMenu)`
       background-color: ${({ theme }) => theme.colors.primary.base};
     }
   }
+  .ant-menu-submenu-arrow {
+    top: 67%;
+  }
   & > .ant-menu-submenu-title {
     padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
       ${({ theme }) => theme.gridUnit * 3}px !important;
     svg {
       position: absolute;
-      top: ${({ theme }) => theme.gridUnit * 4}px;
+      top: ${({ theme }) => theme.gridUnit * 4 + 7}px;
       right: ${({ theme }) => theme.gridUnit}px;
       width: ${({ theme }) => theme.gridUnit * 6}px;
     }
+    & > span {
+      position: relative;
+      top: 7px;
+    }
     &:hover {
-      color: ${({ theme }) => theme.colors.grayscale.dark1};
+      color: ${({ theme }) => theme.colors.primary.base};
     }
   }
 `;

diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx
@@ -17,8 +17,9 @@
  * under the License.
  */
 import React, { useState, useEffect } from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, css } from '@superset-ui/core';
 import { debounce } from 'lodash';
+import { Global } from '@emotion/react';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { MainNav as DropdownMenu, MenuMode } from 'src/common/components';
 import { Link } from 'react-router-dom';
@@ -98,10 +99,14 @@ const StyledHeader = styled.header`
     height: 100%;
     line-height: inherit;
   }
-  /*.ant-menu > .ant-menu-item > a {
+  .ant-menu > .ant-menu-item > a {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
-  }*/
+  }
   @media (max-width: 767px) {
+    .ant-menu-item {
+      padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
+        ${({ theme }) => theme.gridUnit * 3}px !important;
+    }
     .ant-menu > .ant-menu-item > a {
       padding: 0px;
     }
@@ -200,6 +205,16 @@ export function Menu({
   };
   return (
     <StyledHeader className="top" id="main-menu" role="navigation">
+      <Global
+        styles={css`
+          .ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {
+            border-radius: 0px;
+          }
+          .ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light {
+            border-radius: 0px;
+          }
+        `}
+      />
       <Row>
         <Col lg={19} md={19} sm={24} xs={24}>
           <a className="navbar-brand" href={brand.path}>

diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less
@@ -582,24 +582,3 @@ hr {
   background-image: url('../images/icons/error_solid_small_red.svg') !important;
   background-position: -2px center !important;
 }
-
-// AntD overrides since these are injected as inline styles and can't
-// be overriden in emotion
-.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {
-  top: 51px !important;
-  margin-left: -2px !important;
-  @media (max-width: 767px) {
-    top: 269px !important;
-  }
-  & > .ant-menu {
-    border-radius: 0px !important;
-  }
-}
-
-.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light {
-  top: 51px !important;
-  border-radius: 0px !important;
-  @media (max-width: 767px) {
-    top: 269px !important;
-  }
-}