Skip to content

Fixed & UI Enhancement: Makes the Sidebar Sticky #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sandy088 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixed & UI Enhancement: Makes the Sidebar Sticky #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f323833
Fixed & UI Enhancement: Makes the Sidebar Sticky
sandy088 Oct 22, 2023
5aa911a
Merge branch 'main' into fixed-sidebar-scrolling-behaviour
sandy088 Oct 22, 2023
c7f40fa
Merge branch 'main' into fixed-sidebar-scrolling-behaviour
sandy088 Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/Logos & Favicon/CDC High Resolution Circle Logo Transparent Background.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<title> PyLibLog</title>
Expand Down
11 changes: 11 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,14 @@
.active {
@apply bg-blue-100 text-blue-600;
}

.sidebart {
position: fixed !important ;
}


@media (max-width: 768px) {
body {
overflow: auto;
}
}
9 changes: 6 additions & 3 deletions src/layouts/RootLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ import Sidebar from "./sidebar";

function RootLayout({ children }) {
return (
<div className="flex h-screen">
<Sidebar />
<main className="flex-1 mx-auto overflow-y-auto">{children}</main>

<div className="flex relative">
<div className="fixed z-[400] lg:w-[19rem] max-h-screen overflow-hidden scrollbar-none">
<Sidebar />
</div>
<main className="lg:ml-[19rem] flex-1 ">{children}</main>
</div>
);
}
Expand Down
40 changes: 30 additions & 10 deletions src/layouts/sidebar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,26 +59,45 @@ 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 (
<div>
<div className=" relative">
<div
onClick={() => 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"
} `}

></div>
<motion.div
ref={sidebarRef}
variants={Nav_animation}
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" }}
>
<div className="flex-col pt-5 pl-5 pr-5 gap-2.5 font-medium border-b h-[150px] border-slate-300 bg-[#8800ff]">
<div className=" flex-col pt-5 pl-5 pr-5 gap-2.5 font-medium border-b h-[150px] border-slate-300 bg-[#8800ff]">
{/* <img
src="https://img.icons8.com/color/512/firebase.png"
width={45}
Expand All @@ -95,9 +114,10 @@ const Sidebar = () => {
<Search />
</div>

<div className="my-3"></div>
<div className="flex flex-col ">
<div className="flex justify-center items-center mt-3">

<div className="flex flex-col h-full">
<div className="flex justify-center items-center my-3">
<Link to="/play-ground">
<button className="px-5 py-1 bg-[#8800ff] rounded text-white text-[16px]">
Python PlayGround
Expand Down Expand Up @@ -166,7 +186,7 @@ const Sidebar = () => {

</motion.div>
</motion.div>
<div className="m-3 md:hidden " onClick={() => setOpen(true)}>
<div className="m-3 md:hidden" onClick={() => setOpen(true)}>
<MdMenu size={25} />
</div>
</div>
Expand Down