update default view

src/SideMenu.vue

@@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import SideMenuApp from './SideMenuApp'
 import Logo from './Logo'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
   name: 'SideMenu',
@@ -81,89 +82,31 @@ export default {
   },
   methods: {
     retrieveApps() {
-      this.apps = []
-      const links = document.querySelectorAll('#appmenu a')
-      const menu = document.querySelector('#appmenu')
-      let menuIsHidden = true
+      this.apps = loadState('core', 'apps', {})
 
-      if (menu) {
-        menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
-      }
-
-      for (let element of links) {
-        let href = element.getAttribute('href')
-        let parent = element.parentNode
-
-        if (!parent) {
-          continue
-        }
-
-        let dataId = parent.getAttribute('data-id')
-        dataId = dataId !== null ? dataId : ''
-
-        if (!parent.classList.contains('app-top-side-menu') && !parent.classList.contains('app-hidden') && !menuIsHidden) {
-          continue
-        }
-
-        if (href !== '#') {
-          let svg = element.querySelector('svg').outerHTML
-
-          svg = svg
-            .replace(/(height|width)="20"/, '')
-            .replace('id="invertMenuMain', 'id="invertSideMenu')
-            .replace('url(#invertMenuMain', 'url(#invertSideMenu')
-
-          if (this.forceLightIcon) {
-            svg = svg.replace(/filter="url[^"]+"/, '')
-          }
-
-          this.apps.push({
-            id: dataId,
-            href: href,
-            name: trim(element.querySelector('span').innerHTML),
-            icon: svg,
-            active: element.classList.contains('active')
-          })
-        }
-      }
-
-      (function(apps) {
-        window.setTimeout(function() {
-          document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
-            detail: {apps: apps},
-          }))
-        }, 1000)
-      })(this.apps)
+      document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+        detail: {apps: this.apps},
+      }))
     },
 
     retrieveConfig() {
-      let that = this
-
       axios
         .get(OC.generateUrl('/apps/side_menu/js/config'))
-        .then(function(response) {
+        .then((response) => {
           const config = response.data
 
-          that.targetBlankApps = config['target-blank-apps']
-          that.forceLightIcon = config['force-light-icon']
-          that.avatar = config['avatar']
-          that.logo = config['logo']
-          that.logoLink = config['logo-link']
-          that.settings = config['settings']
+          this.targetBlankApps = config['target-blank-apps']
+          this.forceLightIcon = config['force-light-icon']
+          this.avatar = config['avatar']
+          this.logo = config['logo']
+          this.logoLink = config['logo-link']
+          this.settings = config['settings']
         })
     },
   },
   mounted() {
     this.retrieveConfig()
     this.retrieveApps()
-
-    const menu = document.querySelector('#appmenu')
-
-    if (menu) {
-      const config = {attributes: true, childList: true, subtree: true}
-      const observer = new MutationObserver(this.retrieveApps)
-      observer.observe(menu, config)
-    }
   }
 }
 </script>

src/SideMenuApp.vue

@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <li v-bind:class="classes">
     <a v-bind:href="href" :target="target" v-bind:title="label">
-      <span class="side-menu-app-icon" v-html="icon"></span>
+      <img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
       <span class="side-menu-app-text" v-text="label"></span>
     </a>
   </li>