feat: add sidebar for playground

Author: codebender828

playground/src/App.vue

@@ -1,3 +1,19 @@
 <template>
+  <sidebar :stories="stories" />
   <router-view />
-</template>
+</template>
+
+<script lang="js">
+import { defineComponent } from 'vue'
+import Sidebar from './components/Sidebar.vue'
+import routes from './.generated/routes.json'
+
+export default defineComponent({
+  components: { Sidebar },
+  setup() {
+    return {
+      stories: routes,
+    }
+  },
+})
+</script>

playground/src/components/Home.vue

@@ -1,39 +1,19 @@
 <template>
-  <Examples :examples="examples" />
+  <SideBar :stories="stories" />
 </template>
 
 <script>
 import { defineComponent, h } from 'vue'
-import CButton from '@chakra-ui/c-button'
+import SideBar from './Sidebar.vue'
 import { RouterLink } from 'vue-router'
 import routes from '../.generated/routes.json'
 
-const Examples = defineComponent({
-  props: ['examples'],
-  setup(props) {
-    return () => {
-      return h(
-        'ul',
-        props.examples.map(example =>
-          h(
-            'li',
-            { key: example.path },
-            example.children
-              ? h('h3', example.name)
-              : [h(RouterLink, { to: example.path }, () => example.name)],
-            example.children && h(Examples, { examples: example.children })
-          )
-        )
-      )
-    }
-  },
-})
 
 export default defineComponent({
-  components: { Examples, CButton },
+  components: { SideBar },
   setup() {
     return {
-      examples: routes,
+      stories: routes,
     }
   },
 })

playground/src/components/Sidebar.vue

@@ -0,0 +1,28 @@
+<script>
+import { defineComponent, h } from 'vue'
+import { RouterLink } from 'vue-router'
+import routes from '../.generated/routes.json'
+
+const Stories = defineComponent({
+  props: ['stories'],
+  setup(props) {
+    return () => {
+      return h(
+        'ul',
+        props.stories.map(story =>
+          h(
+            'li',
+            { key: story.path },
+            story.children
+              ? h('h3', story.name)
+              : [h(RouterLink, { to: story.path }, () => story.name)],
+            story.children && h(Stories, { stories: story.children })
+          )
+        )
+      )
+    }
+  },
+})
+
+export default Stories
+</script>

playground/src/main.js

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './index.css'
 import router from './router'
 
 createApp(App)