diff --git a/src/components/TransactionSidebar.vue b/src/components/TransactionSidebar.vue index a6fd73e4f8037dd7cdff55074039487680546b4f..65a90bca719f7184e67f6702d8f114f3692513ad 100644 --- a/src/components/TransactionSidebar.vue +++ b/src/components/TransactionSidebar.vue @@ -1,6 +1,7 @@ <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>