feat: added sidebar for components

Author: codebender828

playground/src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <sidebar :stories="stories" />
-    <router-view />
+  <section class="root">
+    <sidebar class="sidebar" :stories="stories" />
+    <router-view class="main" />
+  </section>
 </template>
 
 <script lang="ts">
@@ -16,4 +18,45 @@ export default defineComponent({
     }
   },
 })
-</script>
+</script>
+
+<style>
+html, body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+}
+
+html {
+  line-height: 1.5;
+  color: rgb(26, 32, 44);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+#app {
+  height: inherit;
+  width: inherit;
+}
+</style>
+
+<style scoped>
+.root {
+  display: flex;
+  height: inherit;
+  width: inherit;
+}
+
+.sidebar {
+  height: 100%;
+  widows: 200px;
+  margin: 0;
+  list-style-type: none;
+  padding: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+}
+
+.main {
+  width: 100%;
+  padding: 1rem;
+}
+</style>

playground/src/components/Home.vue

@@ -1,20 +1,20 @@
 <template>
-  <sideBar :stories="stories" />
+  <div></div>
 </template>
 
 <script>
 import { defineComponent, h } from 'vue'
 import { RouterLink } from 'vue-router'
 import SideBar from './Sidebar.vue'
-            import routes from '../.generated/routes.json'
+import routes from '../.generated/routes.json'
 
 
 export default defineComponent({
   components: { SideBar },
-  setup() {
-    return {
-      stories: routes,
-    }
-  },
+  mounted() {
+    // Hard coded so we can push to the first component in the storybook
+    // TODO: Find a way to locate the first child route
+    this.$router.push('/c-alert/base-alert')
+  }
 })
 </script>

playground/src/components/Sidebar.vue

@@ -9,13 +9,17 @@ const Stories = defineComponent({
     return () => {
       return h(
         'ul',
-        props.stories.map(story =>
+        props.stories
+        .filter(story => story.path !== '/*')
+        .map(story =>
           h(
             'li',
-            { key: story.path },
+            {
+              key: story.path
+            },
             story.children
               ? h('h3', story.name)
-              : [h(RouterLink, { to: story.path }, () => story.name)],
+              : [h(RouterLink, { to: story.path }, story.path === '/' ? () => [h('img', { class: ['logo'], src: 'https://res.cloudinary.com/xtellar/image/upload/v1584242872/chakra-ui/chakra-ui-vue.png' })] : () => story.name)],
             story.children && h(Stories, { stories: story.children })
           )
         )
@@ -25,4 +29,19 @@ const Stories = defineComponent({
 })
 
 export default Stories
-</script>
+</script>
+
+<style>
+ul {
+  /* list-style-type: none; */
+  padding: 0;
+}
+
+li > ul {
+  padding-left: 1rem;
+}
+
+.logo {
+  width: 120px;
+}
+</style>

playground/src/router.js

@@ -19,8 +19,6 @@ function buildRoutes(routes) {
 
 const routes = buildRoutes(generatedRoutes)
 
-console.log(routes)
-
 export default createRouter({
   history: createWebHistory(),
   routes,