LeftSideBar PinchLeftSideBar.tsx

80% Statements 4/5

100% Branches 0/0

50% Functions 1/2

80% Lines 4/5

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  
 
 
 
 
 
 
33x
9x
 
 
9x
 
 
 
 
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
  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";
 
export const PinchLeftSideBar = () => {
  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 (
    <>
      <ResizablePanel width={resizable.position}>
        <Separator orientation="vertical" />
        <OptionsSidebar />
      </ResizablePanel>
      <ResizableHandle
        isDragging={resizable.isDragging}
        {...resizable.separatorProps}
        id="left-sidebar-handle"
      />
    </>
  );
};