From f323833f034642bc8ad75ed7ee45d386ef9da21d Mon Sep 17 00:00:00 2001 From: Sandeep Date: Sun, 22 Oct 2023 17:23:41 +0530 Subject: [PATCH 1/3] Fixed & UI Enhancement: Makes the Sidebar Sticky --- index.html | 3 ++- src/index.css | 11 +++++++++++ src/layouts/RootLayout.jsx | 9 ++++++--- src/layouts/sidebar/index.jsx | 29 ++++++++++++++++++++++------- 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1031ac5..235d89c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - + + PyLibLog diff --git a/src/index.css b/src/index.css index 1a907e1..ed1f333 100644 --- a/src/index.css +++ b/src/index.css @@ -25,3 +25,14 @@ .active { @apply bg-blue-100 text-blue-600; } + +.sidebart { + position: fixed !important ; +} + + +@media (max-width: 768px) { + body { + overflow: auto; + } +} diff --git a/src/layouts/RootLayout.jsx b/src/layouts/RootLayout.jsx index d247249..2c34072 100644 --- a/src/layouts/RootLayout.jsx +++ b/src/layouts/RootLayout.jsx @@ -2,9 +2,12 @@ import Sidebar from "./sidebar"; function RootLayout({ children }) { return ( -
- -
{children}
+
+
+ +
+ +
{children}
); } diff --git a/src/layouts/sidebar/index.jsx b/src/layouts/sidebar/index.jsx index c0bc717..c523e1d 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -70,12 +70,27 @@ const Sidebar = () => { }; // subMenusList.map(menu => { // console.log(menu); - // }) + // }) + + useEffect(() => { + if (window.innerWidth <= 768) { + if (open) { + document.body.style.overflow = "hidden"; // Disable scrolling on the body + } else { + document.body.style.overflow = "auto"; // Enable scrolling on the body + } + + return () => { + document.body.style.overflow = "auto"; // Ensure scrolling is re-enabled on unmount + }; + } + }, [open]); + return ( -
+
setOpen(false)} - className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${ + className={`md:hidden fixed inset-0 overflow-hidden z-[998] bg-black/50 ${ open ? "block" : "hidden" } `} >
@@ -85,10 +100,10 @@ const Sidebar = () => { initial={{ x: isTabletMid ? -250 : 0 }} animate={open ? "open" : "closed"} // sidebar color code (#E0E0E0) - className="border-r border-[#BFC9CA] shadow-lg bg-[#EAEDED] text-black text-[16px] shadow-xl z-[999] max-w-[19rem] w-[19rem] overflow-hidden md:relative fixed h-screen" + className="border-r border-[#BFC9CA] bg-[#EAEDED] text-black text-[16px] shadow-xl z-[999] max-w-[19rem] w-[19rem] md:relative overflow-y-scroll scrollbar-thin fixed h-screen" style={{ fontFamily: "Poppins, sans-serif", fontWeight: "light" }} > -
+
{/* {
-
+