63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { getUrlHead } from '../Data/getUrl';
|
|
import { Dropdown , Menu } from 'antd';
|
|
import logo from '../images/logo.png';
|
|
import LoginModal from '../Components/Login/LoginModal';
|
|
|
|
function Nav({ users, headData , successFunc , quitFunc , match }){
|
|
const [ visible ,setVisible ] = useState(false);
|
|
const [ navs , setNavs ] = useState(undefined);
|
|
useEffect(()=>{
|
|
if(headData){
|
|
setNavs(headData.navbar);
|
|
}
|
|
},[headData])
|
|
|
|
function success(data) {
|
|
setVisible(false);
|
|
successFunc(data);
|
|
}
|
|
|
|
const menus =(
|
|
<Menu className="menuItems">
|
|
<Menu.Item>{users && users.real_name}</Menu.Item>
|
|
<Menu.Item><a href="/admins">后台管理</a></Menu.Item>
|
|
<Menu.Item onClick={quitFunc}>退出</Menu.Item>
|
|
</Menu>
|
|
)
|
|
|
|
return(
|
|
<div className="headDiv">
|
|
<LoginModal visible={visible} onCancel={()=>setVisible(false)} successFunc={success}/>
|
|
<ul className="headerNav">
|
|
<li><img src={logo} alt="" width="110px" style={{marginRight:"100px"}}/></li>
|
|
{
|
|
navs && navs.length>0 && navs.map((i,k)=>{
|
|
return(
|
|
<li>
|
|
{
|
|
i.link.indexOf("http") > -1 ?
|
|
<a href={i.link} target="_blank">{i.name}</a>
|
|
:
|
|
<Link to={i.link} className={i.link===(match && match.url) ? "color-blue":""}>{i.name}</Link>
|
|
}
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
</ul>
|
|
<div className="headUserInfo">
|
|
{
|
|
users && users.login ?
|
|
<Dropdown overlay={menus} placement={"bottomRight"}>
|
|
<img src={users && getUrlHead(users.image_url)} alt="" width="48px" height="48px" style={{borderRadius:"50%"}}/>
|
|
</Dropdown>
|
|
:
|
|
<a onClick={()=>setVisible(true)}>登录/注册</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Nav; |