Fix Sidebar Button being left behind when collapsed (#1441)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Fix a bug where closing the sidebar then navigating to another pipeline results in the sidebar icon being detached from the sidebar.


Side note: The `Sidebar` component and associated provider etc needs cleaning up. Are we actually intending to use this or do our own custom thing?

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->
Closes Shopify/oasis-frontend#365

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/ReactFlow/FlowSidebar/FlowSidebar.tsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
-
 import {
   Sidebar,
   SidebarContent,
   SidebarTrigger,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 
@@ -12,19 +11,19 @@ import GraphComponents from "./sections/GraphComponents";
 import RunsAndSubmission from "./sections/RunsAndSubmission";
 
 const FlowSidebar = () => {
-  const [isOpen, setIsOpen] = useState(true);
+  const { open, setOpen } = useSidebar();
 
   const sidebarTriggerClasses = cn(
     "absolute top-[65px] z-1 transition-all duration-300 bg-white mt-8 rounded-r-md shadow-md p-0.5 pr-1",
-    isOpen ? "left-[255px]" : "left-[47px]",
+    open ? "left-[255px]" : "left-[47px]",
   );
 
   return (
     <>
       <div className={sidebarTriggerClasses}>
         <SidebarTrigger
           className="text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => setOpen(!open)}
         />
       </div>
       <Sidebar
@@ -33,9 +32,9 @@ const FlowSidebar = () => {
         collapsible="icon"
       >
         <SidebarContent className="gap-0! m-0! p-0!">
-          <FileActions isOpen={isOpen} />
-          <RunsAndSubmission isOpen={isOpen} />
-          <GraphComponents isOpen={isOpen} />
+          <FileActions isOpen={open} />
+          <RunsAndSubmission isOpen={open} />
+          <GraphComponents isOpen={open} />
         </SidebarContent>
       </Sidebar>
     </>