ADD: collapse-button

src/components/TransactionSidebar.vue

 <script setup lang="ts">
 const providerRef = useTemplateRef('providerRef')
 defineExpose({ providerRef })
+
 const actions = ref([
   {
     id: 0,
@@ -40,12 +41,19 @@ function clearList() {
     <SidebarInset>
       <slot />
     </SidebarInset>
-    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem">
-      <SidebarHeader mt-topbar text-center>
+    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem;">
+      <SidebarHeader mt-1 text-center>
         Planned Actions
       </SidebarHeader>
       <SidebarSeparator />
       <SidebarContent>
+        <SidebarGroup>
+          <Button variant="secondary" bg-background @click="providerRef?.toggleSidebar()">
+            Collapse
+            <IconTooling />
+          </Button>
+        </SidebarGroup>
+        <SidebarSeparator />
         <SidebarGroup class="m-b-2 m-t-2 flex flex-row justify-center">
           <Button variant="outline" w="1/8" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
             <IconTooling />
@@ -54,7 +62,7 @@ function clearList() {
             <IconTooling />
           </Button>
         </SidebarGroup>
-        <SidebarSeparator/>
+        <SidebarSeparator />
         <SidebarGroup class="m-b-2 flex flex-row justify-center">
           <div flex flex-row justify-center>
             <Button variant="outline" w-8rem rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none @click="clearList()">
@@ -81,8 +89,7 @@ function clearList() {
         <SidebarSeparator />
         <SidebarGroup>
           <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
-            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
-            </DragAndDropItem>
+            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions" />
           </DragAndDrop>
         </SidebarGroup>
       </SidebarContent>