(superset) branch master updated: fix(menu): Styling active menu in SPA navigation (#25533)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 86304ab171 fix(menu): Styling active menu in SPA navigation (#25533)
86304ab171 is described below

commit 86304ab17199ef45eef1f471defd025e0b225cfc
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Mon Dec 4 13:03:29 2023 -0800

    fix(menu): Styling active menu in SPA navigation (#25533)
---
 superset-frontend/src/features/home/Menu.tsx | 37 +++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index 56a2fd611e..67b72fc515 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -24,7 +24,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
 import { Row, Col, Grid } from 'src/components';
 import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
 import { Tooltip } from 'src/components/Tooltip';
-import { Link, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { GenericLink } from 'src/components/GenericLink/GenericLink';
 import Icons from 'src/components/Icons';
 import { useUiConfig } from 'src/components/UiConfigContext';
@@ -154,6 +154,29 @@ const globalStyles = (theme: SupersetTheme) => css`
       margin-left: ${theme.gridUnit * 1.75}px;
     }
   }
+  .ant-menu-item-selected {
+    background-color: transparent;
+    &:not(.ant-menu-item-active) {
+      color: inherit;
+      border-bottom-color: transparent;
+      & > a {
+        color: inherit;
+      }
+    }
+  }
+  .ant-menu-horizontal > .ant-menu-item:has(> .is-active) {
+    color: ${theme.colors.primary.base};
+    border-bottom-color: ${theme.colors.primary.base};
+    & > a {
+      color: ${theme.colors.primary.base};
+    }
+  }
+  .ant-menu-vertical > .ant-menu-item:has(> .is-active) {
+    background-color: ${theme.colors.primary.light5};
+    & > a {
+      color: ${theme.colors.primary.base};
+    }
+  }
 `;
 const { SubMenu } = DropdownMenu;
 
@@ -226,9 +249,9 @@ export function Menu({
     if (url && isFrontendRoute) {
       return (
         <DropdownMenu.Item key={label} role="presentation">
-          <Link role="button" to={url}>
+          <NavLink role="button" to={url} activeClassName="is-active">
             {label}
-          </Link>
+          </NavLink>
         </DropdownMenu.Item>
       );
     }
@@ -253,7 +276,13 @@ export function Menu({
             return (
               <DropdownMenu.Item key={`${child.label}`}>
                 {child.isFrontendRoute ? (
-                  <Link to={child.url || ''}>{child.label}</Link>
+                  <NavLink
+                    to={child.url || ''}
+                    exact
+                    activeClassName="is-active"
+                  >
+                    {child.label}
+                  </NavLink>
                 ) : (
                   <a href={child.url}>{child.label}</a>
                 )}