[#47] fix layout sidebar visibility in storybook

Author: Kreezag

components/LayoutSidebar/LayoutSidebar.vue

@@ -70,29 +70,14 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
-  },
-  // TODO: fix visible component story with async setup
-  async setup() {
-    if (process.client) {
-      const { $config, $api } = useNuxtApp();
-
-      const apiVersion = await $api.getVersion();
-
-      return {
-        apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
-          ? `v${apiVersion}`
-          : `@${apiVersion}`,
-        clientVersion:
-          !$config?.version || $config.version === "0.0.1"
-            ? "@dev"
-            : `v${$config.version}`,
-      };
-    }
-
-    return {
-      clientVersion: "@dev",
-      apiVersion: "@dev",
-    };
+    apiVersion: {
+      type: String,
+      default: "@dev",
+    },
+    clientVersion: {
+      type: String,
+      default: "@dev",
+    },
   },
 });
 </script>

layouts/default.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="main-layout">
     <div class="main-layout__sidebar-wrap">
-      <LayoutSidebar :is-connected="isConnected" />
+      <LayoutSidebar
+        :is-connected="isConnected"
+        :api-version="apiVersion"
+        :client-version="clientVersion"
+      />
     </div>
 
     <div class="main-layout__content">
@@ -22,20 +26,36 @@ export default defineComponent({
     LayoutSidebar,
   },
 
-  setup() {
+  async setup() {
     const themeStore = useThemeStore();
     const { themeType } = storeToRefs(themeStore);
+    const { $config, $api } = useNuxtApp();
+
+    const apiVersion = await $api.getVersion();
 
     if (process.client) {
       const { $events } = useNuxtApp();
 
       if (!$events?.items?.length) {
         $events.getAll();
       }
+
+      return {
+        themeType,
+        apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
+          ? `v${apiVersion}`
+          : `@${apiVersion}`,
+        clientVersion:
+          !$config?.version || $config.version === "0.0.1"
+            ? "@dev"
+            : `v${$config.version}`,
+      };
     }
 
     return {
       themeType,
+      clientVersion: "@dev",
+      apiVersion: "@dev",
     };
   },
   computed: {