Resizable Sidebar

contoh.tsx

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>
  );
};