1import { useContext } from "react";
2import { NavLink } from "react-router";
3
4import { AppContext } from "@/ContextProvider";
5import { UpiIcon } from "./upi-icon";
6
7export const Navbar = () => {
8 const { state } = useContext(AppContext);
9 let upiSetupIsComplete = false;
10 let friendsAdded = false;
11 let activitiesAdded = false;
12 if (state.upiSettings.id) {
13 upiSetupIsComplete = true;
14 }
15 if (state.friends.length > 0) {
16 friendsAdded = true;
17 }
18 if (state.activities.length > 0) {
19 activitiesAdded = true;
20 }
21
22 return (
23 <nav>
24 <div className="nav-items-wrapper">
25 <div>
26 {friendsAdded && upiSetupIsComplete && (
27 <>
28 {activitiesAdded && (
29 <NavLink to="/activities" className="nav-link">
30 <span>📄</span>
31 </NavLink>
32 )}
33 <NavLink to="/new" className="nav-link">
34 <span>➕</span>
35 </NavLink>
36 </>
37 )}
38 </div>
39 <div>
40 {upiSetupIsComplete && (
41 <NavLink to="/friends" className="nav-link">
42 <span>🫂</span>
43 </NavLink>
44 )}
45 <NavLink to="/upi" className="nav-link">
46 <UpiIcon />
47 </NavLink>
48 <NavLink to="/about" className="nav-link">
49 <span>❓</span>
50 </NavLink>
51 </div>
52 </div>
53 </nav>
54 );
55};