From 551fa4de8125a298ae478e7bf152808bb62ace8a Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Fri, 7 Jun 2024 13:20:07 +0330
Subject: [PATCH] Routing using useNavigate

---
 Client/src/Components/DashboardMenu/index.jsx | 10 +++++-----
 .../Components/DashboardMenuButton/index.jsx  |  5 ++++-
 Client/src/Layouts/HomeLayout/index.css       | 19 +++++++++----------
 Client/src/Pages/Monitors/index.css           |  3 +--
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/DashboardMenu/index.jsx
index b885f722a..2d52139ff 100644
--- a/Client/src/Components/DashboardMenu/index.jsx
+++ b/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>
   );
 }
diff --git a/Client/src/Components/DashboardMenuButton/index.jsx b/Client/src/Components/DashboardMenuButton/index.jsx
index 82e427696..a8bc5ccdf 100644
--- a/Client/src/Components/DashboardMenuButton/index.jsx
+++ b/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 (
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 3adc8ef22..1280fb080 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/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; 
-  }
-  
\ No newline at end of file
+  display: flex;
+}
+
+.main-content {
+  margin-left: 250px;
+  flex: 1;
+  /* padding: 20px;  */
+  overflow-y: auto;
+}
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index eab5fbb7d..d6d272e7c 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,6 +1,5 @@
 .monitors {
-  width: 90vw;
-  min-height: 100vh;
+  width: 70vw;
   padding: 4vw;
 }