You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ms...@apache.org on 2026/03/18 23:27:58 UTC
(superset) branch msyavuz/fix/main-nav-small-screens created (now 09c6ce52d35)
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a change to branch msyavuz/fix/main-nav-small-screens
in repository https://gitbox.apache.org/repos/asf/superset.git
at 09c6ce52d35 fix(MainNav): display all menu items on smaller screens
This branch includes the following new commits:
new 09c6ce52d35 fix(MainNav): display all menu items on smaller screens
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: fix(MainNav): display all menu items on smaller screens
Posted by ms...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch msyavuz/fix/main-nav-small-screens
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 09c6ce52d357c4e883866b88c592fbbd427558e0
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Thu Mar 19 02:27:32 2026 +0300
fix(MainNav): display all menu items on smaller screens
---
.../superset-ui-core/src/components/Menu/index.tsx | 52 +++++++++++++---------
superset-frontend/src/features/home/Menu.tsx | 4 +-
2 files changed, 34 insertions(+), 22 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx
index 6357471d19d..036dc4676ad 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx
@@ -84,35 +84,45 @@ const StyledMenu = styled(AntdMenu)`
const StyledNav = styled(AntdMenu)`
${({ theme }) => css`
- display: flex;
- align-items: center;
- height: 100%;
- gap: 0;
border-bottom: 0;
line-height: ${theme.lineHeight};
- &.ant-menu-horizontal > .ant-menu-item {
- height: 100%;
+
+ &.ant-menu-horizontal {
display: flex;
align-items: center;
- margin: 0;
- padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- ::after {
- content: '';
- position: absolute;
- width: 98%;
- height: 2px;
- background-color: ${theme.colorPrimaryBorderHover};
- bottom: ${theme.sizeUnit / 4}px;
- left: 0;
- transform: scale(0);
- transition: 0.2s all ease-out;
+ height: 100%;
+ gap: 0;
+
+ > .ant-menu-item {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin: 0;
+ padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
+ ::after {
+ content: '';
+ position: absolute;
+ width: 98%;
+ height: 2px;
+ background-color: ${theme.colorPrimaryBorderHover};
+ bottom: ${theme.sizeUnit / 4}px;
+ left: 0;
+ transform: scale(0);
+ transition: 0.2s all ease-out;
+ }
+ :hover::after {
+ transform: scale(1);
+ }
}
- :hover::after {
+
+ > .ant-menu-item-selected::after {
transform: scale(1);
}
}
- &.ant-menu-horizontal > .ant-menu-item-selected::after {
- transform: scale(1);
+
+ &.ant-menu-vertical {
+ border-inline-end: none;
+ width: 100%;
}
`}
`;
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index b7eacb65cf4..04c4efb6a13 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -141,6 +141,7 @@ const StyledMainNav = styled(MainNav)`
.ant-menu-submenu-selected.ant-menu-submenu-horizontal::after {
transform: scale(1);
}
+
`}
`;
@@ -176,6 +177,7 @@ const StyledCol = styled(Col)`
${({ theme }) => css`
display: flex;
gap: ${theme.sizeUnit * 4}px;
+ flex-wrap: wrap;
`}
`;
@@ -348,7 +350,7 @@ export function Menu({
</StyledBrandText>
)}
<StyledMainNav
- mode="horizontal"
+ mode={screens.md ? 'horizontal' : 'vertical'}
data-test="navbar-top"
className="main-nav"
selectedKeys={activeTabs}