dosubot[bot] commented on issue #29826:
URL: https://github.com/apache/superset/issues/29826#issuecomment-2262848405
<!-- Greeting -->
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!
<!-- Answer -->
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:
```tsx
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:
```tsx
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
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/features/home/Menu.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/Menu/index.tsx)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
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.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
