From b29d50edfd9ddfb1e5090025c43e5b65c6bfc754 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 22:22:45 +0430
Subject: [PATCH 1/8] Standardize the MusicRow

---
 src/renderer/layouts/HomePage.vue | 25 ++++---------------------
 src/renderer/layouts/MusicRow.vue |  5 +++--
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 8b0838b..024cedd 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,8 +1,8 @@
 <template>
       <section class="wtf">
         <ActionBar class="action-bar" />
-        <div class="upper-row">
-          <MusicRow :items='items' />
+        <div class="upper-row" >
+          <MusicRow :items='items' title="Top rated" />
         </div>
 
         <div class="middle-row">
@@ -31,30 +31,13 @@
           </div> <!-- favourite box-->
 
           <div class="grow-half recommend" >
-            <div class="recommend__title">
-              <legend>Recommended For You</legend>
-            </div>
-
-            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
-              <MusicBox v-for="item in items" :key="item.id" :item="item" />
-            </carousel>
-
-            <!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-              <MusicBox v-for="item in items" :key="item.id" :item="item" />
-            </carousel> -->
-
+            <MusicRow :items='items' title="Recommended for you" class="carousel-custom half" /> 
           </div> <!-- recommended box -->
         </div>
 
         <div class="lower-row">
           <div class="genre">
-            <div class="genre__title">
-              <legend>top geners</legend>
-            </div>
-
-            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-              <MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
-            </carousel>
+            <MusicRow :items='geners' title="Top genres" class="carousel-custom half" /> 
           </div>
         </div>
       </section>
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 0300fe0..57a28ab 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="music-row">
-        <legend>Top Rated</legend>
+        <legend>{{title}}</legend>
         <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
            <MusicBox v-for="item in items" :key="item.id" :item="item" />
         </carousel>
@@ -13,7 +13,7 @@ import carousel from 'vue-owl-carousel'
 
 export default {
   name: 'MusicRow',
-  props: ['items'],
+  props: ['items', 'title'],
   components: { MusicBox, carousel }
 }
 </script>
@@ -25,6 +25,7 @@ section.music-row
         font-size: 2rem
         font-family: 'Roboto Slab', serif        
         margin: 20px 0px
+        white-space: nowrap
     .carousel-custom
       .owl-stage-outer
         overflow: unset

From 7ffc288e70051b7e770c33080ffdebd913b45098 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 22:51:03 +0430
Subject: [PATCH 2/8] Added transition to ListItem

---
 src/renderer/components/ListItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 079cb57..c52a2e5 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -37,6 +37,7 @@ export default {
 
 <style lang="sass" scoped>
 li
+  transition: background-color 150ms, box-shadow 200ms
   width: 100%
   list-style: none
   display: flex

From 86992628c679fb0acadce8d3c000d837f55afde8 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 22:54:34 +0430
Subject: [PATCH 3/8] Added missing padding to dockablesidebar

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

diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index e8e80ca..e91458a 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -194,7 +194,7 @@ section.sidebar
     max-width: 250px
     min-height: 100vh
     max-height: 100vh
-    padding: 2rem 0rem 0rem 2rem
+    padding: 2rem 2rem 0rem 2rem
     box-sizing: border-box
     background-color: #fcfcfc
     display: flex

From 7d7fbe3fc16fe8a6605886a2fe0350bd5910d006 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 22:57:55 +0430
Subject: [PATCH 4/8] Added some pages

---
 src/renderer/layouts/ArtistPage.vue     | 15 +++++++++++++++
 src/renderer/layouts/CollectionPage.vue | 15 +++++++++++++++
 src/renderer/layouts/MusicPage.vue      | 15 +++++++++++++++
 src/renderer/layouts/PlaylistPage.vue   | 15 +++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 src/renderer/layouts/ArtistPage.vue
 create mode 100644 src/renderer/layouts/CollectionPage.vue
 create mode 100644 src/renderer/layouts/MusicPage.vue
 create mode 100644 src/renderer/layouts/PlaylistPage.vue

diff --git a/src/renderer/layouts/ArtistPage.vue b/src/renderer/layouts/ArtistPage.vue
new file mode 100644
index 0000000..806dffb
--- /dev/null
+++ b/src/renderer/layouts/ArtistPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        ArtistPage
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ArtistPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/layouts/CollectionPage.vue b/src/renderer/layouts/CollectionPage.vue
new file mode 100644
index 0000000..1bfe117
--- /dev/null
+++ b/src/renderer/layouts/CollectionPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        CollectionPage
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CollectionPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/layouts/MusicPage.vue b/src/renderer/layouts/MusicPage.vue
new file mode 100644
index 0000000..cba4a0d
--- /dev/null
+++ b/src/renderer/layouts/MusicPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        MusicPage
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MusicPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/layouts/PlaylistPage.vue b/src/renderer/layouts/PlaylistPage.vue
new file mode 100644
index 0000000..e3d38bd
--- /dev/null
+++ b/src/renderer/layouts/PlaylistPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        PlaylistPage
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PlaylistPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>

From 296d33ac79fdecc8f0c31018b3c3bfa9ac2e8b8d Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 23:01:20 +0430
Subject: [PATCH 5/8] Added artists page and route

---
 src/renderer/layouts/ArtistsPage.vue | 15 +++++++++++++++
 src/renderer/router/index.js         |  5 +++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/renderer/layouts/ArtistsPage.vue

diff --git a/src/renderer/layouts/ArtistsPage.vue b/src/renderer/layouts/ArtistsPage.vue
new file mode 100644
index 0000000..58a8a7d
--- /dev/null
+++ b/src/renderer/layouts/ArtistsPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        ArtistsPage
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'ArtistsPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 265abe3..e09505c 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -10,6 +10,11 @@ export default new Router({
       name: 'HomePage',
       component: require('@/layouts/HomePage').default
     },
+    {
+      path: '/artists',
+      name: 'ArtistsPage',
+      component: require('@/layouts/ArtistsPage').default
+    },
     {
       path: '*',
       redirect: '/'

From bc360a520bcfd3d8aad10fb3a8ae919d273cd98c Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 23:02:46 +0430
Subject: [PATCH 6/8] Logo now links to homepage

---
 src/renderer/components/Logo.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/Logo.vue b/src/renderer/components/Logo.vue
index c44b92a..70f1ff3 100644
--- a/src/renderer/components/Logo.vue
+++ b/src/renderer/components/Logo.vue
@@ -1,7 +1,9 @@
 <template>
-    <span :class="{'nopadding' : nopadding === true}">
+    <span>
+        <router-link tag="span" to="/" :class="{'nopadding' : nopadding === true}">
         <img src="/static/logo-2.svg" alt="Jukebox">
         Jukebox
+        </router-link>
     </span>
 </template>
 
@@ -17,6 +19,7 @@ span
     margin-bottom: 12px
     font-size: 1.5rem
     color: lighten(black,40)
+    cursor: pointer
     &.nopadding
         margin-bottom: 0px
 

From 054a780ee3978d1681e1c0a9b5a6727e33ba5717 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 23:11:53 +0430
Subject: [PATCH 7/8] Added some pages and their routes

---
 src/renderer/layouts/ArtistPage.vue      |  2 +-
 src/renderer/layouts/CollectionPage.vue  |  2 +-
 src/renderer/layouts/DockableSidebar.vue | 16 ++++++++--------
 src/renderer/layouts/PlaylistPage.vue    |  4 ++--
 src/renderer/router/index.js             | 15 +++++++++++++++
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/renderer/layouts/ArtistPage.vue b/src/renderer/layouts/ArtistPage.vue
index 806dffb..2e87cbd 100644
--- a/src/renderer/layouts/ArtistPage.vue
+++ b/src/renderer/layouts/ArtistPage.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-    name: 'ArtistPage'
+  name: 'ArtistPage'
 }
 </script>
 
diff --git a/src/renderer/layouts/CollectionPage.vue b/src/renderer/layouts/CollectionPage.vue
index 1bfe117..cdfbd02 100644
--- a/src/renderer/layouts/CollectionPage.vue
+++ b/src/renderer/layouts/CollectionPage.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-    name: 'CollectionPage'
+  name: 'CollectionPage'
 }
 </script>
 
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index e91458a..a349b05 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -31,7 +31,7 @@
                         </template>
                         Artists
                     </MenuItem>
-                    <MenuItem to="/artists">
+                    <MenuItem to="/collection/songs">
                         <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-musical-notes-64" width="18" height="18" xlink:href="data:image/png;base64,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"/>
@@ -39,15 +39,15 @@
                         </template>
                         Songs
                     </MenuItem>
-                    <MenuItem to="/artists">
+                    <MenuItem to="/collections">
                         <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-50" width="18" height="18" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABpFBMVEVHcEyNbJ6NbJ+MbJ+JbZuMbZ6NbJ+NbZ+NbJ+AgKqNbJ+NbJ+Ma5+Jdp2MbJ+ObZ6ZZpmNbJ+Qb52Nap6ObJ+MbJ+NbJ+OaKGNbJ6Qb5uPcKONbJ+NbJ+Na5+ObZ/6796NbJ/v2L7Noaf/9/D205ekhqekhqajhKaUdKOni67auJn37uv20pfvy5jg0M/Gm6aQb6CQcKGkiLCcf6jkzLrv49iNbZ+VdaORcaLCq73Drr6WdqHFsMC6orm0l6yZe6aObaD67t63nreTcqLs3dWZeJ6+lKWjhqvDrb6mhJ2bfafOusX16dumia3l2N3BnpvDmabDmKb10pfNrJrn2NOad6Cfe6GRcJ+0kpznxJjxz5eTcp+hg6yulbPv4tfsyZjm19PZycyqip3l1tLwzpeuk7K2lJzLqJrtypitk7LBqr3LuMu1kpz88+3m1tLtypffz9n78e2mi7Gqj6+de56dgKv37uraysyjh6+2k5zYtpqpi6fyz5eggqrayczayMuqiJz00Zesi53Zt5nw49iqiZ2ffp62lZz57t2hhKuScaKhhKrOGDmCAAAAH3RSTlMAiebsHKnxiOUG8PrYDVB8CuInHdrP2RvWFxmqr/LvpSyrRQAAAaJJREFUWMPt11V3wjAYBuAJDObu0pe2bAxnGxvM3d3d3d3d5U+vFM7O2FZGEy55L5JeNE96vqQ5bUhIMMEIiQwNg3eiY+ITZAAq/JHUTP8BNbo57+ztHiEjy28A4H7FUIS0dBrAJaQoaADu+BSJcbEUAGfYh4+oVZH/AdzWxqTVB6H6BjDyY4aaDmAAauCrEhSAuxLSQGF7a6M0wLJss1gJacA1RUtHpzTAipXwBYyOAA315jpigF8caCsFiivtpICQsZ4moIYC4Pl+/e97ZAE8TwG83J8bqQChhIcr4xSAsATABBXwenMA1FIAwsVgVblsYHr9yvEFEGzlOZ3rRXgmBhasmNebLu+IgSUsS24hvwAdVmmBHff4GeiIgDWcGV3jjZuYIgK2bXjSm0wPt7DNki3jdZn70Cw7YcgAxu78cLy/OR8ZUuD/Yz2QgN8pZJguT08G5Gs0Wk/vBWgIEmigQKuR2fwAxKeQ2QQW0Ap1ldd8A3JRQlDECvSyrAVRApCDCwKhGkN9lmEoBSApD8QJF79mk7MjyIZHKBXBv6VgPPkE11FqOdlbQOcAAAAASUVORK5CYII="/>
                             </svg>
                         </template>
-                        Albums
+                        Collections
                     </MenuItem>
-                    <MenuItem to="/artists">
+                    <MenuItem to="/collection/genres">
                         <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-music-record-64" width="18" height="18" xlink:href="data:image/png;base64,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"/>
@@ -66,16 +66,16 @@
                 </MenuGroup>
                 <MenuGroup>
                     <template v-slot:title>Your playlists</template>
-                    <MenuItem to="/">
+                    <MenuItem to="/playlist/test">
                         Hits of this summer
                     </MenuItem>
-                    <MenuItem to="/">
+                    <MenuItem to="/playlist/test1">
                         Classical Music
                     </MenuItem>
-                    <MenuItem to="/">
+                    <MenuItem to="/playlist/test2">
                         Chillout
                     </MenuItem>
-                    <MenuItem to="/">
+                    <MenuItem to="/playlist/test3">
                         Workout
                     </MenuItem>
                 </MenuGroup>
diff --git a/src/renderer/layouts/PlaylistPage.vue b/src/renderer/layouts/PlaylistPage.vue
index e3d38bd..cea6a51 100644
--- a/src/renderer/layouts/PlaylistPage.vue
+++ b/src/renderer/layouts/PlaylistPage.vue
@@ -1,12 +1,12 @@
 <template>
     <div>
-        PlaylistPage
+        PlaylistPage {{$route.params.id}}
     </div>
 </template>
 
 <script>
 export default {
-    name: 'PlaylistPage'
+  name: 'PlaylistPage'
 }
 </script>
 
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index e09505c..cca92d8 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -15,6 +15,21 @@ export default new Router({
       name: 'ArtistsPage',
       component: require('@/layouts/ArtistsPage').default
     },
+    {
+      path: '/artist/:id',
+      name: 'ArtistPage',
+      component: require('@/layouts/ArtistPage').default
+    },
+    {
+      path: '/collection/:id',
+      name: 'CollectionPage',
+      component: require('@/layouts/CollectionPage').default
+    },
+    {
+      path: '/playlist/:id',
+      name: 'PlaylistPage',
+      component: require('@/layouts/PlaylistPage').default
+    },
     {
       path: '*',
       redirect: '/'

From 251cc22dd0c52660c7b014e54952d74599b01316 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 23:14:39 +0430
Subject: [PATCH 8/8] Add favorite and collections pages

---
 src/renderer/layouts/CollectionsPage.vue | 15 +++++++++++++++
 src/renderer/layouts/DockableSidebar.vue |  2 +-
 src/renderer/layouts/FavoritesPage.vue   | 15 +++++++++++++++
 src/renderer/router/index.js             | 10 ++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/layouts/CollectionsPage.vue
 create mode 100644 src/renderer/layouts/FavoritesPage.vue

diff --git a/src/renderer/layouts/CollectionsPage.vue b/src/renderer/layouts/CollectionsPage.vue
new file mode 100644
index 0000000..ccd8479
--- /dev/null
+++ b/src/renderer/layouts/CollectionsPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        CollectionsPage
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CollectionsPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index a349b05..bc1a055 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -55,7 +55,7 @@
                         </template>
                         Genres
                     </MenuItem>
-                    <MenuItem to="/artists">
+                    <MenuItem to="/favorites">
                         <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-heart-health-64" width="18" height="18" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAADAFBMVEVHcEyMa5yNbJ+Kap+NbJ+Ma5+PcJ+Na5+PcKObbJ2Na6CMdKKOapydbJySbZ6VapWcbJ2PbJ//AP+MbZ6AgICOa5+SbZKNbJ+NbJ+PcJ+ObKCOa6GKbp+JbJ2ObJ+SbJ+ObJ+NbKCNbZ2NbZ+Pap+MbKGLdKKRbJ6RbKCNbKCObJ+ObJ+MbJ+NbJ+NbKGQbJ+NbKCVbZ+NbJ+QbJ+Qa6CTbJ6MbaCUbZ6NbJ+Nbp6TbJ+Nap6ObJ6ObZ+NbJ6LbaCRbaCOcaqNa5+Oa6CPbJ6PbqCNbZ+ObZ+Oa6CMbJ+QbZ+NbJ+Jdp2MbJ+Na52RbZ+QbJ+NbJ6Oa6CNbJ+Pa5+RbJ6ObJ2Qb52AgICObJ+SbJ+ObJ+ZbJ6NbZ+MbJ+ObJ+NbJ+QbZ+PbZ+NbJ+NbJ+LaaGMbZ/teJngZ4+NbJ/yg6XaaJDugp76797td5n42tLvg5/oeJmkb57429LjbJHld5nja5LseJnvfZ/RaJLeZ4+ca52fb57caJDvg6DdZ5DadpqTbJ7fZ4+Ua57pgaWha5zZZ5Dpcpbyg6TncJXQdJvaZ5CwcJ3Cc5yWbZ6tapnreJnKdJvcZ5CVbZ/RdJvVaJHygqWUbZ6Za52gcaCYb5/43dOebp7sd5jueJnhaJDwfZ/wgaLqdJeyaZfkd5qRbZ/NdJuPbJ+QbZ+YbZ+1apfIeaPTaJHugqXMaJOnb52YbJ2papqabp6ga5vbdZrWaJGQbJ+gbp6fa5y8aZaRa5/1wcTeaJCWa57KaJPLdJvcdprqeJnod5rqd5n30s3gdpqbbZ6ecKCzapjfd5qhapv43NP43NPve5zueZrddprlbpOZbJ25aZa0cZzMdJu5cp2cbp6zc5+mcqDHaZS8cpySa57XaJGycJ3mbpSjaprHc5viapGqc6G3cZ3Iapacb5/Ad6L20Mzrdpejb53VdZvvepzdeJ3Ve6Ljd5rEc5yUbZ/AaZWObZ/20M27apfXZ5HbZ5DkbZLWfaOibp3gbpSlb57319H31c/jgKTkgKQmAZbsAAAAu3RSTlMAH+QY19gg3xn9IgUk/hUM/fYBWQJHB/r+EOMoJRr96u/cL3owSQu8z9TZozfMQtrDyoL2g+dbw/E64h228rFLvgl3fsZmZd9Wb3esDaeS5ZeEK/xd8DQnBMivh/3Klb3o0eHiui5S///////////////////////////////////////////////////////////////////////////////////////////////////////////////+opOl4QAAA+tJREFUWMPtl3lcFGUYxyfKIxBW8QCPNJDyAPO20rLMW7PyyA61tNJ3frugEeGyaOqCgnIjiIiYqXmgJCgEKKiVR4ofz/K+OrwtRS2703dmdsa59sL6z+cPZuH5fL/v87zXDgxzP/7zeL1m0MjXGleXDhza2g9cNBkyoJcy5ft0l44tOqNz1ydbBtmhfZ9rDVk820lWx4uDWshS3fs20uF7PE9TJQXXMouv/vTzmh+WA4/WF3MjXgXyvknYF2mO/OLbpAzg5cc0fMN6QEZyOKERlWU0Gj9bkwcEe3Epw5vA1AQihTl9PfCKl5Lv1hw49BWfv8LxnOL8DbxnYBifcahKNxN5pCWvQqvHFeM3x6oVtuwSoxi/V6GDwac9dmwn6piRglayGjzrYfkMW+rj2ZLA+G8OOrRHbiTRxvYUvCTxDfoAUo97jbK4nQN9ntZQ4i/NZH3guJSQV2Cc+TWm6vOEJKO/bTUbtEXe1ruJJa7xJG09+gmCJ4DvZIk9Ep+1wAFPSDraCIK3MD9NnoiSDOdKHfDEPB+BvOAdJCkzouET4jiS8ALHN/bHFqI1zDx6REO8v61c/usW9OQEIUAx0Rjo/BVo+IiwC4qVRA1+FwLaTqN05o/yk0Llf7iKpzjBBMCsnaDDpfb5RfHxSznkS/jZVjGcOA+JX3R6Mcuyi+MJ+VSoYDywyw1+4oesEHNIMQI4QSM/ZLrBT2bFWLoCz/D74A38WB2ePX0KvXlBS+xwwocq+Xn5vOD7FIQIt4E/LiuB8puhjsY/sPIY9ziLAF/hMAzGJaVgm2LBNfWvxkpaQ4w3Btrug2HDkaBuefc0qf5Jmv5XZ3/OstfhIV2Lo1C1y55BxW8uWytI8jdCuvYZr3bI3ao2LJym5IX134ATvCFuNIJlt7JPW3wQrmdQ82xMKsrow/Qwxhjk97rnu/hLx6DiTYnUsGEz/VAXbXyU3ywP1NLUsDssQrV/Y60W/knHf+hB9XebjiEiTFX/OlgT7fG6hr//UZ6finXWOLu8nkEIgbekchs4xgFvz2Ab/yBi88X+a9t7Q9EziPVPP4NUZ7yeQeATo6nhF4tTnmFqqgwCP91aeJJlWRd4tUGsvxKF0a7xSoO0fnMrrbf4/VejtvN3vbsGM3/+LMtM9Gc0P74rvMywnx99GaaYbP27xkuGi0L5pinY6R4vGuZw88+hOy0u9y9GnSbU8BvFThTdEspwjxcMf9Kpy0aRrQ33eGrwwB8fseyv2dZogX/E3Tf3Zh6YRQ0Vc6vJSwbKe1eLZ5imY1FJDXHeds+/U4MHNdwDz3exKdaF8+NgLdoBb98DT1+Dm3re/0f0/487NG+VrSfqD78AAAAASUVORK5CYII="/>
diff --git a/src/renderer/layouts/FavoritesPage.vue b/src/renderer/layouts/FavoritesPage.vue
new file mode 100644
index 0000000..6f11386
--- /dev/null
+++ b/src/renderer/layouts/FavoritesPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        FavoritesPage
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'FavoritesPage'
+}
+</script>
+
+<style lang="sass">
+
+</style>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index cca92d8..329ffe2 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -20,6 +20,11 @@ export default new Router({
       name: 'ArtistPage',
       component: require('@/layouts/ArtistPage').default
     },
+    {
+      path: '/collections',
+      name: 'CollectionsPage',
+      component: require('@/layouts/CollectionsPage').default
+    },
     {
       path: '/collection/:id',
       name: 'CollectionPage',
@@ -30,6 +35,11 @@ export default new Router({
       name: 'PlaylistPage',
       component: require('@/layouts/PlaylistPage').default
     },
+    {
+      path: '/favorites',
+      name: 'FavoritesPage',
+      component: require('@/layouts/FavoritesPage').default
+    },
     {
       path: '*',
       redirect: '/'