dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FEAT: Removed ScrollBar for SideBar

Browse Source
This commit is contained in:
EvanLin3141
2025-02-04 18:52:50 +00:00
parent b48d162d43
commit 4b9da0e946
5 changed files with 111 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Layout/Navbar.tsx
View File

@@ -73,17 +73,17 @@ const Navbar: React.FC<NavbarProps> = ({
{isLoggedIn && (
<>
<Button onClick={() => handleSideBar()}
<Button onClick={() => handleSideBar()}
extraClasses={`absolute ${
showSideBar ? `top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` :
"top-[75px] left-[20px]"
"top-[75px] left-[20px]"
} transition-all duration-300 z-[99]`}
>
<SidebarIcon className="h-15 w-15 mr-1" />
<SidebarIcon className="h-15 w-15 mr-1 z-[90]" />
</Button>
{showSideBar && <Sidebar extraClasses="h-screen"/>}
{showSideBar && <Sidebar scrollActiveSideBar={showSideBar} />}
</>
)}

97
frontend/src/components/Layout/Sidebar.tsx
View File

@@ -1,11 +1,102 @@
import React from "react";
import React, { useEffect, useState } from "react";
interface SideBarProps {
extraClasses?: string;
scrollActiveSideBar: boolean;
}
const Sidebar: React.FC<SideBarProps> = ( {extraClasses}) => {
return <div className={`${extraClasses} " fixed top-0 left-0 z-0 w-[250px] bg-gray-800 text-white p-4 z-[0]"`}></div>;
const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
useEffect(() => {
const sideBarScroll = () => {
document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
};
sideBarScroll()
return () => {
document.body.style.overflow = "unset";
};
}, [isCursorOnSidebar]);
return <div id="sidebar" className={"fixed top-0 left-0 w-[250px] bg-blue-400 text-white p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
onMouseEnter={() => setIsCursorOnSidebar(true)}
onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
<ul className="overflow-y-auto">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>;
};
export default Sidebar;