Generateurv2/frontend/components/NavBar.jsx
2022-06-24 13:42:16 +02:00

149 lines
4.1 KiB
JavaScript

import Link from "next/link";
import { useRouter } from "next/router";
import styles from "../styles/NavBar.module.scss";
import { AiFillHome } from "react-icons/ai";
import { IoMdExit } from "react-icons/io";
import { RiUser3Fill } from "react-icons/ri";
import { useSessionContext } from "../context/session.context.js";
import { logoutRequest } from "../requests/requests.users.js";
import { notificationService } from "../services/notification.service.js";
import { isBrowser, parseClassName } from "../utils/utils.js";
import {GiHamburgerMenu} from 'react-icons/gi'
import { useState } from "react";
import { isEmpty } from "../utils//utils.js";
export default function NavBar() {
const router = useRouter();
const { isLogin, authData, logout } = useSessionContext();
const[isOpen, open] = useState(false)
return (
<nav
className={parseClassName([
styles.navbar,
isOpen ? styles.isOpen : undefined,
])}
>
<ul className={styles["links"]}>
<li>
<Link href={"/"}>
<a className={styles.home}>
<AiFillHome />
</a>
</Link>
</li>
<li>
<Link href={"/exercices/"+(isEmpty(authData)?'public':'user')} >
<a
className={
styles.link +
" " +
(router.route == "/exercices/[[...exo]]"
? styles.selected
: undefined)
}
>
Exercices
</a>
</Link>
</li>
<li>
<Link href="/fiches">
<a
className={
styles.link +
" " +
(router.route == "/fiches" ? styles.selected : undefined)
}
>
Fiches PDF
</a>
</Link>
</li>
<li>
<Link href="/room">
<a
className={
styles.link +
" " +
(router.route == "/room" ? styles.selected : undefined)
}
>
Salles
</a>
</Link>
</li>
</ul>
<ul className={styles["session-links"]}>
{!isEmpty(authData) && (
<>
<li className={styles['auth-links']}>
{authData && (
<Link href={"/dashboard"}>
<a
className={
styles.link +
" " +
styles.dashboard +
" " +
(router.route == "/dashboard"
? styles.selected
: undefined)
}
>
<RiUser3Fill />
{authData.username}
</a>
</Link>
)}
<a
className={styles.logout}
onClick={() => {
logout();
}}
>
<IoMdExit />
</a>
</li>
</>
)}
{isEmpty(authData) && (
<li className={styles['auth-links']}>
<Link href="/login">
<a
className={
styles.link +
" " +
(router.route == "/login" ? styles.selected : undefined)
}
>
Se connecter
</a>
</Link>
<Link href="/register">
<a
className={
styles.link +
" " +
(router.route == "/register" ? styles.selected : undefined)
}
>
S'inscrire
</a>
</Link>
</li>
)}
<li>
<button
className={styles.burger}
onClick={() => {
open(!isOpen);
}}
>
<span>test</span>
</button>
</li>
</ul>
</nav>
);
}