Unmei/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

api types; navbar style refactoring; user themes

Browse Source
This commit is contained in:
ScuroNeko
2020-10-11 01:30:37 +03:00
parent a6ae3fd69f
commit 069c5ac5ee
25 changed files with 274 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Navbar/Navbar.tsx
+16 -19
View File
@@ -11,7 +11,7 @@ import RegisterModal from "../Modals/RegisterModal";
import LoginModal from "../Modals/LoginModal";
type Props = {
setModal: SetModalType
setModal: SetModal
logout: () => void
currentUser: UserType
};
@@ -50,48 +50,45 @@ class Navbar extends React.Component<Props, State> {
const isMinimized = window.screen.width <= 1000;
const links = (
<div className="Header__Links">
<Link to="/" className={'Header_Button'}>
<div className="Navbar__Links">
<Link to="/" className={'Navbar_Button'}>
Главная
</Link>
<Link to="/novels" className={'Header_Button'}>
<Link to="/novels" className={'Navbar_Button'}>
Новеллы
</Link>
<Link to="/users" className={'Header_Button'}>
Пользователи
</Link>
{expand && isMinimized && (
<div onClick={this.changeSize} className={'Header_Button'} style={{ position: "absolute", right: 0, margin: '.5rem' }}>X</div>
<div onClick={this.changeSize} className={'Navbar_Button'} style={{ position: "absolute", right: 0, margin: '.5rem' }}>X</div>
)}
</div>
);
return (
<nav className={`Header ${expand ? 'Expanded' : 'Minimized'}`}>
<nav className={`Navbar ${expand ? 'Expanded' : 'Minimized'}`}>
{expand || !isMinimized ? links : (
<div className="Header__Links">
<div onClick={this.changeSize} className={'Header_Button'}>
<div className="Navbar__Links">
<div onClick={this.changeSize} className={'Navbar_Button'}>
<FontAwesomeIcon icon={faBars}/>
</div>
</div>
)}
{currentUser &&
(<div className={'Header__User'}>
(<div className={'Navbar__User'}>
{currentUser.authorized ? (<>
<Link to={`/user/${currentUser.id}`} className="Header__User_Profile">
<div className={'Header__User_Avatar'} style={{ backgroundImage: `url(${currentUser.avatar}?s=40&t=${new Date().getTime()})` }}/>
<Link to={`/user/${currentUser.id}`} className="Navbar__User_Profile">
<div className={'Navbar__User_Avatar'} style={{ backgroundImage: `url(${currentUser.avatar}?s=40&t=${new Date().getTime()})` }}/>
<div>{this.props.currentUser.username}</div>
</Link>
{currentUser.group && hasAccessToAdminPanel(currentUser) && (
<Link to={'/kawaii__neko'} className={'Header_Button'}>
<Link to={'/kawaii__neko'} className={'Navbar_Button'}>
Админ-панель
</Link>
)}
<Link className="Header_Button" to={`/user/${currentUser.id}/settings`}>Настройки</Link>
<div className={'Header_Button'} onClick={this.logout}>Выйти</div>
<Link className="Navbar_Button" to={`/user/${currentUser.id}/settings`}>Настройки</Link>
<div className={'Navbar_Button'} onClick={this.logout}>Выйти</div>
</>) : (<>
<div className={'Header_Button'} onClick={() => setModal(<RegisterModal/>)}>Регистрация</div>
<div className={'Header_Button'} onClick={() => setModal(<LoginModal/>)}>Войти</div>
<div className={'Navbar_Button'} onClick={() => setModal(<RegisterModal/>)}>Регистрация</div>
<div className={'Navbar_Button'} onClick={() => setModal(<LoginModal/>)}>Войти</div>
</>)}
</div>)
}