1import { NavLink } from "react-router-dom";
 2import { 
 3  FaHome, 
 4  FaDumbbell, 
 5  FaUserAlt, 
 6  FaPlus
 7} from "react-icons/fa";
 8import "./BottomNav.css";
 9
10interface BottomNavProps {
11  isMobile: boolean;
12}
13
14const BottomNav = ({ isMobile }: BottomNavProps) => {
15  if (isMobile) {
16    return (
17      <nav className="bottom-nav mobile">
18        <NavLink to="/home" className={({ isActive }) => isActive ? "active" : ""}>
19          <FaHome size={20} />
20          <span>Home</span>
21        </NavLink>
22        <NavLink to="/workouts" className={({ isActive }) => isActive ? "active" : ""}>
23          <FaDumbbell size={20} />
24          <span>Workouts</span>
25        </NavLink>
26        <NavLink to="/profile" className={({ isActive }) => isActive ? "active" : ""}>
27          <FaUserAlt size={20} />
28          <span>Profile</span>
29        </NavLink>
30      </nav>
31    );
32  }
33  
34  return (
35    <nav className="side-nav desktop">
36      <div className="app-title">Go Lift</div>
37      <div className="nav-links">
38        <NavLink to="/home" className={({ isActive }) => isActive ? "active" : ""}>
39          <FaHome size={20} />
40          <span>Home</span>
41        </NavLink>
42        <NavLink to="/workouts" className={({ isActive }) => isActive ? "active" : ""}>
43          <FaDumbbell size={20} />
44          <span>Workouts</span>
45        </NavLink>
46        <div className="sub-menu">
47          <div className="sub-menu-title">Create New</div>
48          <NavLink to="/new-exercise" className={({ isActive }) => isActive ? "active" : ""}>
49            <FaPlus size={16} />
50            <span>New Exercise</span>
51          </NavLink>
52          <NavLink to="/new-routine" className={({ isActive }) => isActive ? "active" : ""}>
53            <FaPlus size={16} />
54            <span>New Routine</span>
55          </NavLink>
56          <NavLink to="/new-workout" className={({ isActive }) => isActive ? "active" : ""}>
57            <FaPlus size={16} />
58            <span>New Workout</span>
59          </NavLink>
60        </div>
61        <NavLink to="/profile" className={({ isActive }) => isActive ? "active" : ""}>
62          <FaUserAlt size={20} />
63          <span>Profile</span>
64        </NavLink>
65      </div>
66    </nav>
67  );
68};
69
70export default BottomNav;