2020-07-16 20:21:58 +02:00
|
|
|
import React, { Fragment, useState } from 'react';
|
2020-06-15 18:10:06 +02:00
|
|
|
import logo from '../resources/logo.svg';
|
2020-07-10 18:07:41 +02:00
|
|
|
import { Config } from '../config';
|
2020-07-16 20:21:58 +02:00
|
|
|
import { Link } from 'react-router-dom';
|
2020-08-26 14:51:53 +02:00
|
|
|
import { useLoggedIn } from '../hooks/useLoggedIn';
|
2020-06-15 18:10:06 +02:00
|
|
|
|
2020-06-18 09:48:45 +02:00
|
|
|
export function Navbar() {
|
2020-08-26 14:51:53 +02:00
|
|
|
const loggedIn = useLoggedIn();
|
2020-07-16 20:21:58 +02:00
|
|
|
const [ isActive, setActive ] = useState(false);
|
|
|
|
|
|
|
|
const toggleMenu = () => {
|
|
|
|
setActive(active => !active);
|
|
|
|
};
|
2020-06-18 09:48:45 +02:00
|
|
|
|
|
|
|
return (
|
2020-07-31 18:04:31 +02:00
|
|
|
<nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
|
2020-06-18 09:48:45 +02:00
|
|
|
<div className="container is-fluid">
|
|
|
|
<div className="navbar-brand">
|
2020-07-16 20:21:58 +02:00
|
|
|
<Link className="navbar-item" to="/">
|
2020-06-18 09:48:45 +02:00
|
|
|
<img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
|
|
|
|
<h1 className="is-size-4">Daddy</h1>
|
2020-07-16 20:21:58 +02:00
|
|
|
</Link>
|
|
|
|
<a role="button"
|
|
|
|
className={`navbar-burger ${isActive ? 'is-active' : ''}`}
|
|
|
|
onClick={toggleMenu}
|
|
|
|
aria-label="menu"
|
|
|
|
aria-expanded="false">
|
2020-06-18 09:48:45 +02:00
|
|
|
<span aria-hidden="true"></span>
|
|
|
|
<span aria-hidden="true"></span>
|
|
|
|
<span aria-hidden="true"></span>
|
|
|
|
</a>
|
|
|
|
</div>
|
2020-07-16 20:21:58 +02:00
|
|
|
<div className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
|
2020-06-18 09:48:45 +02:00
|
|
|
<div className="navbar-end">
|
|
|
|
<div className="navbar-item">
|
2020-08-26 14:51:53 +02:00
|
|
|
<div className="buttons">
|
2020-07-21 22:25:39 +02:00
|
|
|
{
|
2020-08-26 14:51:53 +02:00
|
|
|
loggedIn ?
|
2020-07-21 22:25:39 +02:00
|
|
|
<Fragment>
|
|
|
|
<Link to="/profile" className="button">
|
|
|
|
<span className="icon">
|
|
|
|
<i className="fas fa-user"></i>
|
|
|
|
</span>
|
2020-08-26 14:51:53 +02:00
|
|
|
<span>Mon profil</span>
|
2020-07-21 22:25:39 +02:00
|
|
|
</Link>
|
2020-09-10 19:27:43 +02:00
|
|
|
<Link className="button is-warning is-small" to="/logout">
|
2020-07-21 22:25:39 +02:00
|
|
|
<span className="icon">
|
|
|
|
<i className="fas fa-sign-out-alt"></i>
|
|
|
|
</span>
|
2020-09-10 19:27:43 +02:00
|
|
|
<span>Déconnexion</span>
|
2020-09-04 16:17:48 +02:00
|
|
|
</Link>
|
2020-07-21 22:25:39 +02:00
|
|
|
</Fragment> :
|
2020-08-26 14:51:53 +02:00
|
|
|
<a className="button is-primary" href={Config.loginURL}>
|
2020-07-16 20:21:58 +02:00
|
|
|
<span className="icon">
|
2020-07-21 22:25:39 +02:00
|
|
|
<i className="fas fa-sign-in-alt"></i>
|
2020-07-16 20:21:58 +02:00
|
|
|
</span>
|
2020-08-26 14:51:53 +02:00
|
|
|
<span>S'identifier</span>
|
2020-07-16 20:21:58 +02:00
|
|
|
</a>
|
2020-07-21 22:25:39 +02:00
|
|
|
}
|
2020-08-26 14:51:53 +02:00
|
|
|
</div>
|
2020-06-15 18:10:06 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:48:45 +02:00
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
};
|