From e6b0b9b2ca9f0fff397c7a4a54d28f9b0ebeb27c Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 13 May 2024 16:12:20 -0700 Subject: [PATCH 1/2] Implemented the Dashboard Menu. --- Client/package-lock.json | 8 +-- Client/package.json | 2 +- Client/src/Components/DashboardMenu/index.css | 15 +++++ Client/src/Components/DashboardMenu/index.jsx | 57 +++++++++++++++++++ Client/src/Pages/Home/index.jsx | 2 + 5 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 Client/src/Components/DashboardMenu/index.css create mode 100644 Client/src/Components/DashboardMenu/index.jsx diff --git a/Client/package-lock.json b/Client/package-lock.json index 79ac309a3..2ad129bd4 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -11,7 +11,7 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fontsource/roboto": "^5.0.13", - "@mui/icons-material": "^5.15.16", + "@mui/icons-material": "^5.15.17", "@mui/material": "^5.15.16", "@mui/x-data-grid": "7.3.2", "@mui/x-date-pickers": "7.3.2", @@ -1127,9 +1127,9 @@ } }, "node_modules/@mui/icons-material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz", - "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==", + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.17.tgz", + "integrity": "sha512-xVzl2De7IY36s/keHX45YMiCpsIx3mNv2xwDgtBkRSnZQtVk+Gqufwj1ktUxEyjzEhBl0+PiNJqYC31C+n1n6A==", "dependencies": { "@babel/runtime": "^7.23.9" }, diff --git a/Client/package.json b/Client/package.json index 7d5c47a8d..cca88fb31 100644 --- a/Client/package.json +++ b/Client/package.json @@ -13,7 +13,7 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fontsource/roboto": "^5.0.13", - "@mui/icons-material": "^5.15.16", + "@mui/icons-material": "^5.15.17", "@mui/material": "^5.15.16", "@mui/x-data-grid": "7.3.2", "@mui/x-date-pickers": "7.3.2", diff --git a/Client/src/Components/DashboardMenu/index.css b/Client/src/Components/DashboardMenu/index.css new file mode 100644 index 000000000..37c84655b --- /dev/null +++ b/Client/src/Components/DashboardMenu/index.css @@ -0,0 +1,15 @@ +.icon-container { + display: flex; + align-items: center; + margin-bottom: 12px; + } + + .text-container { + display: flex; + align-items: center; + } + + .dashboard-menu-text { + margin-left: 8px; + } + \ No newline at end of file diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/DashboardMenu/index.jsx new file mode 100644 index 000000000..70fe3511f --- /dev/null +++ b/Client/src/Components/DashboardMenu/index.jsx @@ -0,0 +1,57 @@ +import language from '@mui/icons-material/language'; +import report_gmailerrorred from '@mui/icons-material/reportGmailerrorred'; +import sensors from '@mui/icons-material/sensors'; +import settings from '@mui/icons-material/settings'; +import all_inclusive from '@mui/icons-material/AllInclusive'; +import SvgIcon from '@mui/material/SvgIcon'; +import './index.css'; + +/** + * DashboardMenu component displays a menu with icons and corresponding text. + * Each menu item consists of an icon and a text label. + * + * @returns {JSX.Element} The JSX element representing the DashboardMenu component. + */ + +function DashboardMenu() { + return ( +
+
+ +
+ Monitors +
+
+ +
+ +
+ Incidents +
+
+ +
+ +
+ Status Pages +
+
+ +
+ +
+ Integrations +
+
+ +
+ +
+ Settings +
+
+
+ ); +} + +export default DashboardMenu; diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx index 8742da6f1..ff5cb454e 100644 --- a/Client/src/Pages/Home/index.jsx +++ b/Client/src/Pages/Home/index.jsx @@ -1,6 +1,7 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember"; import Search from "../../Components/Search"; import "./index.css"; +import DashboardMenu from "../../Components/DashboardMenu"; const Home = () => { return ( @@ -8,6 +9,7 @@ const Home = () => {
Home
+ ); }; From 3ff8c65eb5125ad5c1a7f312b55565c73c18ccbc Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 14 May 2024 10:00:52 -0700 Subject: [PATCH 2/2] Addressed comments. --- Client/src/Components/DashboardMenu/index.jsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/DashboardMenu/index.jsx index 70fe3511f..716d68497 100644 --- a/Client/src/Components/DashboardMenu/index.jsx +++ b/Client/src/Components/DashboardMenu/index.jsx @@ -1,12 +1,13 @@ -import language from '@mui/icons-material/language'; -import report_gmailerrorred from '@mui/icons-material/reportGmailerrorred'; -import sensors from '@mui/icons-material/sensors'; -import settings from '@mui/icons-material/settings'; -import all_inclusive from '@mui/icons-material/AllInclusive'; +import LanguageIcon from "@mui/icons-material/Language"; +import ReportGmailerrorredIcon from "@mui/icons-material/ReportGmailerrorred"; +import SensorsIcon from "@mui/icons-material/Sensors"; +import SettingsIcon from "@mui/icons-material/Settings"; +import AllInclusiveIcon from "@mui/icons-material/AllInclusive"; import SvgIcon from '@mui/material/SvgIcon'; import './index.css'; /** + * @component * DashboardMenu component displays a menu with icons and corresponding text. * Each menu item consists of an icon and a text label. * @@ -17,35 +18,35 @@ function DashboardMenu() { return (
- +
Monitors
- +
Incidents
- +
Status Pages
- +
Integrations
- +
Settings