Implemented flexbox styling for root layout

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;

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 {

Client/src/Components/NavBar/index.jsx

@@ -49,7 +49,7 @@ function NavBar() {
 
   return (
     <AppBar
-      position="fixed"
+      position="sticky"
       sx={{
         width: "100%",
         backgroundColor: "white",

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;
 }

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>
   );
 };

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 {