training.tsx still a bit messy, all that is left is to retrieve data from firestore /training and /walkthrough and render it

src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
 	BsClipboardData,
 	BsFileLock,
 } from "react-icons/bs";
+import { CiDumbbell } from "react-icons/ci";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -109,6 +110,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
 				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
+				)}
 				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}