recreations and fixes

Client/src/Components/DashboardMenuButton/index.css

@@ -0,0 +1,23 @@
+.icon-container {
+  padding: 8px 15px;
+}
+
+.icon-container:hover {
+  background-color: var(--env-var-color-13);
+  border-radius: var(--env-var-radius-1);
+  cursor: pointer;
+}
+
+.icon-container.active {
+  background-color: var(--env-var-color-13);
+  border-radius: var(--env-var-radius-1);
+}
+
+.icon {
+  width: var(--env-var-img-width-1);
+}
+
+.dashboard-menu-text {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-12);
+}

Client/src/Components/DashboardMenuButton/index.jsx

@@ -0,0 +1,33 @@
+import "./index.css";
+import React, { useState } from "react";
+
+/**
+ * Renders a menu button with an icon and title.
+ *
+ * @component
+ * @param {React.ElementType} icon - The icon component to be rendered.
+ * @param {string} title - The title of the menu button.
+ * @returns {React.ReactElement} The rendered menu button component.
+ */
+
+const DashboardMenuButton = (icon, title) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleClick = () => {
+    setIsActive(!isActive);
+  };
+
+  return (
+    <div
+      className={`icon-container ${isActive ? "active" : ""}`}
+      onClick={handleClick}
+    >
+      <img className="icon" src={icon} alt="Monitors" />
+      <div className="text-container">
+        <span className="dashboard-menu-text">{title}</span>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardMenuButton;