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>

src/components/ui/drag-and-drop/DragAndDropItem.vue

@@ -46,7 +46,6 @@ const onDrop = (evt: DragEvent, anotherItem: Item) => {
     w-86 h-40 m-t-2 m-b-2 rounded-0.5rem flex flex-col items-center p-4 border-1.5 border-black-500 bg-background>
         <div class="w-100% flex flex-row justify-between">
             <div class=" w-60%  flex flex-row justify-between items-center">
-                <Checkbox></Checkbox>
                 <h1>{{ props.item.title }}</h1>
             </div>
             <div>