RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

use buttons

Browse Source
This commit is contained in:
SrGooglo 2023-06-13 22:54:23 +00:00
parent 8e07edf738
commit 42a03c5f87
2 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/PagePanels/components/NavMenu/index.jsx
View File

@ -34,22 +34,20 @@ const NavMenuMobile = (props) => {
<div className="card"> <div className="card">
{ {
props.items.map((item) => { props.items.map((item) => {
return <div return <antd.Button
key={item.key} key={item.key}
className={classnames( className={classnames(
"item", "item",
item.key === props.activeKey && "active", item.key === props.activeKey && "active",
)} )}
onClick={() => props.onClickItem(item.key)} onClick={() => props.onClickItem(item.key)}
type="ghost"
disabled={item.disabled}
> >
<div className="icon"> <div className="icon">
{item.icon} {item.icon}
</div> </div>
</antd.Button>
<div className="label">
{item.label}
</div>
</div>
}) })
} }
</div> </div>

45
packages/app/src/components/PagePanels/components/NavMenu/index.less
View File

@ -1,3 +1,5 @@
@import "theme/vars.less";
.navmenu_wrapper { .navmenu_wrapper {
position: relative; position: relative;
} }
@ -5,7 +7,7 @@
.__mobile__navmenu_wrapper { .__mobile__navmenu_wrapper {
box-sizing: border-box; box-sizing: border-box;
position: sticky; position: relative;
top: 0; top: 0;
left: 0; left: 0;
@ -13,9 +15,50 @@
width: 100%; width: 100%;
.card { .card {
width: 100%;
height: @app_topBar_height;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly;
box-shadow: @card-shadow;
gap: 10px; gap: 10px;
padding: 5px;
border-radius: 12px;
isolation: unset;
overflow: visible;
.item {
display: flex;
flex-direction: column;
align-items: center;
height: fit-content;
gap: 4px;
padding: 8px 10px;
&.active {
color: var(--colorPrimary);
}
.icon {
margin: 0;
line-height: 1rem;
font-size: 1.5rem;
}
.label {
height: fit-content;
line-height: 1rem;
font-size: 0.8rem;
}
}
} }
} }