UPD: DragAndDrop-Components added

src/components/TransactionSidebar.vue

+<script setup lang="ts">
+const actions = ref([
+  {
+    id: 0,
+    title: 'Action 1',
+    description: 'to action 1',
+    position: 0,
+  },
+  {
+    id: 1,
+    title: 'Action 2',
+    description: 'to action 2',
+    position: 1,
+  },
+  {
+    id: 2,
+    title: 'Action 3',
+    description: 'to action 3',
+    position: 2,
+  },
+  {
+    id: 3,
+    title: 'Action 4',
+    description: 'to action 4',
+    position: 3,
+  },
+])
+
+const emptyListPhrase = 'No actions planned'
+
+function clearList() {
+  actions.value = []
+}
+</script>
+
 <template>
   <SidebarProvider cookie-name="transaction-sidebar">
     <SidebarInset>
       <slot />
     </SidebarInset>
-    <Sidebar collapsible="icon" side="right">
-      <SidebarHeader mt-topbar>
-        Placeholder
+    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem">
+      <SidebarHeader mt-topbar text-center>
+        Planned Actions
       </SidebarHeader>
+      <SidebarSeparator />
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Platform</SidebarGroupLabel>
-          <SidebarMenu />
+        <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 />
+          </Button>
+          <Button variant="outline" w="1/8" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+            <IconTooling />
+          </Button>
         </SidebarGroup>
-        <SidebarGroup class="group-data-[collapsible=icon]:hidden">
-          <SidebarGroupLabel>Projects</SidebarGroupLabel>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton as-child>
-                Sample Text
-              </SidebarMenuButton>
-              <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuAction show-on-hover>
-                    <MoreHorizontal />
-                    <span class="sr-only">More</span>
-                  </SidebarMenuAction>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
-                  <DropdownMenuItem>
-                    <Folder class="text-muted-foreground" />
-                    <span>View Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Forward class="text-muted-foreground" />
-                    <span>Share Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <Trash2 class="text-muted-foreground" />
-                    <span>Delete Project</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton class="text-sidebar-foreground/70">
-                <MoreHorizontal class="text-sidebar-foreground/70" />
-                <span>More</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
+        <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()">
+              Clear List
+            </Button>
+            <Select>
+              <SelectTrigger rounded-none w="1/7">
+                <SelectValue placeholder="Test" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup class="max-h-35 overflow-y-scroll">
+                  <SelectLabel>Actions to test</SelectLabel>
+                  <SelectItem v-for="action in actions" :key="action.id" :value="action.title">
+                    {{ action.title }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" w-8rem rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+              Apply
+            </Button>
+          </div>
+        </SidebarGroup>
+        <SidebarSeparator />
+        <SidebarGroup>
+          <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
+            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
+            </DragAndDropItem>
+          </DragAndDrop>
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>