Routing using useNavigate

Client/src/Components/DashboardMenu/index.jsx

@@ -18,11 +18,11 @@ import SettingsIcon from "../../assets/Images/Icon-setting-gray.png";
 function DashboardMenu() {
   return (
     <div className="dashboard-menu-container">
-      {DashboardMenuButton(Monitors, "Monitors")}
-      {DashboardMenuButton(Incidents, "Incidents")}
-      {DashboardMenuButton(SensorsIcon, "Status Pages")}
-      {DashboardMenuButton(AllInclusiveIcon, "Integrations")}
-      {DashboardMenuButton(SettingsIcon, "Settings")}
+      {DashboardMenuButton(Monitors, "Monitors", "/monitors")}
+      {DashboardMenuButton(Incidents, "Incidents", "/incidents")}
+      {DashboardMenuButton(SensorsIcon, "Status Pages", "/status")}
+      {DashboardMenuButton(AllInclusiveIcon, "Integrations", "/integrations")}
+      {DashboardMenuButton(SettingsIcon, "Settings", "/settings")}
     </div>
   );
 }

Client/src/Components/DashboardMenuButton/index.jsx

@@ -1,5 +1,6 @@
 import "./index.css";
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 /**
  * Renders a menu button with an icon and title.
@@ -10,11 +11,13 @@ import React, { useState } from "react";
  * @returns {React.ReactElement} The rendered menu button component.
  */
 
-const DashboardMenuButton = (icon, title) => {
+const DashboardMenuButton = (icon, title, to) => {
   const [isActive, setIsActive] = useState(false);
+  const navigate = useNavigate();
 
   const handleClick = () => {
     setIsActive(!isActive);
+    navigate(to);
   };
 
   return (

Client/src/Layouts/HomeLayout/index.css

@@ -1,11 +1,10 @@
 .home-layout {
-    display: flex;
-  }
-  
-  .main-content {
-    margin-left: 250px; 
-    flex: 1;
-    padding: 20px; 
-    overflow-y: auto; 
-  }
-  
+  display: flex;
+}
+
+.main-content {
+  margin-left: 250px;
+  flex: 1;
+  /* padding: 20px;  */
+  overflow-y: auto;
+}

Client/src/Pages/Monitors/index.css

@@ -1,6 +1,5 @@
 .monitors {
-  width: 90vw;
-  min-height: 100vh;
+  width: 70vw;
   padding: 4vw;
 }