pkdotson commented on a change in pull request #14184:
URL: https://github.com/apache/superset/pull/14184#discussion_r625335267



##########
File path: superset-frontend/src/components/Menu/Menu.tsx
##########
@@ -92,16 +105,108 @@ const StyledHeader = styled.header`
     flex-direction: column;
     justify-content: center;
   }
-
-  .nav > li > a {
+  @media (max-width: 767px) {
+    .navbar-brand {
+      float: none;
+    }
+  }
+  .ant-menu-horizontal .ant-menu-item {
+    height: 100%;
+    line-height: inherit;
+  }
+  .ant-menu > .ant-menu-item > a {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
   }
+  @media (max-width: 767px) {
+    .ant-menu > .ant-menu-item > a {
+      padding: 0px;
+    }
+    .main-nav .ant-menu-submenu-title > svg:nth-child(1) {
+      display: none;
+    }
+    .ant-menu-item-active > a {
+      &:hover {
+        color: ${({ theme }) => theme.colors.primary.base} !important;
+        background-color: transparent !important;
+      }
+    }
+  }
   .dropdown-header {
     text-transform: uppercase;
     padding-left: 12px;
   }
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item {
+    margin: 0px;
+    &:hover {
+      border-bottom: none;
+    }
+  }
+  .ant-menu-horizontal > .ant-menu-item,
+  .ant-menu-horizontal > .ant-menu-submenu {
+    vertical-align: inherit;
+    &:hover {
+      color: ${({ theme }) => theme.colors.grayscale.dark1};
+    }
+  }
+  .navbar-right {
+    border: none;
+  }
+  .ant-menu-horizontal {
+    line-height: 51px;
+    border: none;
+    .ant-menu-submenu-open,
+    .ant-menu-submenu-active,
+    .ant-menu-submenu,
+    .ant-menu-submenu-horizontal {
+      color: ${({ theme }) => theme.colors.grayscale.dark1};
+      border-bottom: none;
+    }
 
-  .navbar-inverse .navbar-nav li a {
+    .ant-menu-submenu-open,
+    .ant-menu-submenu-active {
+      background-color: ${({ theme }) => theme.colors.primary.light5};
+      .ant-menu-submenu-title {
+        color: ${({ theme }) => theme.colors.grayscale.dark1};
+        background-color: ${({ theme }) => theme.colors.primary.light5};
+        border-bottom: none;
+        margin: 0;
+        &:after {
+          opacity: 1;
+          width: 99%;

Review comment:
       Yes this needed for the underline for the border to stretch the entire 
length of the menu item on hover. good idea on using calc




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to