From f2a03c148bc0f9e4a018aeb3f4938d2d03a43d94 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 1 Jun 2024 14:29:54 -0700
Subject: [PATCH 1/2] Implemented the sidebar component and added it to the
 home layout screen.

---
 Client/src/Components/DashboardMenu/index.css | 33 +++++++++++--------
 .../src/Components/DashboardSidebar/index.css | 13 ++++++++
 .../src/Components/DashboardSidebar/index.jsx | 19 +++++++++++
 Client/src/Layouts/HomeLayout/index.css       | 12 ++++++-
 Client/src/Layouts/HomeLayout/index.jsx       | 30 ++++++++---------
 5 files changed, 75 insertions(+), 32 deletions(-)
 create mode 100644 Client/src/Components/DashboardSidebar/index.css
 create mode 100644 Client/src/Components/DashboardSidebar/index.jsx

diff --git a/Client/src/Components/DashboardMenu/index.css b/Client/src/Components/DashboardMenu/index.css
index 37c84655b..3c58afdb7 100644
--- a/Client/src/Components/DashboardMenu/index.css
+++ b/Client/src/Components/DashboardMenu/index.css
@@ -1,15 +1,20 @@
+.dashboard-menu-container {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
 .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
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.text-container {
+  display: flex;
+  align-items: center;
+}
+
+.dashboard-menu-text {
+  margin-left: 8px;
+}
diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css
new file mode 100644
index 000000000..83b0b349b
--- /dev/null
+++ b/Client/src/Components/DashboardSidebar/index.css
@@ -0,0 +1,13 @@
+.dashboard-sidebar {
+    height: 100vh;
+    width: 250px; 
+    background-color: #f4f4f4; 
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); 
+    position: fixed; 
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    padding-top: 60px; 
+  }
+  
\ No newline at end of file
diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/DashboardSidebar/index.jsx
new file mode 100644
index 000000000..d506256a3
--- /dev/null
+++ b/Client/src/Components/DashboardSidebar/index.jsx
@@ -0,0 +1,19 @@
+import DashboardMenu from '../../Components/DashboardMenu';
+import './index.css';
+
+/**
+ * @component
+ * DashboardSidebar component serves as a sidebar containing the DashboardMenu.
+ * 
+ * @returns {JSX.Element} The JSX element representing the DashboardSidebar component.
+ */
+
+function DashboardSidebar() {
+  return (
+    <div className="dashboard-sidebar">
+      <DashboardMenu />
+    </div>
+  );
+}
+
+export default DashboardSidebar;
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index d6a7f5707..3adc8ef22 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1 +1,11 @@
-/*Homelayout styles*/
\ No newline at end of file
+.home-layout {
+    display: flex;
+  }
+  
+  .main-content {
+    margin-left: 250px; 
+    flex: 1;
+    padding: 20px; 
+    overflow-y: auto; 
+  }
+  
\ No newline at end of file
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index ed1d06fe6..7f0615907 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -1,21 +1,17 @@
-import NavBar from '../../Components/NavBar'
-import { Outlet } from 'react-router'
-import Home from '../../Pages/Home'
-import './index.css'
-import ChartsOverviewDemo from '../../Components/DashboardProgressBars'
-import DashboardSettings from '../../Components/DashboardSettingsIcon'
-
+import NavBar from '../../Components/NavBar';
+import { Outlet } from 'react-router';
+import DashboardSidebar from '../../Components/DashboardSidebar';
+import './index.css';
 
 const HomeLayout = () => {
-    return (
-        <>
-            <NavBar />
-            <Home />
-            <Outlet />
-            <ChartsOverviewDemo />
-            <DashboardSettings />
-        </>
-    )
+  return (
+    <div className="home-layout">
+      <DashboardSidebar />
+      <div className="main-content">
+        <NavBar />
+      </div>
+    </div>
+  );
 }
 
-export default HomeLayout
\ No newline at end of file
+export default HomeLayout;

From fc65ce17ae47946255a8c5a52634b6840d15a1b6 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 1 Jun 2024 14:54:29 -0700
Subject: [PATCH 2/2] Added the support icon at the bottom of the sidebar.

---
 .../src/Components/DashboardSidebar/index.css | 22 +++++++++++++++++--
 .../src/Components/DashboardSidebar/index.jsx | 12 ++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css
index 83b0b349b..43af36fbd 100644
--- a/Client/src/Components/DashboardSidebar/index.css
+++ b/Client/src/Components/DashboardSidebar/index.css
@@ -1,13 +1,31 @@
 .dashboard-sidebar {
     height: 100vh;
     width: 250px; 
-    background-color: #f4f4f4; 
+    background-color: #f4f4f4;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); 
     position: fixed; 
     top: 0;
     left: 0;
     display: flex;
     flex-direction: column;
-    padding-top: 60px; 
+    justify-content: space-between; 
+    padding: 20px 0; 
+  }
+  
+  .menu-container {
+    margin-top: 60px; 
+  }
+  
+  .support-container {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    margin-bottom: 40px; 
+  }
+  
+  .support-text {
+    margin-left: 8px;
+    font-size: 16px; 
+    color: #333; 
   }
   
\ No newline at end of file
diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/DashboardSidebar/index.jsx
index d506256a3..846452dbc 100644
--- a/Client/src/Components/DashboardSidebar/index.jsx
+++ b/Client/src/Components/DashboardSidebar/index.jsx
@@ -1,9 +1,11 @@
 import DashboardMenu from '../../Components/DashboardMenu';
+import SupportIcon from '@mui/icons-material/Support'; 
+import SvgIcon from '@mui/material/SvgIcon';
 import './index.css';
 
 /**
  * @component
- * DashboardSidebar component serves as a sidebar containing the DashboardMenu.
+ * DashboardSidebar component serves as a sidebar containing the DashboardMenu and a Support icon at the bottom.
  * 
  * @returns {JSX.Element} The JSX element representing the DashboardSidebar component.
  */
@@ -11,7 +13,13 @@ import './index.css';
 function DashboardSidebar() {
   return (
     <div className="dashboard-sidebar">
-      <DashboardMenu />
+      <div className="menu-container">
+        <DashboardMenu />
+      </div>
+      <div className="support-container">
+        <SvgIcon component={SupportIcon} />
+        <span className="support-text">Support</span>
+      </div>
     </div>
   );
 }