From 70f5339e86cf26a0729e802bf3cc17e6099ce5f4 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 14:36:45 +0430
Subject: [PATCH 1/7] Sidebar box sizing should be border-box

---
 src/renderer/layouts/DockableSidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 6a68aa5..68be565 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -15,4 +15,5 @@ section
     width: 100%
     max-width: 250px
     padding: 2rem 3rem
+    box-sizing: border-box
 </style>

From 7270aea59eaf9632b2d38bb7029ac9a8a5f38140 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 14:46:04 +0430
Subject: [PATCH 2/7] Added proper background-color for sidebar

---
 src/renderer/layouts/DockableSidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 68be565..66b4298 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -16,4 +16,5 @@ section
     max-width: 250px
     padding: 2rem 3rem
     box-sizing: border-box
+    background-color: #fcfcfc
 </style>

From e2356c62ce395978f043a97364080596f029f414 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 14:48:02 +0430
Subject: [PATCH 3/7] Created base component for MenuGroup and MenuItem

---
 src/renderer/components/MenuGroup.vue | 15 +++++++++++++++
 src/renderer/components/MenuItem.vue  | 15 +++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/renderer/components/MenuGroup.vue
 create mode 100644 src/renderer/components/MenuItem.vue

diff --git a/src/renderer/components/MenuGroup.vue b/src/renderer/components/MenuGroup.vue
new file mode 100644
index 0000000..fbb0c82
--- /dev/null
+++ b/src/renderer/components/MenuGroup.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        MenuGroup
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MenuGroup'
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/renderer/components/MenuItem.vue b/src/renderer/components/MenuItem.vue
new file mode 100644
index 0000000..27b87da
--- /dev/null
+++ b/src/renderer/components/MenuItem.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        Item
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem'
+}
+</script>
+
+<style>
+
+</style>

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 4/7] 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>
 

From abeeb6638e91796d09c2c9ea68da874c1a3dc315 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 15:52:47 +0430
Subject: [PATCH 5/7] Added typeface-lato and configured Lato font

---
 package-lock.json    | 5 +++++
 package.json         | 1 +
 src/renderer/App.vue | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index d399c45..4f87ef9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16212,6 +16212,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typeface-lato": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/typeface-lato/-/typeface-lato-0.0.75.tgz",
+      "integrity": "sha512-iA5uJD4PSTyIE4BDiSOexQeXkDkiJuX4Hu3wh3saJ06EB2TvJayab1Lbbmqq2je/LQv7KCQZHZmC0k4hedd8sw=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/package.json b/package.json
index 62e33a3..e179e63 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "normalize-scss": "^7.0.1",
+    "typeface-lato": "0.0.75",
     "vue": "^2.5.16",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 070727b..d2f9e12 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -11,6 +11,7 @@
 <script>
 import DockableSidebar from './layouts/DockableSidebar'
 import PlayerBar from './layouts/PlayerBar'
+import 'typeface-lato'
 export default {
   name: 'jukebox',
   components: { DockableSidebar, PlayerBar }
@@ -23,6 +24,7 @@ export default {
 
 .root,.page-wrapper
   display: flex
+  font-family: 'Lato', sans-serif
 
 .page-wrapper
   flex-direction: column

From 0ed15380257250c86b61b9c86a5b5ddf4d63e095 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 17:25:44 +0430
Subject: [PATCH 6/7] Designed MenuGroup and MenuItem and added faded variant
 to MenuItem and icon support if present

---
 src/renderer/components/MenuGroup.vue    | 10 ++++--
 src/renderer/components/MenuItem.vue     | 27 +++++++++++----
 src/renderer/layouts/DockableSidebar.vue | 42 ++++++++++++++++++++----
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/MenuGroup.vue b/src/renderer/components/MenuGroup.vue
index 891a9d2..099826e 100644
--- a/src/renderer/components/MenuGroup.vue
+++ b/src/renderer/components/MenuGroup.vue
@@ -16,6 +16,12 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-legend
-    text-transform: uppercase
+div
+    margin-top: 64px
+    legend
+        color: lighten(gray,20)
+        text-transform: uppercase
+    ul
+        padding: unset
+    
 </style>
diff --git a/src/renderer/components/MenuItem.vue b/src/renderer/components/MenuItem.vue
index 487672a..6335817 100644
--- a/src/renderer/components/MenuItem.vue
+++ b/src/renderer/components/MenuItem.vue
@@ -1,10 +1,10 @@
 <template>
-    <router-link tag="li" :to="to">
-        <a>
+    <router-link tag="li" :to="to" class="menu-item" :class="{'fade' : faded}">
         <span>
             <slot name="icon"></slot>
         </span>
-        <slot>Nothing to show</slot>
+        <a>
+            <slot>Nothing to show</slot>
         </a>
     </router-link>
 </template>
@@ -12,10 +12,25 @@
 <script>
 export default {
   name: 'MenuItem',
-  props: ['to']
+  props: ['to', 'faded']
 }
 </script>
 
-<style>
-
+<style lang="sass">
+li.menu-item
+    display: flex
+    align-items: center
+    margin: 1rem 0
+    &.fade
+        a
+            color: lighten(gray,20)
+    a
+        text-decoration: none
+        color: black
+        font-size: 1rem
+    span
+        svg
+            padding-right: 10px
+            width: 22px
+            height: auto
 </style>
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index c12f38f..8d859bd 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -1,15 +1,38 @@
 <template>
     <section>
-        Sidebar
-
         <MenuGroup>
-            <template v-slot:title>Test</template>
-            <MenuItem to="/">
-                Home
+            <template v-slot:title>Menu</template>
+            <MenuItem to="/art">
+                <template v-slot:icon>
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+                        <image id="icons8-micro-64" width="18" height="18" xlink:href="data:image/png;base64,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"/>
+                    </svg>    
+                </template>
+                Artists
+            </MenuItem>        
+        </MenuGroup>
+        <MenuGroup class="grow">
+            <template v-slot:title>Your playlists</template>
+            <MenuItem to="/art">
+                Hits of this summer
             </MenuItem>
             <MenuItem to="/art">
-                Artists
-            </MenuItem>            
+                Classical Music
+            </MenuItem>
+            <MenuItem to="/art">
+                Chillout
+            </MenuItem>
+            <MenuItem to="/art">
+                Workout
+            </MenuItem>
+        </MenuGroup >
+        <MenuGroup>
+            <MenuItem to="/art" :faded="true">
+                Settings
+            </MenuItem>
+            <MenuItem to="/art" :faded="true">
+                Version 0.0.1
+            </MenuItem>
         </MenuGroup>
     </section>    
 </template>
@@ -27,7 +50,12 @@ export default {
 section
     width: 100%
     max-width: 250px
+    min-height: 100vh
     padding: 2rem 3rem
     box-sizing: border-box
     background-color: #fcfcfc
+    display: flex
+    flex-direction: column
+    .grow
+        flex-grow: 1
 </style>

From 776296e879e269f7b9347e6593d5f05980ae5b6c Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 17:46:34 +0430
Subject: [PATCH 7/7] Made Sidebar scrollable and limited the root height for
 modular scrollbars

---
 src/renderer/App.vue                     | 1 +
 src/renderer/layouts/DockableSidebar.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index d2f9e12..b1fe1e6 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -25,6 +25,7 @@ export default {
 .root,.page-wrapper
   display: flex
   font-family: 'Lato', sans-serif
+  max-height: 100vh
 
 .page-wrapper
   flex-direction: column
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 8d859bd..d515b64 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -56,6 +56,7 @@ section
     background-color: #fcfcfc
     display: flex
     flex-direction: column
+    overflow: auto 
     .grow
         flex-grow: 1
 </style>