Skip to content

[Feat]: extend nav item styles + fix publish mode space #2087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamfaran wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

[Feat]: extend nav item styles + fix publish mode space #2087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8086c26
[Feat]: extend nav item styles
iamfaran Nov 27, 2025
c3b5329
[Fix]: #2086 nav desktop app layout in publish mode
iamfaran Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,11 @@ const DrawerList = styled.div<{
gap: 8px;
background-color: ${(p) => p.$itemStyle.background};
color: ${(p) => p.$itemStyle.text};
font-size: ${(p) => p.$itemStyle.textSize};
font-family: ${(p) => p.$itemStyle.fontFamily};
font-style: ${(p) => p.$itemStyle.fontStyle};
font-weight: ${(p) => p.$itemStyle.textWeight};
text-decoration: ${(p) => p.$itemStyle.textDecoration};
border-radius: ${(p) => p.$itemStyle.radius};
border: 1px solid ${(p) => p.$itemStyle.border};
margin: ${(p) => p.$itemStyle.margin};
Expand All @@ -194,11 +199,21 @@ const DrawerList = styled.div<{
background-color: ${(p) => p.$hoverStyle.background};
color: ${(p) => p.$hoverStyle.text};
border: 1px solid ${(p) => p.$hoverStyle.border};
font-size: ${(p) => p.$hoverStyle.textSize || p.$itemStyle.textSize};
font-family: ${(p) => p.$hoverStyle.fontFamily || p.$itemStyle.fontFamily};
font-style: ${(p) => p.$hoverStyle.fontStyle || p.$itemStyle.fontStyle};
font-weight: ${(p) => p.$hoverStyle.textWeight || p.$itemStyle.textWeight};
text-decoration: ${(p) => p.$hoverStyle.textDecoration || p.$itemStyle.textDecoration};
}
.drawer-item.active {
background-color: ${(p) => p.$activeStyle.background};
color: ${(p) => p.$activeStyle.text};
border: 1px solid ${(p) => p.$activeStyle.border};
font-size: ${(p) => p.$activeStyle.textSize || p.$itemStyle.textSize};
font-family: ${(p) => p.$activeStyle.fontFamily || p.$itemStyle.fontFamily};
font-style: ${(p) => p.$activeStyle.fontStyle || p.$itemStyle.fontStyle};
font-weight: ${(p) => p.$activeStyle.textWeight || p.$itemStyle.textWeight};
text-decoration: ${(p) => p.$activeStyle.textDecoration || p.$itemStyle.textDecoration};
}
`;

Expand Down Expand Up @@ -260,16 +275,37 @@ const StyledTabBar = styled(TabBar)<{
.adm-tab-bar-item {
background-color: ${(props) => props.$tabItemStyle?.background};
color: ${(props) => props.$tabItemStyle?.text};
font-size: ${(props) => props.$tabItemStyle?.textSize};
font-family: ${(props) => props.$tabItemStyle?.fontFamily};
font-style: ${(props) => props.$tabItemStyle?.fontStyle};
font-weight: ${(props) => props.$tabItemStyle?.textWeight};
text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
border-radius: ${(props) => props.$tabItemStyle?.radius} !important;
border: ${(props) => `1px solid ${props.$tabItemStyle?.border}`};
margin: ${(props) => props.$tabItemStyle?.margin};
padding: ${(props) => props.$tabItemStyle?.padding};

.adm-tab-bar-item-title {
font-size: ${(props) => props.$tabItemStyle?.textSize};
font-family: ${(props) => props.$tabItemStyle?.fontFamily};
font-style: ${(props) => props.$tabItemStyle?.fontStyle};
font-weight: ${(props) => props.$tabItemStyle?.textWeight};
text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
}
}

.adm-tab-bar-item:hover {
background-color: ${(props) => props.$tabItemHoverStyle?.background} !important;
color: ${(props) => props.$tabItemHoverStyle?.text} !important;
border: ${(props) => `1px solid ${props.$tabItemHoverStyle?.border}`};

.adm-tab-bar-item-title {
font-size: ${(props) => props.$tabItemHoverStyle?.textSize || props.$tabItemStyle?.textSize};
font-family: ${(props) => props.$tabItemHoverStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
font-style: ${(props) => props.$tabItemHoverStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
font-weight: ${(props) => props.$tabItemHoverStyle?.textWeight || props.$tabItemStyle?.textWeight};
text-decoration: ${(props) => props.$tabItemHoverStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
}
}

.adm-tab-bar-item.adm-tab-bar-item-active {
Expand All @@ -278,6 +314,13 @@ const StyledTabBar = styled(TabBar)<{
.adm-tab-bar-item-icon, .adm-tab-bar-item-title {
color: ${(props) => props.$tabItemActiveStyle.text};
}
.adm-tab-bar-item-title {
font-size: ${(props) => props.$tabItemActiveStyle?.textSize || props.$tabItemStyle?.textSize};
font-family: ${(props) => props.$tabItemActiveStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
font-style: ${(props) => props.$tabItemActiveStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
font-weight: ${(props) => props.$tabItemActiveStyle?.textWeight || props.$tabItemStyle?.textWeight};
text-decoration: ${(props) => props.$tabItemActiveStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
}
}
`;

Expand Down
58 changes: 51 additions & 7 deletions client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ const DEFAULT_WIDTH = 240;
type MenuItemStyleOptionValue = "normal" | "hover" | "active";
const EventOptions = [clickEvent] as const;

const StyledSide = styled(LayoutSider)`
max-height: calc(100vh - ${TopHeaderHeight});
const StyledSide = styled(LayoutSider)<{ $isPreview: boolean }>`
max-height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
overflow: auto;

.ant-menu-item:first-child {
Expand Down Expand Up @@ -87,18 +87,42 @@ const StyledMenu = styled(AntdMenu)<{
border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
margin: ${(props) => props.$navItemStyle?.margin};
padding: ${(props) => props.$navItemStyle?.padding};
}

.ant-menu-title-content {
font-size: ${(props) => props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
}

.ant-menu-item-active {
background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
color: ${(props) => props.$navItemHoverStyle?.text} !important;
border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};

.ant-menu-title-content {
font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
}
}

.ant-menu-item-selected {
background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
color: ${(props) => props.$navItemActiveStyle?.text} !important;
border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};

.ant-menu-title-content {
font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
}
}

.ant-menu-submenu {
Expand All @@ -112,11 +136,15 @@ const StyledMenu = styled(AntdMenu)<{
max-height: 100%;
background-color: ${(props) => props.$navItemStyle?.background};
color: ${(props) => props.$navItemStyle?.text};
font-size: ${(props) => props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
border-radius: ${(props) => props.$navItemStyle?.radius} !important;
border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
margin: 0;
padding: ${(props) => props.$navItemStyle?.padding};

}

.ant-menu-item {
Expand All @@ -129,6 +157,11 @@ const StyledMenu = styled(AntdMenu)<{
background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
color: ${(props) => props.$navItemHoverStyle?.text} !important;
border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};
font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
}
}
&.ant-menu-submenu-selected {
Expand All @@ -137,6 +170,11 @@ const StyledMenu = styled(AntdMenu)<{
background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
color: ${(props) => props.$navItemActiveStyle?.text} !important;
border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};
font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
}
}
}
Expand All @@ -161,6 +199,11 @@ const StyledMenu = styled(AntdMenu)<{

`;


const ViewerMainContent = styled(MainContent)<{ $isPreview: boolean }>`
height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
`;

const StyledImage = styled.img`
height: 1em;
color: currentColor;
Expand Down Expand Up @@ -317,6 +360,7 @@ let NavTmpLayout = (function () {
NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
const pathParam = useAppPathParam();
const isViewMode = isUserViewMode(pathParam);
const isPreview = pathParam.viewMode === "preview";
const [selectedKey, setSelectedKey] = useState("");
const items = comp.children.items.getView();
const navWidth = comp.children.width.getView();
Expand Down Expand Up @@ -636,25 +680,25 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
);

let content = (
<Layout>
<Layout style={{ height: isPreview ? undefined : "100vh" }}>
{(navPosition === 'top') && (
<Header style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
{ navMenu }
</Header>
)}
{(navPosition === 'left') && (
<StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
<StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
{navMenu}
</StyledSide>
)}
<MainContent>{pageView}</MainContent>
<ViewerMainContent $isPreview={isPreview}>{pageView}</ViewerMainContent>
{(navPosition === 'bottom') && (
<Footer style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
{ navMenu }
</Footer>
)}
{(navPosition === 'right') && (
<StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
<StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
{navMenu}
</StyledSide>
)}
Expand Down
Loading
Loading