Added a baseline for MenuGroup and MenuItem

src/renderer/components/MenuGroup.vue

@@ -1,6 +1,11 @@
 <template>
     <div>
-        MenuGroup
+        <legend>
+            <slot name="title"></slot>
+        </legend>
+        <ul>
+            <slot></slot>
+        </ul>
     </div>
 </template>
 
@@ -10,6 +15,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="sass" scoped>
-
+legend
+    text-transform: uppercase
 </style>

src/renderer/components/MenuItem.vue

@@ -1,12 +1,18 @@
 <template>
-    <div>
+    <router-link tag="li" :to="to">
-        Item
+        <a>
-    </div>
+        <span>
+            <slot name="icon"></slot>
+        </span>
+        <slot>Nothing to show</slot>
+        </a>
+    </router-link>
 </template>
 
 <script>
 export default {
-  name: 'MenuItem'
+  name: 'MenuItem',
+  props: ['to']
 }
 </script>
 

src/renderer/layouts/DockableSidebar.vue

@@ -1,12 +1,25 @@
 <template>
     <section>
         Sidebar
+
+        <MenuGroup>
+            <template v-slot:title>Test</template>
+            <MenuItem to="/">
+                Home
+            </MenuItem>
+            <MenuItem to="/art">
+                Artists
+            </MenuItem>            
+        </MenuGroup>
     </section>    
 </template>
 
 <script>
+import MenuGroup from '../components/MenuGroup'
+import MenuItem from '../components/MenuItem'
 export default {
-  name: 'DockableSidebar'
+  name: 'DockableSidebar',
+  components: { MenuGroup, MenuItem }
 }
 </script>