Support sidebar on either side (or none)

website/layouts/default.vue

@@ -1,13 +1,28 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const slots = useSlots();
+
+const hasLeftSidebar = computed(() => {
+    return !!slots.leftSidebar;
+});
+const hasRightSidebar = computed(() => {
+    return !!slots.rightSidebar;
+});
+</script>
 <template>
     <div class="flex w-full">
         <!-- Left sidebar -->
-        <div class="w-1/4 p-4 overflow-y-auto">
-            <slot name="sidebar"></slot>
+        <div v-if="hasLeftSidebar" class="w-1/4 p-4 overflow-y-auto">
+            <slot name="leftSidebar"></slot>
         </div>
-
-        <!-- Right side content -->
-        <div class="w-3/4 p-4 overflow-y-auto">
+        <!-- Left side content -->
+        <div class="flex-1 p-4 overflow-y-auto">
             <slot name="content"></slot>
         </div>
+        <!-- Right sidebar -->
+        <div v-if="hasRightSidebar" class="w-1/4 p-4 overflow-y-auto">
+            <slot name="rightSidebar"></slot>
+        </div>
     </div>
 </template>

website/pages/index.vue

@@ -41,7 +41,7 @@ function selectWorkflow(workflow: Workflow) {
 
 <template>
     <NuxtLayout>
-        <template #sidebar>
+        <template #leftSidebar>
             <div class="sticky top-4 h-16">
                 <input
                     v-model="searchQuery"

website/pages/workflow/[id].vue

@@ -126,7 +126,7 @@ const onInstanceChange = (value: string) => {
         </div>
     </div>
     <NuxtLayout v-else>
-        <template #sidebar>
+        <template #rightSidebar>
             <div v-if="workflow" class="mt-6">
                 <h2 class="font-bold text-xl mb-4">{{ workflow.definition.name }}</h2>
                 <p class="mb-4">{{ workflow.definition.annotation }}</p>