use buttons

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

View File

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

View File

@ -1,3 +1,5 @@
@import "theme/vars.less";
.navmenu_wrapper {
position: relative;
}
@ -5,7 +7,7 @@
.__mobile__navmenu_wrapper {
box-sizing: border-box;
position: sticky;
position: relative;
top: 0;
left: 0;
@ -13,9 +15,50 @@
width: 100%;
.card {
width: 100%;
height: @app_topBar_height;
display: flex;
flex-direction: row;
justify-content: space-evenly;
box-shadow: @card-shadow;
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;
}
}
}
}