diff --git a/index.html b/index.html index 2ed5c62..4263ced 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + 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 9844e5c..00e2b10 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 d7a2e98..93943ad 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -59,15 +59,34 @@ const Sidebar = () => { transition: { damping: 40, }, - }, - }; + }; + // 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 ${open ? "block" : "hidden" - } `} + + className={`md:hidden fixed inset-0 overflow-hidden z-[998] bg-black/50 ${ + open ? "block" : "hidden" + } `} + >
{ 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" }} > -
+
{/* {
+
+
+
-
-