Merge pull request #38 from AnWhiteM/sidebar

sidebar fix

Author: AnWhiteM

src/components/HomePage/HomePage.jsx

@@ -4,7 +4,6 @@ import Header from "../Header/Header";
 import { ScreensPage } from "../ScreensPage/ScreensPage";
 import { Toaster } from "react-hot-toast";
 import { useState, useEffect } from "react";
-import clsx from "clsx";
 
 export const HomePage = () => {
   const [sideBarOpen, setSideBarOpen] = useState(false);
@@ -36,21 +35,26 @@ export const HomePage = () => {
   return (
     <>
       <div className={css.container}>
-        {(screenSize.width >= 1440 || sideBarOpen) && (
+        {screenSize.width >= 1440 && (
           <div className={css.sideB}>
             <SideBar />
           </div>
         )}
 
         <div className={css.mainCont}>
-          {sideBarOpen && (
-            <div className={css.overlay} onClick={closeSideBar}></div>
+          {screenSize.width < 1440 && sideBarOpen && (
+            <>
+              <div className={css.overlay} onClick={closeSideBar}></div>
+              <div className={css.sideBfixed}>
+                <SideBar />
+              </div>
+            </>
           )}
           <div>
             <Header openSideBar={openSideBar} sideBarOpen={sideBarOpen} />
           </div>
           <div>
-            <ScreensPage />
+            <ScreensPage className={css.screen} />
           </div>
         </div>
         <Toaster position="top-right" />

src/components/HomePage/HomePage.module.css

@@ -3,16 +3,28 @@
   height: 100vh;
   max-width: 100%;
   max-height: 100%;
+  position: relative;
 }
 
 .sideB {
-  flex-shrink: 0;
+  width: 225px;
+}
+
+.sideBfixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 225px;
 }
 
 .mainCont {
   width: 100%;
   position: relative;
-  /* z-index: 1; */
+}
+
+.screen {
+  flex-shrink: 0;
 }
 
 .overlay {
@@ -22,11 +34,11 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  /* z-index: 2; */
 }
 
 @media screen and (min-width: 1440px) {
-  .sideB {
+  .sideB,
+  .sideBfixed {
     width: 260px;
   }
 }