Fixed #9 added search bar and logo in sidebar

src/App.vue

@@ -44,4 +44,12 @@ export default {
 .button.icon.tiny {
     padding: 0.5em !important;
 }
+
+.sidebar {
+  .logo {
+    path {
+      fill: white;
+    }
+  }
+}
 </style>

src/components/Logo.vue

+<template>
+  <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  	 viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
+  <g>
+  	<g>
+  		<path fill="#4082B4" d="M70.9,86.1c11.7,0,21.2-9.5,21.2-21.2c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1c0,6-4.9,11-11,11
+  			c-6,0-11-4.9-11-11c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1C49.7,76.6,59.2,86.1,70.9,86.1z"/>
+  		<path fill="#4082B4" d="M70.9,106.1c22.7,0,41.2-18.5,41.2-41.2c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1
+  			c0,17.1-13.9,31-31,31c-17.1,0-31-13.9-31-31c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1C29.6,87.6,48.1,106.1,70.9,106.1z"
+  			/>
+  		<path fill="#4082B4" d="M131.1,63.8h-8c-0.6,0-1.1,0.5-1.1,1.1C122,93.1,99,116,70.9,116c-28.2,0-51.1-22.9-51.1-51.1
+  			c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1c0,33.8,27.5,61.3,61.3,61.3c33.8,0,61.3-27.5,61.3-61.3
+  			C132.2,64.3,131.7,63.8,131.1,63.8z"/>
+  	</g>
+  	<path fill="#222222" d="M43.3,37.3c4.1,2.1,8.5,2.5,12.5,4.8c2.6,1.5,4.2,3.2,5.8,5.7c2.5,3.8,2.4,8.5,2.4,8.5l0.3,5.2
+  		c0,0,2,5.2,6.4,5.2c4.7,0,6.4-5.2,6.4-5.2l0.3-5.2c0,0-0.1-4.7,2.4-8.5c1.6-2.5,3.2-4.3,5.8-5.7c4-2.3,8.4-2.7,12.5-4.8
+  		c4.1-2.1,8.1-4.8,10.8-8.6c2.7-3.8,4-8.8,2.5-13.2c-7.8-0.4-16.8,0.5-23.7,4.2c-9.6,5.1-15.4,3.3-17.1,10.9h-0.1
+  		c-1.7-7.7-7.5-5.8-17.1-10.9c-6.9-3.7-15.9-4.6-23.7-4.2c-1.5,4.4-0.2,9.4,2.5,13.2C35.2,32.5,39.2,35.2,43.3,37.3z"/>
+  </g>
+  </svg>
+
+</template>
+
+<script>
+
+export default {
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>

src/components/Sidebar.vue

 <template>
 <div class="ui vertical left visible wide sidebar">
   <div class="ui inverted segment header-wrapper">
-    <h1><router-link :to="{name: 'index'}">Funkwhale</router-link></h1>
+    <search-bar>
+      <router-link :title="'Funkwhale'" :to="{name: 'index'}">
+        <i class="logo bordered inverted orange big icon">
+          <logo class="logo"></logo>
+        </i>
+      </router-link>
+
+    </search-bar>
   </div>
 
   <div class="menu-area">
@@ -78,6 +85,8 @@
 <script>
 import Player from '@/components/audio/Player'
 import favoriteTracks from '@/favorites/tracks'
+import Logo from '@/components/Logo'
+import SearchBar from '@/components/audio/SearchBar'
 import auth from '@/auth'
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
@@ -86,7 +95,11 @@ import $ from 'jquery'
 
 export default {
   name: 'sidebar',
-  components: { Player },
+  components: {
+    Player,
+    SearchBar,
+    Logo
+  },
   data () {
     return {
       auth: auth,
@@ -140,7 +153,9 @@ $sidebar-color: #1B1C1D;
   border-radius: 0;
 }
 
-.header-wrapper {
+.ui.inverted.segment.header-wrapper {
+  padding: 0;
+  padding-bottom: 1rem;
 }
 .tabs {
   flex: 1;
@@ -149,4 +164,13 @@ $sidebar-color: #1B1C1D;
 .player-wrapper {
   border-top: 1px solid white;
 }
+
+.logo {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.ui.search {
+  display: inline-block;
+}
 </style>

src/components/audio/SearchBar.vue

+<template>
+  <div class="ui fluid category search">
+    <slot></slot>
+    <div class="ui icon input">
+      <input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
+      <i class="search icon"></i>
+    </div>
+    <div class="results"></div>
+  </div>
+</template>
+
+<script>
+import jQuery from 'jquery'
+import config from '@/config'
+import auth from '@/auth'
+import router from '@/router'
+
+const SEARCH_URL = config.API_URL + 'search?query={query}'
+
+export default {
+  mounted () {
+    jQuery(this.$el).search({
+      type: 'category',
+      minCharacters: 3,
+      onSelect (result, response) {
+        router.push(result.routerUrl)
+      },
+      apiSettings: {
+        beforeXHR: function (xhrObject) {
+          xhrObject.setRequestHeader('Authorization', auth.getAuthHeader())
+          return xhrObject
+        },
+        onResponse: function (initialResponse) {
+          var results = {}
+          let categories = [
+            {
+              code: 'artists',
+              route: 'browse.artist',
+              name: 'Artist',
+              getTitle (r) {
+                return r.name
+              },
+              getDescription (r) {
+                return ''
+              }
+            },
+            {
+              code: 'albums',
+              route: 'browse.album',
+              name: 'Album',
+              getTitle (r) {
+                return r.title
+              },
+              getDescription (r) {
+                return ''
+              }
+            },
+            {
+              code: 'tracks',
+              route: 'browse.track',
+              name: 'Track',
+              getTitle (r) {
+                return r.title
+              },
+              getDescription (r) {
+                return ''
+              }
+            }
+          ]
+          categories.forEach(category => {
+            results[category.code] = {
+              name: category.name,
+              results: []
+            }
+            initialResponse[category.code].forEach(result => {
+              results[category.code].results.push({
+                title: category.getTitle(result),
+                id: result.id,
+                routerUrl: {
+                  name: category.route,
+                  params: {
+                    id: result.id
+                  }
+                },
+                description: category.getDescription(result)
+              })
+            })
+          })
+          return {results: results}
+        },
+        url: SEARCH_URL
+      }
+    })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/components/browse/Album.vue

@@ -90,6 +90,11 @@ export default {
       }
       return 'background-image: url(' + backend.absoluteUrl(this.album.cover) + ')'
     }
+  },
+  watch: {
+    id () {
+      this.fetchData()
+    }
   }
 }
 </script>

src/components/browse/Artist.vue

@@ -119,6 +119,11 @@ export default {
       }
       return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
     }
+  },
+  watch: {
+    id () {
+      this.fetchData()
+    }
   }
 }
 </script>

src/components/browse/Track.vue

@@ -100,6 +100,11 @@ export default {
       }
       return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
     }
+  },
+  watch: {
+    id () {
+      this.fetchData()
+    }
   }
 }
 </script>