deployed a basic stracture for self made carousel

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jukebox",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/renderer/components/Carousel.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="container">
+
+    <div class="content">
+      <slot></slot>
+    </div>
+
+    <div class="navigation__container">
+      <span class="navigation__left">
+        <svg class="navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
+            <g>
+                <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>
+            </g>
+        </svg>
+      </span>
+
+      <span class="navigation__right">
+        <svg class="navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
+            <g>
+                <path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
+            </g>
+        </svg>
+      </span>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="sass" scoped>
+div.container
+    display: flex
+    flex-direction: column
+    padding: 1rem 2rem
+div.content
+    display: flex
+    position: relative
+
+.navigation
+    &__container
+        display: flex
+        flex: 1 0 100%
+        justify-content: space-between 
+        padding: 1rem 2rem
+    &__right,
+    &__left 
+        display: flex
+        justify-content: center
+        align-items: center
+        padding: .5rem
+        cursor: pointer
+        border-radius: 50%
+        &:hover 
+            background: lighten(grey, 35)
+    &__icon
+        width: 25px
+        heghit: 25px
+        fill: #666
+</style>
+

src/renderer/layouts/DockableSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="test">
         <Dialog :open="aboutOpen" :onClose="closeAbout">
             test
             <Logo :nopadding="true"/>
@@ -159,6 +159,8 @@ export default {
 </script>
 
 <style lang="sass">
+div#test 
+    border: 1px solid rgba(0,0,0,.05)
 section.handle
     position: absolute
     left: 0

src/renderer/layouts/HomePage.vue

@@ -269,7 +269,7 @@ section.page
   .action-bar
     padding: 1rem 2.5rem
   .upper-row
-    padding: 1rem 2.5rem
+    padding: 1rem 2rem
   .middle-row
     display: flex
 
@@ -277,7 +277,7 @@ section.page
     flex: 1 0 50% 
     max-width: 50%
     &.recommend
-      max-width: 30%
+      max-width: 40%
 
 .favourite
   background: white

src/renderer/layouts/MusicRow.vue

@@ -1,9 +1,9 @@
 <template>
     <section class="music-row">
         <legend>{{title}}</legend>
-        <section class="items">
+        <Carousel>
           <MusicBox v-for="item in items" :key="item.id" :item="item" />
-        </section>
+        </Carousel>
     </section>  
 </template>
 
@@ -11,12 +11,13 @@
 import MusicBox from '../components/MusicBox'
 import Scrollbar from 'smooth-scrollbar'
 import HorizontalScrollPlugin from '../utility/HorizontalScrollPlugin'
+import Carousel from '../components/Carousel'
 Scrollbar.use(HorizontalScrollPlugin)
 
 export default {
   name: 'MusicRow',
   props: ['items', 'title'],
-  components: { MusicBox },
+  components: { MusicBox, Carousel },
   mounted () {
     let container = this.$el.getElementsByClassName('items')[0]
     Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, horizontal: true })
@@ -38,4 +39,5 @@ section.music-row
         display: flex
     .scrollbar-thumb,.scrollbar-track
       display: none !important
+    
 </style>