105 lines
2.2 KiB
TypeScript
105 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import "../../assets/styles/sidebar.css"
|
|
|
|
interface SideBarProps {
|
|
extraClasses?: string;
|
|
scrollActiveSideBar: boolean;
|
|
}
|
|
|
|
const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
|
|
const [thisTheme, setThisTheme] = useState(false);
|
|
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 bg-[var(--sideNav-LightBG)] w-[250px] text-sideBar-text 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;
|