Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 18x 18x 18x 18x 18x 18x | import { Link } from "react-router-dom";
import "./NavBar.css";
import React, { useState } from "react";
function Navbar({ coin, showTaskArea, showShop, showChallenge, handleTaskClick, handleShopClick, handleChallengeClick }) {
const [open, setOpen] = useState(false);
const handleShopLinkClick = () => {
setOpen(false);
handleShopClick();
scrollToBottom(); // scroll to the end of the page
};
const handleChallengeLinkClick = () => {
setOpen(false);
handleChallengeClick();
scrollToBottom(); // scroll to the end of the page
};
const scrollToBottom = () => {
setTimeout(() => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'smooth'
});
}, 200); // excute after 200
};
return (
<nav>
<div className="nav-left">
<Link className="logo" to="/">
MEMO MINDER
</Link>
<Link to="/" onClick={handleTaskClick} className={showTaskArea ? "active" : ""}>
<span>Tasks</span>
</Link>
<Link to="/" onClick={handleShopLinkClick} className={showShop ? "active" : ""}>
<span>Shops</span>
</Link>
<Link to="/" onClick={handleChallengeLinkClick} className={showChallenge ? "active" : ""}>
<span>Challenges</span>
</Link>
</div>
<div className="nav-middle"></div>
<div className="nav-right">
<div className="coin">
<img className="coin-icon" src="/coin.png" alt=""/>
<div className="coin-number">{coin}</div>
</div>
<div className="user">
<img
className="user-pic"
src="/user-pic.png"
alt=""
onClick={() => {
setOpen(!open);
}}
/>
<span className="user-name">Ray</span>
</div>
</div>
{/* User dropdown menu */}
<div className={`user-menu ${open ? "active" : "inactive"}`}>
<ul>
<UserMenu text={"Log Out"} />
</ul>
</div>
</nav>
);
}
function UserMenu(props) {
return (
<li className="user-menu-item">
{/* just for eslint scan */}
<a href="/login" className="logout-link">
{" "}
{props.text}{" "}
</a>
</li>
);
}
export default Navbar;
|