From 83f260c42d66bc29aac8a4b031d8761fe624818e Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 18 Jun 2024 19:17:21 -0400
Subject: [PATCH] Implemented flexbox styling for root layout

---
 Client/src/App.css                               |  7 -------
 Client/src/Components/DashboardSidebar/index.css | 16 ++++++++--------
 Client/src/Components/NavBar/index.jsx           |  2 +-
 Client/src/Layouts/HomeLayout/index.css          | 13 ++++++++-----
 Client/src/Layouts/HomeLayout/index.jsx          |  6 +++---
 Client/src/index.css                             |  4 +---
 6 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/Client/src/App.css b/Client/src/App.css
index b9d355df2..0d669ffa5 100644
--- a/Client/src/App.css
+++ b/Client/src/App.css
@@ -1,10 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;
diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css
index d53e02409..d666aa63e 100644
--- a/Client/src/Components/DashboardSidebar/index.css
+++ b/Client/src/Components/DashboardSidebar/index.css
@@ -1,19 +1,19 @@
 .dashboard-sidebar {
-  height: 100vh;
+  height: calc(100vh - 64px);
   width: 250px;
   border: 1px solid var(--color-border-0);
-  border-radius: var(--border-radius-0);
-  position: fixed;
-  top: 0;
-  left: 0;
+  border-top: none;
+  border-bottom: none;
+  top: 64px;
+  position: sticky;
+  z-index: 100;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20px 0;
 }
 
-.menu-container {
-  margin-top: 60px;
+.dashboard-menu-container{
+  padding-top: 40px;
 }
 
 .support-container {
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index c0cb00ddc..68ad9fb55 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -49,7 +49,7 @@ function NavBar() {
 
   return (
     <AppBar
-      position="fixed"
+      position="sticky"
       sx={{
         width: "100%",
         backgroundColor: "white",
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 1280fb080..c9faf48d4 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,10 +1,13 @@
-.home-layout {
+.main-content {
+  position: relative;
   display: flex;
+  width: 100%;
+  height: max-content;
+  justify-content: flex-start;
 }
 
-.main-content {
-  margin-left: 250px;
-  flex: 1;
-  /* padding: 20px;  */
+.main-content>div:nth-child(2){
+  position: relative;
   overflow-y: auto;
+  flex: 1;
 }
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index 963c0d0a7..a7f7ce9df 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -12,17 +12,17 @@ const HomeLayout = () => {
   const { user, msg } = authState;
   return (
     <div className="home-layout">
-      <DashboardSidebar />
+      <NavBar />
       <div className="main-content">
-        <NavBar />
+        <DashboardSidebar />
         {/* Remove me later */}
         {user && <p>{user.firstname}</p>}
         {user && <p>{user.lastname}</p>}
         {user && <p>{user.email}</p>}
         {msg && <p>Msg: {msg}</p>}
         {/* I am a demo */}
+        <Outlet />
       </div>
-      <Outlet />
     </div>
   );
 };
diff --git a/Client/src/index.css b/Client/src/index.css
index 092992f09..907fe8e6e 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -69,10 +69,8 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  height: 100%;
 }
 
 h1 {