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 | 37x 139x 139x 139x | import { Separator } from "@/ahuora-design-system/ui/separator";
import { OptionsSidebar } from "../../pinch-analysis/OptionsSidebar";
import ResizableHandle from "../ResizableHandle";
import { ResizablePanel } from "../Resizables";
import { useLocalStorage } from "usehooks-ts";
import { useResizable } from "react-resizable-layout";
import HENSidebarContent from "../../pinch-analysis/hen-generation/HENSidebar";
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"
/>
</>
}
</>
);
};
|