fix sidebar classnames

This commit is contained in:
SrGooglo 2023-01-13 19:08:12 +00:00
parent f2f3988da6
commit 9ec7fcb40e

View File

@ -280,87 +280,85 @@ export default class Sidebar extends React.Component {
render() { render() {
if (!this.state.menus) return null if (!this.state.menus) return null
return ( return <div
<div onMouseEnter={this.onMouseEnter}
onMouseEnter={this.onMouseEnter} onMouseLeave={this.handleMouseLeave}
onMouseLeave={this.handleMouseLeave} className={
className={ classnames(
classnames( "app_sidebar",
"app_sidebar", {
{ ["customRender"]: this.state.customRender,
["customRender"]: this.state.customRender, ["floating"]: window.app?.settings.get("sidebar.floating"),
["floating"]: window.app?.settings.get("sidebar.floating"), ["elevated"]: this.state.visible && this.state.elevated,
["collapsed"]: !this.state.customRender && this.state.visible && this.state.collapsed, ["collapsed"]: this.state.visible && this.state.collapsed,
["elevated"]: !this.state.visible && this.state.elevated, ["hidden"]: !this.state.visible,
["hidden"]: !this.state.visible, }
} )
) }
} ref={this.sidebarRef}
ref={this.sidebarRef} >
> {
{ this.state.customRender && <CustomRender
this.state.customRender && <CustomRender customRenderTitle={this.state.customRenderTitle}
customRenderTitle={this.state.customRenderTitle} closeRender={this.closeRender}
closeRender={this.closeRender} sidebarRef={this.sidebarRef}
sidebarRef={this.sidebarRef} >
> {this.state.customRender}
{this.state.customRender} </CustomRender>
</CustomRender> }
}
{ {
!this.state.customRender && <> !this.state.customRender && <>
<div className="app_sidebar_header"> <div className="app_sidebar_header">
<div className={classnames("app_sidebar_header_logo", { ["collapsed"]: this.state.collapsed })}> <div className={classnames("app_sidebar_header_logo", { ["collapsed"]: this.state.collapsed })}>
<img src={this.state.collapsed ? config.logo?.alt : config.logo?.full} /> <img src={this.state.collapsed ? config.logo?.alt : config.logo?.full} />
</div>
</div> </div>
</div>
<div key="menu" className="app_sidebar_menu_wrapper"> <div key="menu" className="app_sidebar_menu_wrapper">
<Menu selectable={true} mode="inline" onClick={this.handleClick}> <Menu selectable={true} mode="inline" onClick={this.handleClick}>
{this.renderMenuItems(this.state.menus)} {this.renderMenuItems(this.state.menus)}
</Menu> </Menu>
</div> </div>
<div key="bottom" className={classnames("app_sidebar_menu_wrapper", "bottom")}> <div key="bottom" className={classnames("app_sidebar_menu_wrapper", "bottom")}>
<Menu selectable={false} mode="inline" onClick={this.handleClick}> <Menu selectable={false} mode="inline" onClick={this.handleClick}>
<Menu.Item key="search" icon={<Icons.Search />} override_event="app.openSearcher" > <Menu.Item key="search" icon={<Icons.Search />} override_event="app.openSearcher" >
<Translation>
{(t) => t("Search")}
</Translation>
</Menu.Item>
<Menu.Item key="create" icon={<Icons.PlusCircle />} override_event="app.openCreator" >
<Translation>
{(t) => t("Create")}
</Translation>
</Menu.Item>
<Menu.Item key="notifications" icon={<Icons.Bell />} override_event="app.openNotifications">
<Translation>
{t => t("Notifications")}
</Translation>
</Menu.Item>
<Menu.Item key="settings" icon={<Icons.Settings />}>
<Translation>
{t => t("Settings")}
</Translation>
</Menu.Item>
{
app.userData && <Menu.Item key="account" className="user_avatar">
<Avatar shape="square" src={app.userData?.avatar} />
</Menu.Item>
}
{
!app.userData && <Menu.Item key="login" icon={<Icons.LogIn />}>
<Translation> <Translation>
{(t) => t("Search")} {t => t("Login")}
</Translation> </Translation>
</Menu.Item> </Menu.Item>
<Menu.Item key="create" icon={<Icons.PlusCircle />} override_event="app.openCreator" > }
<Translation> </Menu>
{(t) => t("Create")} </div>
</Translation> </>
</Menu.Item> }
<Menu.Item key="notifications" icon={<Icons.Bell />} override_event="app.openNotifications"> </div>
<Translation>
{t => t("Notifications")}
</Translation>
</Menu.Item>
<Menu.Item key="settings" icon={<Icons.Settings />}>
<Translation>
{t => t("Settings")}
</Translation>
</Menu.Item>
{
app.userData && <Menu.Item key="account" className="user_avatar">
<Avatar shape="square" src={app.userData?.avatar} />
</Menu.Item>
}
{
!app.userData && <Menu.Item key="login" icon={<Icons.LogIn />}>
<Translation>
{t => t("Login")}
</Translation>
</Menu.Item>
}
</Menu>
</div>
</>
}
</div>
)
} }
} }