103 lines
3.7 KiB
JavaScript
103 lines
3.7 KiB
JavaScript
import { useEffect, useRef, useMemo, useState } from "react";
|
|
|
|
import { CloseCircleFilled } from "@ant-design/icons";
|
|
|
|
|
|
function Sidebar({tabs}){
|
|
|
|
const sideBarRef = useRef()
|
|
const sideBarExtraRef = useRef()
|
|
|
|
const [activeTab, setActiveTab] = useState(-1) // -1 indicates no active tabs
|
|
const [hoverIndex, setHoverIndex] = useState(-1) // -1 indicates no active tabs
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
|
|
const sidebarTabs = useMemo(() => tabs, [tabs])
|
|
|
|
useEffect(() => {
|
|
|
|
}, [sideBarRef, sideBarExtraRef, sidebarOpen])
|
|
|
|
const openSidebar = () => {
|
|
|
|
sideBarRef.current?.classList.add("tw-w-[400px]")
|
|
sideBarRef.current?.classList.remove("tw-w-[80px]")
|
|
|
|
setSidebarOpen(true)
|
|
}
|
|
|
|
const closeSidebar = () => {
|
|
sideBarRef.current?.classList.add("tw-w-[80px]")
|
|
sideBarRef.current?.classList.remove("tw-w-[400px]")
|
|
setSidebarOpen(false)
|
|
setActiveTab(-1)
|
|
setHoverIndex(-1)
|
|
}
|
|
|
|
const hideOnMouseLeave = () => {
|
|
|
|
if (activeTab === -1){
|
|
closeSidebar()
|
|
}
|
|
|
|
}
|
|
|
|
return (
|
|
<div className={`tw-relative tw-duration-[0.3s] tw-transition-all
|
|
tw-max-w-[400px] tw-flex tw-h-full tw-z-10
|
|
${sidebarOpen ? "tw-bg-white tw-min-w-[400px] tw-w-[400px] tw-shadow-lg":
|
|
"tw-bg-primaryBg tw-min-w-[80px] tw-w-[80px]"}
|
|
`}
|
|
ref={sideBarRef}
|
|
onMouseLeave={hideOnMouseLeave}
|
|
>
|
|
|
|
|
|
<div className="tw-min-w-[80px] tw-w-[80px] tw-h-full tw-flex tw-flex-col tw-gap-4 tw-p-3 tw-place-items-center">
|
|
{
|
|
sidebarTabs.map((tab, index) => {
|
|
return (
|
|
<div className={`${activeTab === index ? "tw-text-blue-400 " : "tw-text-gray-600"} tw-cursor-pointer
|
|
hover:tw-text-blue-400 tw-flex tw-flex-col tw-gap-2 tw-place-items-center`}
|
|
key={tab.name}
|
|
onMouseEnter={() => {
|
|
openSidebar()
|
|
setHoverIndex(index)
|
|
}}
|
|
onClick={() => {
|
|
setActiveTab(index)
|
|
}}
|
|
>
|
|
<div className="tw-bg-white tw-shadow-lg tw-p-2 tw-rounded-md">
|
|
{tab.icon}
|
|
</div>
|
|
<span className="tw-text-[12px] ">{tab.name}</span>
|
|
</div>
|
|
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<div className="tw-w-full tw-h-full tw-bg-inherit tw-flex tw-flex-col tw-overflow-x-hidden" ref={sideBarExtraRef}>
|
|
<div className="tw-w-full tw-h-[50px] tw-flex tw-place-content-end tw-p-1">
|
|
<button className="tw-outline-none tw-bg-transparent tw-border-none tw-text-gray-600 tw-cursor-pointer tw-text-xl"
|
|
onClick={closeSidebar}
|
|
>
|
|
<CloseCircleFilled />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="tw-flex tw-w-full tw-h-full tw-max-h-full tw-overflow-y-auto">
|
|
{(activeTab > -1 || hoverIndex > -1) && tabs[activeTab > -1 ? activeTab : hoverIndex].content}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
|
|
export default Sidebar; |