css style doesn't work on top menu across all dashboards and charts

[pengpengSir]

Screenshot

Description

css style should be horizontal, but now it turns into vertical. I don't know where I just modified because I am updating superset from 2.0 to 4.0, can you tell me how to solve this , Thanks!

Design input

[describe any input/collaboration you'd like from designers, and tag accordingly. For design review, add the label design:review. If this includes a design proposal, include the label design:suggest]

[dosubot[bot]]

Hey @pengpengSir! 👋 I'm here to help you with any bugs, questions, or contributions you have for the repository. Let's squash those bugs together!

To resolve the issue where the CSS style for the top menu in Superset has changed from horizontal to vertical after updating from version 2.0 to 4.0, you need to ensure that the Menu component's showMenu state is correctly set based on the window width. The showMenu state determines whether the menu is displayed in 'horizontal' or 'inline' (vertical) mode.

The useEffect hook in the Menu component handles this by setting the showMenu state based on the window width. If the window width is less than or equal to 767 pixels, the menu is set to 'inline' (vertical); otherwise, it is set to 'horizontal'.

Here is the relevant part of the code:

useEffect(() => {
  function handleResize() {
    if (window.innerWidth <= 767) {
      setMenu('inline');
    } else setMenu('horizontal');
  }
  handleResize();
  const windowResize = debounce(() => handleResize(), 10);
  window.addEventListener('resize', windowResize);
  return () => window.removeEventListener('resize', windowResize);
}, []);

Additionally, ensure that the Menu component and its styles are correctly implemented. The Menu component in Superset uses Ant Design's Menu component, and the styles are defined using the styled function from @superset-ui/core. Here is an example of how the Menu and its items are styled:

import { styled } from '@superset-ui/core';
import { Menu as AntdMenu } from 'antd';

const MenuItem = styled(AntdMenu.Item)`
  > a {
    text-decoration: none;
  }

  &.ant-menu-item {
    height: ${({ theme }) => theme.gridUnit * 8}px;
    line-height: ${({ theme }) => theme.gridUnit * 8}px;
    a {
      border-bottom: none;
      transition: background-color ${({ theme }) => theme.transitionTiming}s;
      &:after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        width: 0;
        height: 3px;
        opacity: 0;
        transform: translateX(-50%);
        transition: all ${({ theme }) => theme.transitionTiming}s;
        background-color: ${({ theme }) => theme.colors.primary.base};
      }
      &:focus {
        border-bottom: none;
        background-color: transparent;
        @media (max-width: 767px) {
          background-color: ${({ theme }) => theme.colors.primary.light5};
        }
      }
    }
  }

  &.ant-menu-item,
  &.ant-dropdown-menu-item {
    span[role='button'] {
      display: inline-block;
      width: 100%;
    }
    transition-duration: 0s;
  }
`;

const StyledNav = styled(AntdMenu)`
  line-height: 51px;
  border: none;

  & > .ant-menu-item,
  & > .ant-menu-submenu {
    vertical-align: inherit;
    &:hover {
      color: ${({ theme }) => theme.colors.grayscale.dark1};
    }
  }

  &:not(.ant-menu-dark) > .ant-menu-submenu,
  &:not(.ant-menu-dark) > .ant-menu-item {
    &:hover {
      border-bottom: none;
    }
  }

  &: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;
  }
`;

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};
    .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: calc(100% - 1);
      }
    }
  }
  .ant-menu-submenu-title {
    position: relative;
    top: ${({ theme }) => -theme.gridUnit - 3}px;
    &:after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      width: 0;
      height: 3px;
      opacity: 0;
      transform: translateX(-50%);
      transition: all ${({ theme }) => theme.transitionTiming}s;
      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;
    span[role='img'] {
      position: absolute;
      right: ${({ theme }) => -theme.gridUnit + -2}px;
      top: ${({ theme }) => theme.gridUnit * 5.25}px;
      svg {
        font-size: ${({ theme }) => theme.gridUnit * 6}px;
        color: ${({ theme }) => theme.colors.grayscale.base};
      }
    }
    & > span {
      position: relative;
      top: 7px;
    }
    &:hover {
      color: ${({ theme }) => theme.colors.primary.base};
    }
  }
`;

export const Menu = Object.assign(AntdMenu, {
  Item: MenuItem,
});

export const MainNav = Object.assign(StyledNav, {
  Item: MenuItem,
  SubMenu: StyledSubMenu,
  Divider: AntdMenu.Divider,
  ItemGroup: AntdMenu.ItemGroup,
});

Ensure that these styles and the useEffect hook are correctly implemented in your Menu component to maintain the horizontal layout for wider screens and switch to a vertical layout for narrower screens ^[1][2].

To continue talking to Dosu, mention @dosu.

[rusackas]

Sorry, I'm not quite understanding the issue. Are you saying you have some customized CSS that's no longer supported after the upgrade?

[pengpengSir]

@rusackas thanks for your replay! yesterday it works well, however, I try to add this piece of code (as shown in the picture) in superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx, then the top menu turns in to mess.