From 323f2c753bc7527604268a65f0653704c1c07cae Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sat, 28 Mar 2020 23:45:27 +0100
Subject: [PATCH] add compatibility with AppOrder, refactoring

---
 README.md        |  2 +
 appinfo/info.xml |  2 +-
 src/SideMenu.vue | 96 +++++++++++++++++++++++++++---------------------
 3 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index dc85c9f..e015834 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@
 
 This application moves the top menu of Nextcloud to the left side.
 
+Comptatible with AppOrder.
+
 ![](https://upload.deblan.org/u/2020-03/5e7fab2b.jpg)
 
 ![](https://upload.deblan.org/u/2020-03/5e7fab16.jpg)
diff --git a/appinfo/info.xml b/appinfo/info.xml
index 622e56a..e639a61 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -6,7 +6,7 @@
     <description>Move the top menu to the left side.</description>
     <licence>agpl</licence>
     <author mail="dev+sidemenu@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
-    <version>1.1.0</version>
+    <version>1.1.1</version>
     <namespace>SideMenu</namespace>
     <category>customization</category>
     <website>https://gitnet.fr/deblan/side_menu</website>
diff --git a/src/SideMenu.vue b/src/SideMenu.vue
index 288941d..cf98d03 100644
--- a/src/SideMenu.vue
+++ b/src/SideMenu.vue
@@ -1,23 +1,23 @@
 <template>
-	<div id="side-menu">
-		<div class="side-menu-header">
-			<button class="side-menu-opener"></button>
+    <div id="side-menu">
+        <div class="side-menu-header">
+            <button class="side-menu-opener"></button>
 
-			<div v-if="logo" class="side-menu-logo">
-				<img v-bind:src="logo">
-			</div>
-		</div>
+            <div v-if="logo" class="side-menu-logo">
+                <img v-bind:src="logo">
+            </div>
+        </div>
 
-		<ul class="side-menu-apps-list">
-			<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
-				<a v-bind:href="app.href">
-				 	<span class="side-menu-app-icon" v-html="app.icon"></span>
+        <ul class="side-menu-apps-list">
+            <li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
+                <a v-bind:href="app.href">
+                     <span class="side-menu-app-icon" v-html="app.icon"></span>
 
-					{{ app.name }}
-				</a>
-			</li>
-		</ul>
-	</div>
+                    {{ app.name }}
+                </a>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
@@ -25,34 +25,46 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
-	name: 'SideMenu',
-	data() {
-		return {
-			apps: [],
-			logo: null
-		}
-	},
-	created() {
-		let that = this
-		var links = document.querySelectorAll('#appmenu a')
+    name: 'SideMenu',
+    data() {
+        return {
+            apps: [],
+            logo: null
+        }
+    },
+    methods: {
+        retrieveApps() {
+            this.apps = [];
+            const links = document.querySelectorAll('#appmenu a');
 
-		this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
-			.getPropertyValue('background-image')
-			.replace('url("', '')
-			.replace('")', '')
+            for (let element of links) {
+                let href = element.getAttribute('href')
 
-		for (let element of links) {
-			let href = element.getAttribute('href')
+                if (href !== '#') {
+                    this.apps.push({
+                        href: href,
+                        name: element.querySelector('span').innerHTML,
+                        icon: element.querySelector('svg').outerHTML,
+                        active: element.classList.contains('active')
+                    });
+                }
+            }
+        },
+        retrieveLogo() {
+            this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
+                .getPropertyValue('background-image')
+                .replace('url("', '')
+                .replace('")', '')
+        },
+    },
+    created() {
+        this.retrieveApps();
+        this.retrieveLogo();
 
-			if (href !== '#') {
-				that.apps.push({
-					href: href,
-					name: element.querySelector('span').innerHTML,
-					icon: element.querySelector('svg').outerHTML,
-					active: element.classList.contains('active')
-				})
-			}
-		}
-	}
+        const menu = document.querySelector('#appmenu')
+        const config = {attributes: true, childList: true, subtree: true};
+        const observer = new MutationObserver(this.retrieveApps);
+        observer.observe(menu, config);
+    }
 }
 </script>