From f761cf193f9e38805c9c595228dd738860aed7ea Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 15:45:03 +0430
Subject: [PATCH] Added a baseline for MenuGroup and MenuItem

---
 src/renderer/components/MenuGroup.vue    | 12 +++++++++---
 src/renderer/components/MenuItem.vue     | 14 ++++++++++----
 src/renderer/layouts/DockableSidebar.vue | 15 ++++++++++++++-
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/MenuGroup.vue b/src/renderer/components/MenuGroup.vue
index fbb0c82..891a9d2 100644
--- a/src/renderer/components/MenuGroup.vue
+++ b/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>
diff --git a/src/renderer/components/MenuItem.vue b/src/renderer/components/MenuItem.vue
index 27b87da..487672a 100644
--- a/src/renderer/components/MenuItem.vue
+++ b/src/renderer/components/MenuItem.vue
@@ -1,12 +1,18 @@
 <template>
-    <div>
-        Item
-    </div>
+    <router-link tag="li" :to="to">
+        <a>
+        <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>
 
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 66b4298..c12f38f 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/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>