diff --git a/ui/src/components/bulma/Drawer.vue b/ui/src/components/bulma/Drawer.vue
index 54e6239..304b43c 100644
--- a/ui/src/components/bulma/Drawer.vue
+++ b/ui/src/components/bulma/Drawer.vue
@@ -22,20 +22,21 @@
       </button>
     </header>
 
-    <template v-if="is_open">
-      <div v-if="state === 'loading'" class="card-content">
+    <slot v-if="state === 'loading'" name="loading">
+      <div class="card-content">
         <progress class="progress is-primary" />
       </div>
-      <div
-        v-else-if="state === 'err'"
-        class="card-content has-text-danger has-text-centered"
-      >
+    </slot>
+
+    <slot v-else-if="state === 'err'" name="error">
+      <div class="card-content has-text-danger has-text-centered">
         <span class="icon is-large">
           <FontAwesomeIcon :icon="['fas', 'ban']" size="3x" />
         </span>
       </div>
-      <slot v-else name="default" />
-    </template>
+    </slot>
+
+    <slot v-else-if="state === 'ok'" name="default" />
   </div>
 </template>