Added base layout for sidebar, playerbar, homepage and actionbar

src/renderer/App.vue

@@ -1,13 +1,18 @@
 <template>
   <div id="app">
+    <DockableSidebar />
     <router-view></router-view>
+    <PlayerBar />
   </div>
 </template>
 
 <script>
-  export default {
+import DockableSidebar from './layouts/DockableSidebar'
-    name: 'jukebox'
+import PlayerBar from './layouts/PlayerBar'
-  }
+export default {
+  name: 'jukebox',
+  components: {DockableSidebar, PlayerBar}
+}
 </script>
 
 <style lang="sass">

src/renderer/layouts/ActionBar.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        ActionBar
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'ActionBar'
+}
+</script>
+
+<style>
+
+</style>

src/renderer/layouts/DockableSidebar.vue

@@ -0,0 +1,15 @@
+<template>
+    <section>
+        Sidebar
+    </section>    
+</template>
+
+<script>
+export default {
+  name: 'DockableSidebar'
+}
+</script>
+
+<style>
+
+</style>

src/renderer/layouts/HomePage.vue

@@ -1,12 +1,15 @@
 <template>
-    <div>
+    <section>
-        Home page
+      <ActionBar />
-    </div>
+      HomePage
+    </section>
 </template>
 
 <script>
+import ActionBar from './ActionBar'
 export default {
-  name: 'HomePage'
+  name: 'HomePage',
+  components: {ActionBar}
 }
 </script>
 

src/renderer/layouts/PlayerBar.vue

@@ -0,0 +1,15 @@
+<template>
+    <section>
+        Player
+    </section>
+</template>
+
+<script>
+export default {
+  name: 'PlayerBar'
+}
+</script>
+
+<style>
+
+</style>