-
Notifications
You must be signed in to change notification settings - Fork 1
/
Navigation.js
62 lines (54 loc) · 1.85 KB
/
Navigation.js
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
import React, { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import ProfileButton from "./ProfileButton";
import { logout } from "../store/session";
import "../SCSS/navigation.css";
function Navigation({ isLoaded }) {
const sessionUser = useSelector((state) => state.session.user);
const [showMenu, setShowMenu] = useState(false);
const ulRef = useRef();
const dispatch = useDispatch();
const handleLogout = (e) => {
e.preventDefault();
dispatch(logout());
};
useEffect(() => {
if (!showMenu) return;
const closeMenu = (e) => {
if (!ulRef.current.contains(e.target)) {
setShowMenu(false);
}
};
document.addEventListener("click", closeMenu);
return () => document.removeEventListener("click", closeMenu);
}, [showMenu]);
const closeMenu = () => setShowMenu(false);
const openMenu = () => {
if (showMenu) return;
setShowMenu(true);
};
const ulClassName = "profile-dropdown" + (showMenu ? "" : " hidden");
return (
<>
<div className="nav-div-user-logged-in">
<div className="nav-icon-user-logged-in">
<Link exact to="/home">
<img className="responsive-logo" alt="Here the Basel Hack Logo is displayed" src="/Logo.svg" />
<img className="responsive-logo" alt="Here the Basel Hack Logo is displayed" src="/burger_wink.svg" />
</Link>
</div>
<div className="profile-create-user-logged-in">
<div className={ulClassName} ref={ulRef}></div>
{/* {isLoaded && ( */}
<div className="profile-button-user-logged-in">
<ProfileButton user={sessionUser} />
</div>
{/* )} */}
</div>
</div>
<span className="divider"></span>
</>
);
}
export default Navigation;