@ant-design/icons#LogoutOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#LogoutOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From mixbox with GNU General Public License v3.0 | 6 votes |
|
render() {
const user = getLoginUser() || {};
const name = user.name;
const { className, theme } = this.props;
const menu = (
<Menu styleName="menu" theme={theme} selectedKeys={[]} onClick={this.handleMenuClick}>
<Item key="modifyPassword"><EditOutlined />修改密码</Item>
<Item><Link to="/settings"><SettingOutlined />设置</Link></Item>
<Menu.Divider />
<Item key="logout"><LogoutOutlined />退出登录</Item>
</Menu>
);
return (
<div styleName="user-menu" ref={node => this.userMenu = node}>
<Dropdown trigger="click" overlay={menu} getPopupContainer={() => (this.userMenu || document.body)}>
<span styleName="account" className={className}>
<span styleName="user-name">{name}</span>
<CaretDownOutlined />
</span>
</Dropdown>
<ModifyPassword
visible={this.state.passwordVisible}
onOk={() => this.setState({ passwordVisible: false })}
onCancel={() => this.setState({ passwordVisible: false })}
/>
</div>
);
}
Example #2
| Source File: AvatarDropdown.jsx From vpp with MIT License | 5 votes |
|
render() {
const {
currentUser = {
avatar: '',
name: '',
},
menu,
} = this.props;
const menuHeaderDropdown = (
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
{menu && (
<Menu.Item key="center">
<UserOutlined />
个人中心
</Menu.Item>
)}
{menu && (
<Menu.Item key="settings">
<SettingOutlined />
个人设置
</Menu.Item>
)}
{menu && <Menu.Divider />}
<Menu.Item key="logout">
<LogoutOutlined />
退出登录
</Menu.Item>
</Menu>
);
return currentUser && currentUser.name ? (
<HeaderDropdown overlay={menuHeaderDropdown}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
{/*<span className={`${styles.name} anticon`}>{currentUser.name}</span>*/}
</span>
</HeaderDropdown>
) : (
<span className={`${styles.action} ${styles.account}`}>
<Spin
size="small"
style={{
marginLeft: 8,
marginRight: 8,
}}
/>
</span>
);
}
Example #3
| Source File: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function HeaderContent() {
const dispatch = useDispatch();
const { SubMenu } = Menu;
const profileDropdown = (
<div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
<div className="pad15">
<Avatar size="large" className="last" src={photo} style={{ float: 'left' }} />
<div className="info">
<p className="strong">Salah Eddine Lalami</p>
<p>[email protected]</p>
</div>
</div>
<div className="line"></div>
<div>
<Menu>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>
<div className="line"></div>
<div>
<Menu>
<Menu.Item
icon={<LogoutOutlined />}
key={`${uniqueId()}`}
onClick={() => history.push('/logout')}
>
logout
</Menu.Item>
</Menu>
</div>
</div>
);
return (
<div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
<Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
{/* <Badge dot> */}
<Avatar className="last" src={photo} />
{/* </Badge> */}
</Dropdown>
<Avatar icon={<AppstoreOutlined />} />
<Avatar icon={<BellOutlined />} />
</div>
);
}
Example #4
| Source File: Index.js From credit with Apache License 2.0 | 5 votes |
|
render() {
const handleMenu = (p)=>{
if(p.key === 'logout') {
clearToken();
this.props.history.push('/login');
} else {
message.info(p.key);
}
}
const menu = (
<Menu onClick={handleMenu}>
<Menu.Item key="msg">
消息
</Menu.Item>
<Menu.Item key="setting">
设置
</Menu.Item>
<Menu.Item key="logout">
<LogoutOutlined />退出
</Menu.Item>
</Menu>
);
return (
<Layout>
<Header className="header">
<div className="logo">区块链信用模型共享及认证系统</div>
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="/#" onClick={e => { e.preventDefault() }}>
<Avatar style={{ backgroundColor: '#f56a00' }}>U</Avatar><DownOutlined />
</a>
</Dropdown>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
{routes.map(route => {
return <Menu.Item key={route.path} onClick={p => this.props.history.push(p.key)}>
<Icon component={route.icon}></Icon>
{route.title}
</Menu.Item>
})}
</Menu>
</Sider>
<Layout style={{ padding: '16px' }}>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}}
>
{this.props.children}
</Content>
</Layout>
</Layout>
</Layout>
)
}
Example #5
| Source File: Protected.jsx From reactjs-functions with MIT License | 5 votes |
|
Protected =({ component: Component, Logout, auth, ...rest }) => {
let history = useHistory()
const logout = errorInfo => {
Logout().then(message => {
history.replace('/')
auth.loggedIn = false;
})
};
return(
<Route {...rest}
render={props =>
auth.loggedIn ? (
<div>
<Header>
<Menu theme="dark" mode="horizontal" >
<Menu.Item key="1" icon={<UserOutlined />}>
<Link to="/list">Entry List</Link>
</Menu.Item>
<Menu.Item key="2" icon={<BarChartOutlined />}>
<Link to="/statistics">Statistics</Link>
</Menu.Item>
<Menu.Item key="3" icon={<SettingOutlined />}>
<Link to="/settings">Change Password</Link>
</Menu.Item>
<Menu.Item key="4" icon={<LogoutOutlined />} onClick={logout}>
Logout
</Menu.Item>
</Menu>
</Header>
<Content style={{ marginTop: "100px", marginBottom: "100px" }}>
<Row justify="space-around">
<Col span={20} style={{ textAlign: "center" }}>
<Component {...props} />
</Col>
</Row>
</Content>
</div>
) : (
<Redirect to={{ pathname: "/", state: { from: props.location } }} />
)
}
/>
);
}
Example #6
| Source File: AvatarDropdown.jsx From the-eye-knows-the-garbage with MIT License | 5 votes |
|
render() {
const {
currentUser = {
avatar: '',
name: '',
},
menu,
} = this.props;
const menuHeaderDropdown = (
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
{menu && (
<Menu.Item key="center">
<UserOutlined />
个人中心
</Menu.Item>
)}
{menu && (
<Menu.Item key="settings">
<SettingOutlined />
个人设置
</Menu.Item>
)}
{menu && <Menu.Divider />}
<Menu.Item key="change_password">
<SettingOutlined />
修改密码
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout">
<LogoutOutlined />
退出登录
</Menu.Item>
</Menu>
);
return currentUser && currentUser.name ? (
<HeaderDropdown overlay={menuHeaderDropdown}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
<span className={`${styles.name} anticon`}>{currentUser.name}</span>
</span>
</HeaderDropdown>
) : (
<span className={`${styles.action} ${styles.account}`}>
<Spin
size="small"
style={{
marginLeft: 8,
marginRight: 8,
}}
/>
</span>
);
}
Example #7
| Source File: AvatarDropdown.jsx From prometheusPro with MIT License | 5 votes |
|
render() {
const {
currentUser = {
avatar: '',
name: '',
},
menu,
} = this.props;
const menuHeaderDropdown = (
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
{menu && (
<Menu.Item key="center">
<UserOutlined />
个人中心
</Menu.Item>
)}
{menu && (
<Menu.Item key="settings">
<SettingOutlined />
个人设置
</Menu.Item>
)}
{menu && <Menu.Divider />}
<Menu.Item key="logout">
<LogoutOutlined />
退出登录
</Menu.Item>
</Menu>
);
return currentUser && currentUser.name ? (
<HeaderDropdown overlay={menuHeaderDropdown}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
<span className={styles.name}>{currentUser.name}</span>
</span>
</HeaderDropdown>
) : (
<Spin
size="small"
style={{
marginLeft: 8,
marginRight: 8,
}}
/>
);
}
Example #8
| Source File: App.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<div style={{ position: "fixed" }}>
<Transition
items={this.state.logined}
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}
>
{(styles, item) => {
if (item && !this.state.loading) {
return (
<animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
<Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Sider
className={this.state.mobileBreakpoint ? "mobileSider" : ""}
breakpoint="md"
collapsedWidth={0}
onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
>
<div className="overflow-handle">
<div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
<img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
</div>
<Dropdown overlay={
<Menu>
{this.state.team != "teams-disabled" && this.state.team != "loading" && (
<div>
<Menu.Item key="Team">
<NavLink to="/Team">
<span>
<b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
<br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
</span>
<TeamOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
</div>
)}
<Menu.Item key="Profile">
<NavLink to="/Profile">
<span>Profile </span>
<UserOutlined />
</NavLink>
</Menu.Item>
<Menu.Item key="Settings">
<NavLink to="/Settings">
<span>Settings </span>
<SettingOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout" onClick={() => {
confirm({
title: 'Are you sure you want to logout?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.handleLogout(); close(); },
onCancel: () => { },
});
}}>
<span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
</Menu.Item>
</Menu>}
trigger={['click']}>
<div className="buttonHover"
style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
<h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
<Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
</div>
<div>
<h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
</div>
</div>
</Dropdown>
<Menu
selectedKeys={[this.state.current]}
onSelect={(selection) => { this.setState({ current: selection.key }) }}
mode="inline"
theme="dark"
> {/*
defaultSelectedKeys - default selected menu items
defaultOpenKeys - default opened sub menus
inline - Sidebar Menu
*/}
<Menu.Item key="" className="menu-item">
<NavLink to="/">
<HomeTwoTone className="menu-item-icon" />
<span>Home</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Challenges" className="menu-item">
<NavLink to="/Challenges">
<FlagTwoTone className="menu-item-icon" />
<span>Challenges</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Scoreboard" className="menu-item">
<NavLink to="/Scoreboard">
<FundTwoTone className="menu-item-icon" />
<span>Scoreboard</span>
</NavLink>
</Menu.Item>
<Menu.Divider />
{this.state.permissions === 1 && (
<Menu.Item key="CreateChallenge" className="menu-item">
<NavLink to="/CreateChallenge">
<PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
<span>Create Challenge</span>
</NavLink>
</Menu.Item>
)}
{this.state.permissions === 2 && (
<Menu.Item key="Admin" className="menu-item">
<NavLink to="/Admin">
<CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
<span>Admin Panel</span>
</NavLink>
</Menu.Item>
)}
</Menu>
<div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
<p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
</div>
</div>
</Sider>
<Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
<Route
render={({ location, ...rest }) => (
<Transition
native
items={location.pathname.split("/")[1]}
trail={5}
key={location.pathname.split("/")[1]}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}>
{(style, loc) => (
<animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} transition={style} />} />
<Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
<Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />
<Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
<Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
<Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
<Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
{this.state.permissions >= 1 ? (
<Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
)}
{this.state.permissions === 2 ? (
<Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
)}
<Route path='/*' render={(props) => <Oops {...props} transition={style} />} />
</Switch>
</Suspense>
</animated.div>
)}
</Transition>
)}
/>
</Content>
</Layout>
</animated.div>
)
}
else {
if (!this.state.loading && !item && !this.state.token) {
return (
<animated.div style={{ ...styles, position: "absolute" }}>
<Suspense fallback={<div className="loading-style">
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Login handleLogin={this.handleLogin.bind(this)}></Login>
</Suspense>
</animated.div>)
}
else {
return (
<animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>
)
}
}
}
}
</Transition>
</div >
);
}
Example #9
| Source File: App.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const menu = (
<Menu>
<Menu.Item>
<Link to={'/info'}>
<SolutionOutlined/> 个人中心
</Link>
</Menu.Item>
<Menu.Divider/>
<Menu.Item>
<Popconfirm
key='login-btn-pop'
title="您确定要退出登录吗?"
onConfirm={this.confirm}
okText="确定"
cancelText="取消"
placement="left"
>
<LogoutOutlined/> 退出登录
</Popconfirm>
</Menu.Item>
</Menu>
);
return (
<Switch>
<Route path="/access" component={Access}/>
<Route path="/term" component={Term}/>
<Route path="/login"><Login updateUser={this.updateUser}/></Route>
<Route path="/">
<Layout className="layout" style={{minHeight: '100vh'}}>
{
isAdmin() ?
<>
<Sider collapsible collapsed={this.state.collapsed} trigger={null}>
<div className="logo">
<img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
</div>
<Menu
onClick={(e) => this.setCurrent(e.key)}
selectedKeys={[this.state.current]}
onOpenChange={this.subMenuChange}
defaultOpenKeys={this.state.openKeys}
theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
inlineCollapsed={this.state.collapsed}
style={{lineHeight: '64px'}}>
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
<Link to={'/'}>
控制面板
</Link>
</Menu.Item>
<SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
<Menu.Item key="asset" icon={<DesktopOutlined/>}>
<Link to={'/asset'}>
资产列表
</Link>
</Menu.Item>
<Menu.Item key="credential" icon={<IdcardOutlined/>}>
<Link to={'/credential'}>
授权凭证
</Link>
</Menu.Item>
<Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
<Link to={'/dynamic-command'}>
动态指令
</Link>
</Menu.Item>
<Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
<Link to={'/access-gateway'}>
接入网关
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
<Menu.Item key="online-session" icon={<LinkOutlined/>}>
<Link to={'/online-session'}>
在线会话
</Link>
</Menu.Item>
<Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
<Link to={'/offline-session'}>
历史会话
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
<Menu.Item key="login-log" icon={<LoginOutlined/>}>
<Link to={'/login-log'}>
登录日志
</Link>
</Menu.Item>
<Menu.Item key="job" icon={<BlockOutlined/>}>
<Link to={'/job'}>
计划任务
</Link>
</Menu.Item>
<Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
<Link to={'/access-security'}>
访问安全
</Link>
</Menu.Item>
<Menu.Item key="storage" icon={<HddOutlined/>}>
<Link to={'/storage'}>
磁盘空间
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
<Menu.Item key="user" icon={<UserOutlined/>}>
<Link to={'/user'}>
用户管理
</Link>
</Menu.Item>
<Menu.Item key="user-group" icon={<TeamOutlined/>}>
<Link to={'/user-group'}>
用户组管理
</Link>
</Menu.Item>
<Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
<Link to={'/strategy'}>
授权策略
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="my-file" icon={<FolderOutlined/>}>
<Link to={'/my-file'}>
我的文件
</Link>
</Menu.Item>
<Menu.Item key="info" icon={<SolutionOutlined/>}>
<Link to={'/info'}>
个人中心
</Link>
</Menu.Item>
<Menu.Item key="setting" icon={<SettingOutlined/>}>
<Link to={'/setting'}>
系统设置
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background"
style={{padding: 0, height: headerHeight, zIndex: 20}}>
<div className='layout-header'>
<div className='layout-header-left'>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.onCollapse,
})}
</div>
<div className='layout-header-right'>
<div className={'layout-header-right-item'}>
<a style={{color: 'black'}} target='_blank'
href='https://github.com/dushixiang/next-terminal'
rel='noreferrer noopener'>
<GithubOutlined/>
</a>
</div>
</div>
<div className='layout-header-right'>
<Dropdown overlay={menu}>
<div className='nickname layout-header-right-item'>
{getCurrentUser()['nickname']} <DownOutlined/>
</div>
</Dropdown>
</div>
</div>
</Header>
<Route path="/" exact component={Dashboard}/>
<Route path="/user" component={User}/>
<Route path="/user-group" component={UserGroup}/>
<Route path="/asset" component={Asset}/>
<Route path="/credential" component={Credential}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
<Route path="/batch-command" component={BatchCommand}/>
<Route path="/online-session" component={OnlineSession}/>
<Route path="/offline-session" component={OfflineSession}/>
<Route path="/login-log" component={LoginLog}/>
<Route path="/info" component={Info}/>
<Route path="/setting" component={Setting}/>
<Route path="/job" component={Job}/>
<Route path="/access-security" component={Security}/>
<Route path="/access-gateway" component={AccessGateway}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/storage" component={Storage}/>
<Route path="/strategy" component={Strategy}/>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</Layout>
</> :
<>
<Header style={{padding: 0}}>
<div className='km-header'>
<div style={{flex: '1 1 0%'}}>
<Link to={'/'}>
<img src={this.state.logo} alt='logo' width={120}/>
</Link>
<Link to={'/my-file'}>
<Button type="text" style={{color: 'white'}}
icon={<FolderOutlined/>}>
文件
</Button>
</Link>
<Link to={'/dynamic-command'}>
<Button type="text" style={{color: 'white'}}
icon={<CodeOutlined/>}>
指令
</Button>
</Link>
</div>
<div className='km-header-right'>
<Dropdown overlay={menu}>
<span className={'km-header-right-item'}>
{getCurrentUser()['nickname']}
</span>
</Dropdown>
</div>
</div>
</Header>
<Content className='km-container'>
<Layout>
<Route path="/" exact component={MyAsset}/>
<Content className={'kd-content'}>
<Route path="/info" component={Info}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
</Content>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</>
}
</Layout>
</Route>
</Switch>
);
}
Example #10
| Source File: head.js From ant-simple-pro with MIT License | 4 votes |
|
TopBar = memo(function TopBar({
collapsed,
onToggle,
width,
setIsMobileDrawer,
}) {
const moreList = [
{ title: 'ant-simple-pro(vue3.0)', url: 'https://lgf196.top/vue/' },
{
title: 'ant-simple-pro(afterEnd)',
url: 'https://github.com/lgf196/ant-simple-pro/tree/afterEnd',
},
{
title: 'ant-simple-draw(图形编辑器)',
url: 'https://github.com/lgf196/ant-simple-draw',
},
{
title: 'ant-simple-pro(angular)',
url: 'https://github.com/lgf196/ant-simple-pro/tree/angular/angular',
},
{
title: 'h5-Dooring(可视化)',
url: 'https://github.com/MrXujiang/h5-Dooring',
},
];
const history = useHistory();
const dispatch = useDispatch();
useEffect(() => {
dispatch({ type: SAGA_GET_USER_INFO });
}, [dispatch]);
const selectNumOfDoneTodos = createSelector(
[(state) => state.user.getUserInfo, (state) => state.user.loadingUserInfo],
(getUserInfo, loadingUserInfo) => [getUserInfo, loadingUserInfo],
);
const [getUserInfo, loadingUserInfo] = useSelector(selectNumOfDoneTodos);
const isMobileDevice = useMemo(
() => (width < responsiveConfig.mobileInnerWidth ? true : false),
[width],
);
const tagOption = ({ key }) => {
if (key === '2') {
confirm(() => {
localStorage.clear();
history.push(`/login?rp=${+new Date()}`);
}, '确定要退出登录吗？');
}
};
const dropdown = () => (
<Menu onClick={tagOption}>
<Menu.Item key="1">
<Link to="/userInfo">
<UserOutlined />
<span>个人信息</span>
</Link>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="2">
<LogoutOutlined />
<span>退出登录</span>
</Menu.Item>
</Menu>
);
const more = () => (
<Menu>
{moreList.map((item, index) => (
<Menu.Item key={index}>
<a href={item.url} target="_blank">
<span>{item.title}</span>
</a>
</Menu.Item>
))}
</Menu>
);
const options = () => {
setIsMobileDrawer(isMobileDevice);
onToggle(!collapsed);
};
return (
<div className={`${style.head} clearfix`}>
<div className={`${style.headLeft} fl`}>
<div className={`${style.menu}`} onClick={options}>
{collapsed ? (
<MenuUnfoldOutlined className={style.icon} />
) : (
<MenuFoldOutlined className="icon" />
)}
</div>
</div>
<div className={`${style.menuList} fr`}>
<a
href="http://blog.lgf196.top/ant-simple-pro-document/"
target="_blank"
>
<Tooltip title="文档">
<QuestionCircleOutlined className={style.icon} />
</Tooltip>
</a>
<News />
<FullScreeOut className={style.icon} />
<Dropdown overlay={dropdown} placement="bottomCenter">
<div className={`${style.propsUser}`}>
{loadingUserInfo ? (
<>
<HeadImage
url={
getUserInfo.iconUrl
? getUserInfo.iconUrl
: 'https://antd-simple-pro.oss-cn-beijing.aliyuncs.com/image/1605845717285.png'
}
/>
<span>
{getUserInfo.username ? getUserInfo.username : '珍珍'}
</span>
</>
) : (
<Spin size="small" />
)}
</div>
</Dropdown>
<Dropdown overlay={more} placement="bottomRight">
<Button
size="small"
style={{ marginLeft: '20px', color: 'rgba(105, 123, 140, 0.7)' }}
>
<span>更多</span>
<DownOutlined />
</Button>
</Dropdown>
</div>
</div>
);
})
Example #11
| Source File: ChatList.js From react-chat-app with MIT License | 4 votes |
|
ChatList = props => {
const didMountRef = useRef(false)
const [hasMoreChats, setHasMoreChats] = useState(true)
const [editingProfile, setEditingProfile] = useState(false)
const [logoSource, setLogoSource] = useState(chatLogo);
const [theme, setTheme] = useState("dark");
const { conn, chats, setChats, setActiveChat, activeChat } = useContext(ChatEngineContext)
const chat = chats && chats[activeChat];
const name = props.chatAppState.userName
const secret = props.chatAppState.userSecret
useEffect(() => {
const themeValue = localStorage.getItem("theme");
if (themeValue === "light") {
document.querySelector(".app").classList.add("light");
setLogoSource(chatLogoWhite)
} else if (themeValue === "dark") {
document.querySelector(".app").classList.remove("light");
setLogoSource(chatLogo)
} else {
localStorage.setItem("theme", theme);
}
}, [theme]);
function deleteActiveChat(chatID) {
var myHeaders = new Headers();
let otherPerson = chat.people.find(
(person) => person.person.username !== name
)
? chat.people.find((person) => person.person.username !== name)
: chat.people.find((person) => person.person.username === name);
myHeaders.append("Project-ID", process.env.REACT_APP_PROJECT_ID);
myHeaders.append("User-Name", name);
myHeaders.append("User-Secret", secret);
var raw = `{"username": "${name}"}`;
var raw2 = `{"username": "${otherPerson.person.username}"}`;
var firstUser = {
method: "DELETE",
headers: myHeaders,
body: raw,
redirect: "follow",
};
var secondUser = {
method: "DELETE",
headers: myHeaders,
body: raw2,
redirect: "follow",
};
fetch(`https://api.chatengine.io/chats/${chatID}/people/`, firstUser)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
fetch(`https://api.chatengine.io/chats/${chatID}/people/`, secondUser)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
}
function getDateTime(date, offset) {
if (!date) return ''
date = date.replace(' ', 'T')
offset = offset ? offset : 0
const year = date.substr(0, 4)
const month = date.substr(5, 2)
const day = date.substr(8, 2)
const hour = date.substr(11, 2)
const minute = date.substr(14, 2)
const second = date.substr(17, 2)
var d = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`)
d.setHours(d.getHours() + offset)
return d
}
function renderChats(chats) {
return chats.map((chat, index) => {
if (!chat) {
return <div key={`chat_${index}`} />
} else if (props.chatAppState.renderChatCard) {
return <div key={`chat_${index}`}>{props.chatAppState.renderChatCard(chat, index)}</div>
} else {
return (""
)
}
})
}
function sortChats(chats) {
return chats.sort((a, b) => {
const aDate = a.last_message && a.last_message.created ? getDateTime(a.last_message.created, props.chatAppState.offset) : getDateTime(a.created, props.chatAppState.offset)
const bDate = b.last_message && b.last_message.created ? getDateTime(b.last_message.created, props.chatAppState.offset) : getDateTime(b.created, props.chatAppState.offset)
return new Date(bDate) - new Date(aDate);
})
}
function onGetChats(chatList) {
const oldChats = chats !== null ? chats : {}
const newChats = _.mapKeys({ ...chatList }, 'id')
const allChats = { ...oldChats, ...newChats }
setChats(allChats);
(count && count > Object.keys(allChats).length) && setHasMoreChats(false);
}
useEffect(() => {
if (!didMountRef.current && name && secret) {
didMountRef.current = true
getLatestChats(
props.chatAppState,
count,
(chats) => {
onGetChats(chats)
const chatList = sortChats(chats)
chatList.length > 0 && setActiveChat(chatList[0].id)
}
)
}
})
useEffect(() => {
if (!activeChat) {
activeConversation()
}
}, [chats, activeChat])
const chatList = sortChats(
chats ?
Object.values(chats) :
[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
)
function activeConversation() {
if (chatList[0]) {
setActiveChat(chatList[0].id)
}
}
if (chats == null) return <div />;
return (
<div className="chat-left-wing">
<div className="chat-bar">
<div className="chat-bar-logo">
{(window.screen.availWidth > 700) ?
<img src={logoSource} alt="" /> :
<div className="mobile-toggler">
<CloseOutlined
onClick={() => {
document.querySelector(".chat-container").children[0].children[1].children[0].style.display = "none";
document.querySelector(".chat-container").children[0].children[1].children[1].style.display = "block";
}}
/>
</div>
}
</div>
<div className="chat-bar-options">
<div className="chat-bar-option">
<UserOutlined
onClick={
() => {
if (editingProfile && (window.screen.availWidth > 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "530px"
}
else if (!editingProfile && (window.screen.availWidth > 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "425px"
}
else if (editingProfile && (window.screen.availWidth <= 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "calc(100vh - 76px)"
} else {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "calc(100vh - 166px)"
}
}
}
/>
</div>
<div className="chat-bar-option">
<BgColorsOutlined onClick={() => {
const themeValue = localStorage.getItem("theme");
if (themeValue === "dark") {
setTheme("light")
localStorage.setItem("theme", "light");
document.querySelector(".app").classList.add("light");
setLogoSource(chatLogoWhite)
} else if (themeValue === "light") {
setTheme("dark")
localStorage.setItem("theme", "dark");
document.querySelector(".app").classList.remove("light");
setLogoSource(chatLogo)
}
}} />
</div>
<div className="chat-bar-option">
<a href="https://github.com/matt765/react-chat-app" target="_blank"><GithubOutlined /></a>
</div>
<div className="chat-bar-option">
<DeleteOutlined onClick={() => {
if (name === "john%20doe") {
alert("Deleting conversations is disabled on sample account, sorry!");
return
}
if (window.confirm("Press OK if you want to delete active chat. Conversation with this person will be lost")) {
deleteActiveChat(activeChat)
}
}} />
</div>
<div className="chat-bar-option"> <LogoutOutlined onClick={() => {
if (window.confirm("Press OK if you want to logout")) {
fb.auth.signOut().then(console.log("logged out"))
document.querySelector(".app").classList.remove("light");
}
}} /></div>
</div>
</div>
<div className="chat-left-wing-list">
{editingProfile ?
<ChatProfile
chat={chat}
conn={conn}
name={props.chatAppState.userName}
secret={props.chatAppState.userSecret}
/> : ""}
<div style={styles.chatListContainer} className='ce-chat-list'>
{
props.chatAppState.renderNewChatForm ?
props.chatAppState.renderNewChatForm(conn) :
<NewChatForm onClose={props.chatAppState.onClose ? () => props.chatAppState.onClose() : undefined} />
}
<div style={styles.chatsContainer} className='ce-chats-container'>
{renderChats(chatList)}
{
hasMoreChats && chatList.length > 0 &&
<div>
<div style={{ height: '8px' }} />
</div>
}
</div>
</div>
</div>
</div>
)
}
Example #12
| Source File: Home.js From Insta-Poll with MIT License | 4 votes |
|
Home = (props) => {
const { Title } = Typography;
const {user} = UserSession();
const handleLogout = ()=>{
firebase.auth().signOut().then(function() {
}).catch(function(error) {
});
}
const { TextArea } = Input;
const [check, setCheck]= useState(false);
const [options, setOptions] = useState([{
index:1,
title:"",
count : 0
}, {
index:2,
title:"",
count : 0
}]);
const [selectedDate, handleDateChange] = useState(new Date());
function onChangeSwitch(checked) {
setCheck(!check);
}
const [title, setTitle] = useState('');
const handleSubmit = (e)=>{
if(options.length<2)
toast.error("Minimum 2 options required!");
else {
let flag=0;
for(let i=0;i<options.length;i++)
{
if(options[i].title=="")
{
toast.error("Please fill all the options!");
flag=1;
break;
}
}
if(flag==0)
{
if(title=="")
{
toast.error("Title cannot be empty!");
flag=1;
}
else{
let poll = {};
if(check)
{
poll.expire = true;
poll.date = selectedDate;
}
else
poll.expire = false;
poll.id = shortid.generate();
poll.title = title;
poll.creator = user.displayName;
poll.votes = {};
poll.options = options;
createPoll(poll);
toast.success("Poll Generated Successfully ?");
setTimeout(()=>{
props.history.push(`/${poll.id}`);
}, 2000)
}
}
}
}
const fadeEffect = {
exit : {
opacity:0,
x:-300,
transition:{
duration:5
}
}
}
const handleTitle = (e)=>{
setTitle(e.target.value)
}
const handleDelete = (index)=>{
let array = options;
let x = []
array.forEach((option)=>{
if(option.index!==index)
{
// console.log(option.index, index);
// console.log(option.title)
x.push(option)
}
}
);
array = x;
let i = 1;
array.forEach((option=>{
option.index = i;
i=i+1;
}))
// console.log(array);
setOptions(array);
}
const handleClick = (e)=>{
let option = {
index : options.length +1,
title: "",
count : 0
}
if(options.length==4)
toast.warning("Maximum 4 options allowed")
else
setOptions([...options, option]);
}
const handleChange = (index, e)=>{
let x = options;
x.forEach((option)=>{
if(option.index===index)
option.title = e.target.value;
})
setOptions([...x]);
}
return (
<div>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<div className="logout_grid">
<div>
<h1 className="animate__animated animate__pulse heading">Create a Realtime Poll Instantly!⚡
</h1>
</div>
<div>
<Button type="primary" onClick={handleLogout} size="large" className="btn_logout"> Logout <LogoutOutlined /></Button>
</div>
</div>
<ToastContainer newestOnTop autoClose={2000}/>
<div className="flex_home">
<div style={{flexGrow:"2"}} className="min_wide">
<TextArea placeholder="Ask a Question..." className="title" onChange={handleTitle} autoSize={{minRows:1.5}}/>
<br/>
<br/>
<div className="flex_btns">
<Button type="primary" onClick = {handleClick} > Add an Option <PlusCircleTwoTone /></Button>
<div>
<span style={{fontSize:"1rem"}}>Auto Expire after a fixed time</span> <Switch onChange={onChangeSwitch} />
</div>
{check ? (<DateTimePicker value={selectedDate} disablePast onChange={handleDateChange}/>) : (null)}
</div>
<AnimatePresence>
{!options.length ? (null) : (options.map((option)=>(
<motion.div exit={{x:-800}} initial={{y:-30, opacity:0}} animate={{opacity:1, y:0, transition: {y:{duration:0.5}}}} key={option.index} className="options">
<input type="text" placeholder ={`Option ${option.index}`} className="option" value={option.title} onChange={(value)=>handleChange(option.index, value)} />
<DeleteTwoTone twoToneColor="#eb2f96" style={{fontSize:"1.2rem"}} onClick={()=>{handleDelete(option.index)}}/>
</motion.div>
)))}
</AnimatePresence>
{!options.length ? (null) : (<Button type="primary" size="large" className="submit" onClick={handleSubmit}> Generate Poll ?</Button>)}
</div>
<div style={{flexGrow:"1"}}>
<img
src="https://image.freepik.com/free-vector/costumer-survey-concept-illustration_114360-459.jpg" className="home_img animate__animated animate__fadeIn"/>
</div>
</div>
</MuiPickersUtilsProvider>
</div>
)
}
Example #13
| Source File: Poll.js From Insta-Poll with MIT License | 4 votes |
|
Poll = (props) => {
const id = props.match.params.id;
const {user} = UserSession();
const uid = user.uid;
const [label, setLabel] = useState([]);
const [expiry, setExpiry] = useState(false);
const [poll, setPoll] = useState(null);
const [modal, setModal] = useState(false);
const [pollData, setPollData] = useState([]);
const [index, setIndex] = useState(-1);
const handleURL = ()=>{
navigator.clipboard.writeText("https://insta-poll-72ce3.web.app/" + poll.id);
toast.success("URL copied to clipboard")
}
const showModal = () => {
setModal(!modal);
};
const handleClick = (index)=>{
setIndex(index);
let x = poll;
if(!x.votes[uid])
{
x.options.forEach((option)=>{
if(option.index==index)
option.count +=1;
})
}
else if(x.votes[uid]!=index)
{
x.options.forEach((option)=>{
if(option.index==(x.votes[uid]))
{
option.count-=1;
}
else if(option.index==index)
{
option.count+=1;
}
})
}
x.votes[uid] = index;
updatePoll(x);
}
const handleLogout = ()=>{
firebase.auth().signOut().then(function() {
}).catch(function(error) {
});
}
useEffect(()=>{
const docRef = firestore.doc(`/polls/${id}`);
const unsubscribe = docRef.onSnapshot((document)=>{
if(document.exists)
{ setPoll(document.data());
let x=[], y=[];
if(document.data().expire)
{
if((new Date().getTime()/1000)>=document.data().date.seconds)
setExpiry(true);
}
document.data().options.forEach((option)=>{
x.push(option.title);
y.push(option.count)
})
if(document.data().votes && document.data().votes[uid])
{
setIndex(document.data().votes[uid]);
}
setLabel(x);
setPollData(y);
}
else
{
props.history.push("/not_found");
}
})
}, [])
const shareUrl = 'http://github.com';
const data = {
labels :label,
datasets: [
{
label: 'Number of Votes',
data: pollData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
}
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
precision:0,
fontFamily:"Mulish",
fontStyle: '500'
},
barPercentage:"0.4"
},
],
xAxes: [
{
ticks: {
beginAtZero: true,
precision:0,
fontFamily:"Mulish",
fontStyle:"500"
},
},
],
},
legend:{
labels:{
fontFamily: "Mulish"
},
},
maintainAspectRatio: false
}
if(!poll)
return( <div
style={{
width: "100%",
display: "flex",
height: "100vh",
alignItems: "center",
justifyContent: "center",
zIndex: "23444898429"
}}
>
<img src={Loader} />
</div>)
return (
<div>
<div className="logout_grid">
<div>
<h1 className="head_title animate__animated animate__fadeIn">{poll.title} </h1>
</div>
<div>
<Button type="primary" onClick={handleLogout} className="btn_logout"> Logout <LogoutOutlined /></Button>
</div>
</div>
<Link to="/"><Button type="primary" className="create_btn" >Create a new Poll</Button></Link>
<br/>
<ToastContainer newestOnTop autoClose={2000}/>
<div className="flex">
<div className="options_div animate__animated animate__fadeInLeft">
{expiry ? (<h2>This poll is no longer accepting responses ❌</h2>) : (<h2>Select an Option ?</h2>)}
{expiry ? (poll.options.map((option)=>{
if(option.index!=index)
return (
<div className="poll_live_expire">
{option.title}
</div>
)
else
return(
<div className="poll_live_expire_selected">
{option.title}
</div>
)
})) : (poll.options.map((option)=>
{
if(option.index!=index)
return(
<div className="poll_live" onClick={()=>handleClick(option.index)}>
{option.title}
</div>
)
else
return(
<div className="poll_live_selected " onClick={()=>handleClick(option.index)}>
{option.title}
</div>
)
}
))}
</div>
{index!=-1 && ( <div className="graph animate__animated animate__fadeInRight">
<HorizontalBar data={data} options={options} />
</div>)}
</div>
<div className="share_icons animate__animated animate__fadeIn">
<h3>Share this Poll <ShareAltOutlined /></h3>
<TwitterShareButton
url={`https://insta-poll-72ce3.web.app/${poll.id}`}
title={`Vote to this poll titled "${poll.title}" generated using Insta Poll\n`}
className="share_icon"
>
<TwitterIcon size={32} round />
</TwitterShareButton>
<WhatsappShareButton
url={`https://insta-poll-72ce3.web.app/${poll.id}`}
title={`Vote to this poll titled "${poll.title}" generated using Insta Poll`}
separator=":: "
className="share_icon"
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
<FacebookShareButton
url={`https://insta-poll-72ce3.web.app/${poll.id}`}
title={`Vote to this poll titled "${poll.title}" generated using Insta Poll`}
className="share_icon"
>
<FacebookIcon size={32} round />
</FacebookShareButton>
<br/>
<Input value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{width:"15rem"}} disabled/>
<Button type="primary" onClick={handleURL}>Copy URL</Button>
<Button type="primary" onClick={showModal} style={{margin:"0.5rem"}}>
Share QR Code
</Button>
<Modal
visible={modal}
onOk={showModal}
onCancel = {showModal}
style={{textAlign:"center"}}
>
<QRCode value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{height:"12rem", width:"12rem"}} />
</Modal>
</div>
</div>
)
}
Example #14
| Source File: LayoutBanner.js From react-admin-portal with MIT License | 4 votes |
|
function LayoutBanner({ collapsed, handleOnCollapse }) {
const getCollapseIcon = () => {
if (collapsed) {
return (
<MenuUnfoldOutlined onClick={handleOnCollapse} className="trigger" />
);
}
return <MenuFoldOutlined onClick={handleOnCollapse} className="trigger" />;
};
const handleLanguageMenuClick = () => {};
const handleSettingMenuClick = () => {};
const handleLogout = () => {};
return (
<Header className="header" style={{ background: '#fff', padding: 0 }}>
<div
style={{
float: 'left',
width: '100%',
alignSelf: 'center',
display: 'flex',
}}
>
{window.innerWidth > 992 && getCollapseIcon()}
</div>
<Menu
// onClick={this.handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu title={<QuestionCircleOutlined />} />
</Menu>
<Menu
// onClick={this.handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu
title={
<Badge dot>
<BellOutlined />
</Badge>
}
/>
</Menu>
<Menu
onClick={handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu title={<GlobalOutlined />}>
<Menu.Item key="en">
<span role="img" aria-label="English">
?? English
</span>
</Menu.Item>
<Menu.Item key="it">
<span role="img" aria-label="Italian">
?? Italian
</span>
</Menu.Item>
</SubMenu>
</Menu>
<Menu onClick={handleSettingMenuClick} mode="horizontal" className="menu">
<SubMenu title={getUsernameAvatar('Cemal')}>
<Menu.Item key="setting:1">
<span>
<UserOutlined />
Profile
</span>
</Menu.Item>
<Menu.Item key="setting:2">
<span>
<LogoutOutlined onClick={handleLogout} />
Logout
</span>
</Menu.Item>
</SubMenu>
</Menu>
</Header>
);
}
