Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 49x 147x 147x 147x | import { useResizable } from "react-resizable-layout";
import { useLocalStorage } from "usehooks-ts";
import { Separator } from "@/ahuora-design-system/ui/separator";
import HENSidebarContent from "../../pinch-analysis/hen-generation/HENSidebar";
import { OptionsSidebar } from "../../pinch-analysis/OptionsSidebar";
import ResizableHandle from "../ResizableHandle";
import { ResizablePanel } from "../Resizables";
export const PinchLeftSideBar = ({ tab }: { tab: string }) => {
const [size, setSize] = useLocalStorage("panelsize", 370);
// This is pretty much the same as flowsheetPage, not sure if it's worth extracting into a hook though as we might change it later.
const resizable = useResizable({
axis: "x",
initial: size,
min: 270,
max: 1200,
onResizeEnd: ({ position }) => setSize(position),
});
return (
<>
{tab === "hens" ? (
<>
<ResizablePanel width={resizable.position}>
<Separator orientation="vertical" />
<HENSidebarContent />
</ResizablePanel>
<ResizableHandle
isDragging={resizable.isDragging}
{...resizable.separatorProps}
id="left-sidebar-handle"
/>
</>
) : (
<>
<ResizablePanel width={resizable.position}>
<Separator orientation="vertical" />
<OptionsSidebar />
</ResizablePanel>
<ResizableHandle
isDragging={resizable.isDragging}
{...resizable.separatorProps}
id="left-sidebar-handle"
/>
</>
)}
</>
);
};
|