add search component

src/SideMenuWithCategories.vue

@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar"
       />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
     </div>
 
@@ -31,12 +31,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="side-menu-categories">
         <Loader v-if="!items.length" />
 
-        <div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
+        <div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
           <h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
 
           <ul class="side-menu-apps-list">
             <SideMenuBigApp
               v-for="(app, appId) in category.apps"
+              v-if="searchMatch(app.name)"
               v-bind:key="appId"
               v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
               v-bind:icon="app.icon"
@@ -56,6 +57,7 @@ import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
+import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -66,6 +68,7 @@ export default {
     OpenerButton,
     Loader,
     SideMenuBigApp,
+    AppSearch,
   },
   data() {
     return {
@@ -74,6 +77,7 @@ export default {
       targetBlank: false,
       targetBlankApps: [],
       settings: null,
+      search: '',
     }
   },
   methods: {
@@ -116,6 +120,28 @@ export default {
           this.settings = config['settings']
         })
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     this.retrieveConfig()