Last active
October 7, 2022 05:52
-
-
Save ambrizals/b9975e71e67276f55783ff9b253535b7 to your computer and use it in GitHub Desktop.
Resizable Sidebar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Button } from "antd"; | |
import { FC, useState } from "react"; | |
import { VscClose, VscRefresh } from "react-icons/vsc"; | |
import { ButtonIconWrapper } from "../components/button_icon_wrapper"; | |
import { NoData } from "../components/no_data"; | |
// https://codepen.io/lukerazor/pen/GVBMZK | |
export const BonPage: FC = () => { | |
const [listDragging, setListDragging] = useState<boolean>(false); | |
const [leftWidth, setLeftWidth] = useState(400); | |
const dragResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { | |
if (listDragging) { | |
const root = document.getElementById("root"); | |
const page = document.getElementById("page"); | |
if (page && root) { | |
const finalWidthDiff = root.clientWidth - page.clientWidth; | |
const sizeSidebar = e.clientX - finalWidthDiff; | |
if (e.clientX > finalWidthDiff) { | |
if (sizeSidebar > 400 && sizeSidebar < 700) { | |
setLeftWidth(e.clientX - finalWidthDiff); | |
} | |
} | |
} | |
} | |
}; | |
return ( | |
<div | |
className="tw-flex-1 tw-flex" | |
onMouseUp={() => setListDragging(false)} | |
onMouseMove={dragResize} | |
id="page" | |
> | |
<div | |
className="tw-border-r tw-select-none" | |
id="listkonten" | |
style={{ width: leftWidth }} | |
> | |
<div className="tw-flex tw-flex-col tw-border-b tw-px-4 tw-py-2"> | |
<div className="tw-mb-1 tw-flex tw-justify-between tw-items-center"> | |
<div className="tw-font-bold">Daftar Bon</div> | |
<div className="tw-flex"> | |
<Button | |
size="small" | |
icon={<ButtonIconWrapper icon={<VscRefresh />} />} | |
/> | |
</div> | |
</div> | |
<div className="tw-flex tw-overflow-x-auto custom-scrollbar"> | |
<Button icon={<ButtonIconWrapper icon={<VscClose />} />} /> | |
<div className="tw-w-1 tw-shrink-0" /> | |
<Button>Pilih Karyawan</Button> | |
<div className="tw-w-1 tw-shrink-0" /> | |
<Button>Pilih Tanggal</Button> | |
<div className="tw-w-1 tw-shrink-0" /> | |
<Button>Pilih Status</Button> | |
</div> | |
</div> | |
</div> | |
<div | |
className="tw-w-1 tw-bg-gray-300 hover:tw-shadow-lg hover:tw-bg-slate-500 tw-cursor-ew-resize" | |
onMouseDown={() => setListDragging(true)} | |
onMouseUp={() => setListDragging(false)} | |
/> | |
<div className="tw-flex-1"> | |
<NoData className="tw-h-full" /> | |
</div> | |
</div> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment