Skip to content

Instantly share code, notes, and snippets.

@ambrizals
Last active October 7, 2022 05:52
Show Gist options
  • Save ambrizals/b9975e71e67276f55783ff9b253535b7 to your computer and use it in GitHub Desktop.
Save ambrizals/b9975e71e67276f55783ff9b253535b7 to your computer and use it in GitHub Desktop.
Resizable Sidebar
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