blob: 75ecf8b903866d2f617a769b1f76457dd5c88458 (
plain)
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
|
import { useSelector } from "react-redux";
import UserOptions from "./UserOptions/UserOptions";
import "./Header.scss";
import { useEffect, useRef, useState } from "react";
import { useLocation } from "react-router";
function Header() {
const [isExpanded, setIsExpanded] = useState(false);
const currentUser = useSelector((state) => state.auth.currentUser);
const headerRef = useRef(null);
const location = useLocation();
useEffect(() => {
setIsExpanded(false);
}, [location.pathname]);
const closeModal = (e) => {
if (!headerRef.current.contains(e.relatedTarget)) setIsExpanded(false);
};
return (
<header ref={headerRef} className="header" onBlur={closeModal}>
<div className="container">
<h1 className="branding">ToDos App</h1>
{currentUser ? (
<UserOptions
username={currentUser.username}
isExpanded={isExpanded}
setIsExpanded={setIsExpanded}
/>
) : (
""
)}
</div>
</header>
);
}
export default Header;
|
