theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

🎨 Configure standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 12:04:07 +02:00
parent e22e62a749
commit 58f47c7480
120 changed files with 12271 additions and 10025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
website/components/Header/Header.js
View File

@@ -1,71 +1,73 @@
import { Fragment, useState, useContext } from 'react';
import { UserContext } from '../../contexts/UserContext';
import Link from 'next/link';
import { useRouter } from 'next/router';
import NavigationLink from './NavigationLink';
import './Header.css';
import { useState, useContext } from 'react'
import { UserContext } from '../../contexts/UserContext'
import Link from 'next/link'
import { useRouter } from 'next/router'
import NavigationLink from './NavigationLink'
import './Header.css'
export default function Header() {
export default function Header () {
const { isAuth, logoutUser, user } = useContext(UserContext)
const [isActive, setIsActive] = useState(false)
const { pathname } = useRouter()
const { isAuth, logoutUser, user } = useContext(UserContext);
const [isActive, setIsActive] = useState(false);
const { pathname } = useRouter();
const toggleNavbar = () => {
setIsActive(!isActive)
}
const toggleNavbar = () => {
setIsActive(!isActive);
}
return (
<header className='Header'>
<div className='container'>
return (
<header className="Header">
<div className="container">
{/* Brand */}
<Link href='/'>
<a className='Header__brand-link'>
<img id='brand-link__logo' src='/images/FunctionProject_brand-logo.png' alt='FunctionProject' />
<img id='brand-link__logo-small-screen' src='/images/FunctionProject_icon_small.png' alt='FunctionProject' />
</a>
</Link>
{/* Brand */}
<Link href={"/"}>
<a className="Header__brand-link">
<img id="brand-link__logo" src="/images/FunctionProject_brand-logo.png" alt="FunctionProject" />
<img id="brand-link__logo-small-screen" src="/images/FunctionProject_icon_small.png" alt="FunctionProject" />
</a>
</Link>
{/* Hamburger icon on Mobile */}
<div onClick={toggleNavbar} className={`Header__hamburger ${(isActive) ? 'Header__hamburger-active' : ''}`}>
<span />
</div>
{/* Hamburger icon on Mobile */}
<div onClick={toggleNavbar} className={`Header__hamburger ${(isActive) ? "Header__hamburger-active" : ""}`}>
<span></span>
</div>
{/* Navigation */}
<nav className='Header__navbar'>
<ul className={`navbar__list ${(isActive) ? 'navbar__list-active' : ''}`}>
<NavigationLink name='Accueil' path='/' />
<NavigationLink name='Fonctions' path='/functions' />
<NavigationLink name='Utilisateurs' path='/users' />
{
(!isAuth)
? (
<>
<NavigationLink name="S'inscrire" path='/users/register' />
<NavigationLink name='Connexion' path='/users/login' />
</>
)
: (
<>
<li className='navbar-item'>
<Link href='/users/[name]' as={`/users/${user.name}`}>
<a className={`navbar-link ${pathname === '/users/[name]' ? 'navbar-link-active' : null}`}>Mon Profil</a>
</Link>
</li>
<li className='navbar-item'>
<Link href='/'>
<a onClick={logoutUser} className='navbar-link'>Se déconnecter</a>
</Link>
</li>
</>
)
}
{
(isAuth && user.isAdmin) &&
<NavigationLink name='Admin' path='/admin' />
}
</ul>
</nav>
{/* Navigation */}
<nav className="Header__navbar">
<ul className={`navbar__list ${(isActive) ? "navbar__list-active" : ""}`}>
<NavigationLink name="Accueil" path="/" />
<NavigationLink name="Fonctions" path="/functions" />
<NavigationLink name="Utilisateurs" path="/users" />
{
(!isAuth) ?
<Fragment>
<NavigationLink name="S'inscrire" path="/users/register" />
<NavigationLink name="Connexion" path="/users/login" />
</Fragment>
:
<Fragment>
<li className="navbar-item">
<Link href={"/users/[name]"} as={`/users/${user.name}`}>
<a className={`navbar-link ${pathname === "/users/[name]" ? "navbar-link-active" : null}`}>Mon Profil</a>
</Link>
</li>
<li className="navbar-item">
<Link href={"/"}>
<a onClick={logoutUser} className="navbar-link">Se déconnecter</a>
</Link>
</li>
</Fragment>
}
{
(isAuth && user.isAdmin) &&
<NavigationLink name="Admin" path="/admin" />
}
</ul>
</nav>
</div>
</header>
);
}
</div>
</header>
)
}

31
website/components/Header/NavigationLink.js
View File

@@ -1,18 +1,17 @@
import Link from 'next/link';
import { useRouter } from 'next/router';
import './Header.css';
import Link from 'next/link'
import { useRouter } from 'next/router'
import './Header.css'
export default function NavigationLink(props) {
export default function NavigationLink (props) {
const { pathname } = useRouter()
const { pathname } = useRouter();
return (
<li className="navbar-item">
<Link href={props.path}>
<a className={`navbar-link ${pathname === props.path ? "navbar-link-active" : null}`}>
{props.name}
</a>
</Link>
</li>
);
}
return (
<li className='navbar-item'>
<Link href={props.path}>
<a className={`navbar-link ${pathname === props.path ? 'navbar-link-active' : null}`}>
{props.name}
</a>
</Link>
</li>
)
}