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

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;