You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
4.3 KiB
108 lines
4.3 KiB
import React, {useEffect, useState} from 'react';
|
|
|
|
/* Naviagtion */
|
|
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
|
|
|
|
/* Lang */
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
/* Icon */
|
|
import { BiDoorOpen, BiLogInCircle } from 'react-icons/bi';
|
|
import { BsFillPersonPlusFill } from 'react-icons/bs';
|
|
|
|
/* Images */
|
|
import logo from '../res/img/logo2_preview_rev_1.png';
|
|
|
|
/* Components */
|
|
import LanguageNavItem from './LangNavItem';
|
|
import LangDropDown from './LangDropDown';
|
|
|
|
/* Style */
|
|
import './NavBar.css';
|
|
|
|
/* Style */
|
|
import { useTheme } from '../Style/ThemeContext';
|
|
import { useAuth } from '../Contexts/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
// @ts-ignore
|
|
function AppNavbar({changeLocale}) {
|
|
const theme = useTheme();
|
|
const {user, isLoggedIn, logout} = useAuth();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
console.log(user)
|
|
}, [user])
|
|
|
|
function navigateToProfile(){
|
|
navigate("/profile")
|
|
}
|
|
|
|
function navigateToHome(){
|
|
navigate("/")
|
|
}
|
|
|
|
return (
|
|
<Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
|
|
<Container>
|
|
<Navbar.Brand onClick={navigateToHome}>
|
|
<img src={logo} alt="logo" className="logo" />
|
|
</Navbar.Brand>
|
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
|
<Navbar.Collapse id="basic-navbar-nav">
|
|
<Nav className="me-auto">
|
|
<NavDropdown title={<span style={{ color: theme.colors.text }}><FormattedMessage id="play" /></span>} className="navbar-title" id="basic-nav-dropdown">
|
|
<NavDropdown.Item href="play"><FormattedMessage id="play_solo" /> </NavDropdown.Item>
|
|
<NavDropdown.Divider />
|
|
<NavDropdown.Item href="play"><FormattedMessage id="create_room" /> </NavDropdown.Item>
|
|
<NavDropdown.Item href="play"><FormattedMessage id="join" /> </NavDropdown.Item>
|
|
</NavDropdown>
|
|
</Nav>
|
|
<div className='leftdiv'>
|
|
<Nav className="ml-auto navbar-title-dd">
|
|
{isLoggedIn ? (
|
|
<NavDropdown
|
|
title={<span style={{ color: theme.colors.text }}>Menu <BiDoorOpen /></span>}
|
|
id="basic-nav-dropdown"
|
|
align="end"
|
|
drop='down-centered'
|
|
>
|
|
<NavDropdown.Item onClick={navigateToProfile}>Profil</NavDropdown.Item>
|
|
<LanguageNavItem
|
|
countryCode="FR"
|
|
languageKey="languageSelector.french"
|
|
onClick={() => changeLocale('fr')}
|
|
/>
|
|
<LanguageNavItem
|
|
countryCode="GB"
|
|
languageKey="languageSelector.english"
|
|
onClick={() => changeLocale('en')}
|
|
/>
|
|
<NavDropdown.Divider />
|
|
<NavDropdown.Item onClick={logout}>Déconnexion</NavDropdown.Item>
|
|
</NavDropdown>
|
|
) : (
|
|
<>
|
|
<Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
|
|
<BiLogInCircle />
|
|
<FormattedMessage id="log_in" />
|
|
</Nav.Link>
|
|
<Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
|
|
<BsFillPersonPlusFill />
|
|
<FormattedMessage id="sign_up" />
|
|
</Nav.Link>
|
|
<LangDropDown changeLocale={changeLocale}/>
|
|
</>
|
|
)}
|
|
</Nav>
|
|
</div>
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
);
|
|
}
|
|
|
|
export default AppNavbar;
|