diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index 048700db6..28b4dd0f8 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -1,55 +1,36 @@ -.home-layout { - display: grid; - position: relative; - grid-template-areas: - "aside header" - "aside main"; - grid-template-columns: var(--env-var-side-bar-width) auto; - grid-template-rows: var(--env-var-nav-bar-height) auto; +#root:has(.home-layout) { background-color: var(--env-var-color-30); +} + +.home-layout { + display: flex; + position: relative; + gap: var(--env-var-spacing-2); min-height: 100vh; + max-width: 1400px; + margin: 0 auto; + padding: var(--env-var-spacing-2); } .home-layout aside { - grid-area: aside; - position: fixed; - top: 0; - height: 100%; - width: var(--env-var-side-bar-width); + position: sticky; + top: var(--env-var-spacing-2); + left: 0; + + height: calc(100vh - var(--env-var-spacing-2) * 2); + max-width: var(--env-var-side-bar-width); + flex: 1; + + border: 1px solid var(--color-border-0); + border-radius: var(--env-var-radius-1); background-color: var(--env-var-color-8); - border-right: 1px solid var(--color-border-0); + padding: var(--env-var-spacing-1) var(--env-var-spacing-1-plus); } -.home-layout header { - grid-area: header; - background-color: var(--env-var-color-30); -} + .home-layout > div { - height: 100%; - grid-area: main; - padding: var(--env-var-spacing-2) calc(var(--env-var-spacing-4) * 2); - padding-bottom: var(--env-var-spacing-4); - max-width: 100%; -} -.home-layout > div:not(:has([class*="fallback"])) { - max-width: 1500px; -} - -@media (max-width: 600px) { - .home-layout { - grid-template-areas: - "header header" - "main main"; - grid-template-columns: 1fr; - grid-template-rows: 64px auto; - } - - aside { - display: none; - visibility: hidden; - } - - .home-layout > div { - padding: var(--env-var-spacing-1); - } + min-height: calc(100vh - var(--env-var-spacing-2) * 2); + padding-top: var(--env-var-spacing-4); + width: 100%; + flex: 1; } diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx index 007fb7d05..81cb2fd9c 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -1,4 +1,3 @@ -import NavBar from "../../Components/NavBar"; import Sidebar from "../../Components/Sidebar"; import { Outlet } from "react-router"; import { Box } from "@mui/material"; @@ -9,7 +8,6 @@ const HomeLayout = () => { return ( - ); diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index e56be39b2..5a37ecb49 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -250,7 +250,10 @@ const Monitors = () => { justifyContent="space-between" alignItems="center" > - + Hello, {authState.user.firstName} {monitorState.monitors?.length !== 0 && ( @@ -299,7 +302,8 @@ const Monitors = () => {