(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { Link, useLocation } from "react-router-dom";
2import { useAuth } from "../context/AuthContext";
3import { Home, Search, Folder, User, PenSquare, Bookmark } from "lucide-react";
4
5export default function MobileNav() {
6 const { user, isAuthenticated } = useAuth();
7 const location = useLocation();
8
9 const isActive = (path) => {
10 if (path === "/") return location.pathname === "/";
11 return location.pathname.startsWith(path);
12 };
13
14 return (
15 <nav className="mobile-bottom-nav">
16 <Link
17 to="/"
18 className={`mobile-bottom-nav-item ${isActive("/") ? "active" : ""}`}
19 >
20 <Home size={22} />
21 <span>Home</span>
22 </Link>
23
24 <Link
25 to="/url"
26 className={`mobile-bottom-nav-item ${isActive("/url") ? "active" : ""}`}
27 >
28 <Search size={22} />
29 <span>Browse</span>
30 </Link>
31
32 {isAuthenticated ? (
33 <>
34 <Link
35 to="/new"
36 className="mobile-bottom-nav-item mobile-bottom-nav-new"
37 >
38 <div className="mobile-nav-new-btn">
39 <PenSquare size={20} />
40 </div>
41 </Link>
42
43 <Link
44 to="/bookmarks"
45 className={`mobile-bottom-nav-item ${isActive("/bookmarks") || isActive("/collections") ? "active" : ""}`}
46 >
47 <Bookmark size={22} />
48 <span>Library</span>
49 </Link>
50
51 <Link
52 to={user?.did ? `/profile/${user.did}` : "/profile"}
53 className={`mobile-bottom-nav-item ${isActive("/profile") ? "active" : ""}`}
54 >
55 {user?.avatar ? (
56 <img src={user.avatar} alt="" className="mobile-nav-avatar" />
57 ) : (
58 <User size={22} />
59 )}
60 <span>You</span>
61 </Link>
62 </>
63 ) : (
64 <>
65 <Link
66 to="/login"
67 className="mobile-bottom-nav-item mobile-bottom-nav-new"
68 >
69 <div className="mobile-nav-new-btn">
70 <User size={20} />
71 </div>
72 </Link>
73
74 <Link
75 to="/collections"
76 className={`mobile-bottom-nav-item ${isActive("/collections") ? "active" : ""}`}
77 >
78 <Folder size={22} />
79 <span>Library</span>
80 </Link>
81
82 <Link to="/login" className={`mobile-bottom-nav-item`}>
83 <User size={22} />
84 <span>Sign In</span>
85 </Link>
86 </>
87 )}
88 </nav>
89 );
90}