added api docs page

src/navigation/Router.tsx

@@ -48,6 +48,7 @@ const Heater = lazy(() => import("pages/Heater"));
 const Tasks = lazy(() => import("pages/Tasks"));
 const Transactions = lazy(() => import("pages/Transactions"));
 const BinCableEstimator = lazy(() => import("pages/BinCableEstimator"));
+const APIDocs = lazy(() => import("pages/APIDocs"));
 
 interface Props {
   toggleTheme: () => void;
@@ -322,6 +323,9 @@ export default function Router(props: Props) {
           {user.hasFeature("installer") &&
             <Route path="cableEstimate" element={<BinCableEstimator />} />
           }
+          {user.hasFeature("developer") &&
+            <Route path="api" element={<APIDocs />} />
+          }
           
           {/* Map pages */}
           <Route path="visualFarm" element={<FieldMap />} />

src/navigation/SideNavigator.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, People, Person, SyncAlt } from "@mui/icons-material";
+import { ChevronRight, Code, People, Person, SyncAlt } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import { 
   darken, 
@@ -337,6 +337,20 @@ export default function SideNavigator(props: Props) {
             </ListItemButton>
           </Tooltip>
         }
+        {user.hasFeature("developer") &&
+          <Tooltip title="API documentation" placement="right">
+            <ListItemButton
+              id="tour-api-docs"
+              onClick={() => goTo("/api")}
+              classes={getClasses("/api")}
+              >
+              <ListItemIcon>
+                <Code />
+              </ListItemIcon>
+              {open && <ListItemText primary="API Documentation" />}
+            </ListItemButton>
+          </Tooltip>
+        }
       </List>
     )
   }