1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
| import React, { useState, useEffect, useContext } from 'react';
import { RootContext } from '../../ContextProvider.js';
import Button from '../Button/Button.js';
import UserMenu from './UserMenu/UserMenu.js';
import './NavBar.scss';
const NavBar = () => {
const [navBackground, setNavBackground] = useState(false);
const context = useContext(RootContext);
const [menu, showMenu] = useState(false);
const [smallScreen, setSmallScreen] = useState(false);
useEffect(() => {
const handleScroll = () => {
let positionY = window.scrollY > 100;
if (positionY !== navBackground) {
setNavBackground(positionY);
}
};
const mediaQuery = window.matchMedia("(max-width: 900px");
mediaQuery.addListener(handleMediaQueryChange);
handleMediaQueryChange(mediaQuery);
document.addEventListener("scroll", handleScroll);
return () => {
document.removeEventListener("scroll", handleScroll);
mediaQuery.removeListener(handleMediaQueryChange);
};
}, [navBackground]);
const handleMediaQueryChange = mediaQuery => {
if(mediaQuery.matches) {
setSmallScreen(true);
} else {
setSmallScreen(false);
}
}
const hideMenu = () => {
showMenu(!menu);
}
const toggleNavRes = () => {
showMenu(!menu);
}
return (
<div className="navbar-container">
<nav className="navbar-subcontainer">
<a href="#">
<div className={`navbar-logo ${navBackground ? "small-logo" : "full-logo"}`} />
</a>
{(menu && !smallScreen) && (
<>
<ul className="listMenu">
<li onClick={hideMenu} className="linksNav">
<a className="link" href="/dashboard">
Mon dashboard
</a>
</li>
<li onClick={hideMenu} className="linksNav">
<a className="link" href="/alimentation">
Mon contenu
</a>
</li>
<li onClick={hideMenu} className="linksNav">
<a className="link" href="#" target="blank">
Le blog
</a>
</li>
<li onClick={hideMenu} className="linksNav">
<a className="link" href="#" target="blank">
Feedback
</a>
</li>
<li onClick={hideMenu} className="linksNav">
{context.authenticated ? (
<UserMenu />
) : (
<Button className="small-button" toLink="/login">
Connexion
</Button>
)}
</li>
</ul>
</>
)}
</nav>
<div className={!menu ? "menuResBtn" : "menuResBtn active"} >
<div className="ligne" onClick={toggleNavRes}></div>
</div>
</div>
);
};
export default NavBar; |
Partager