add compatibility with AppOrder, refactoring

README.md

@@ -0,0 +1,11 @@
+🤙 Nextcloud app / Side menu 🎨
+===============================
+
+
+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)

appinfo/info.xml

@@ -6,14 +6,14 @@
     <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.0.0</version>
+    <version>1.1.1</version>
     <namespace>SideMenu</namespace>
     <category>customization</category>
     <website>https://gitnet.fr/deblan/side_menu</website>
     <bugs>https://gitnet.fr/deblan/side_menu/issues</bugs>
     <repository type="git">https://gitnet.fr/deblan/side_menu</repository>
-	<screenshot>https://upload.deblan.org/u/2020-03/5e7f8a21.png</screenshot>
+    <screenshot>https://upload.deblan.org/u/2020-03/5e7fab2b.jpg</screenshot>
-	<screenshot>https://upload.deblan.org/u/2020-03/5e7f8a31.png</screenshot>
+    <screenshot>https://upload.deblan.org/u/2020-03/5e7fab16.jpg</screenshot>
     <dependencies>
         <nextcloud min-version="18" max-version="18"/>
     </dependencies>

appinfo/routes.php

@@ -2,15 +2,5 @@
 
 return [
     'routes' => [
-        [
-            'name' => 'Javascript#sideMenu',
-            'url' => '/side_menu/javascript/side_menu',
-            'verb' => 'GET',
-        ],
-        [
-            'name' => 'Api#apps',
-            'url' => '/side_menu/api/apps',
-            'verb' => 'GET',
-        ]
     ],
 ];

css/sideMenu.css

@@ -3,7 +3,7 @@
 }
 
 #side-menu {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
@@ -55,7 +55,7 @@
     white-space: nowrap;
 }
 
-.side-menu-app a:hover {
+.side-menu-app a:hover, .side-menu-app.is-active a {
     background: #444;
 }
 

lib/Controller/ApiController.php

@@ -1,47 +0,0 @@
-<?php
-
-namespace OCA\SideMenu\Controller;
-
-use OCP\AppFramework\Controller;
-use OCP\IRequest;
-use OCP\INavigationManager;
-use OCP\AppFramework\Http\DataDownloadResponse;
-use OCP\AppFramework\Http\TemplateResponse;
-use OCP\AppFramework\Http\JSONResponse;
-
-class ApiController extends Controller
-{
-    /**
-     * @var INavigationManager
-     */
-    protected $navigationManager;
-
-    /**
-     * @param string $appName
-     * @param IRequest $request
-     * @param INavigationManager $navigationManager
-     */
-    public function __construct($appName, IRequest $request, INavigationManager $navigationManager)
-    {
-        parent::__construct($appName, $request);
-
-        $this->navigationManager = $navigationManager;
-    }
-
-    /**
-     * @NoAdminRequired
-     * @NoCSRFRequired
-     *
-     * @return JSONResponse
-     */
-    public function apps(): JSONResponse
-    {
-        $apps = $this->navigationManager->getAll();
-
-        $data = [
-            'apps' => $apps,
-        ];
-
-        return new JSONResponse($apps);
-    }
-}

src/SideMenu.vue

@@ -1,23 +1,23 @@
 <template>
-	<div id="side-menu">
+    <div id="side-menu">
-		<div class="side-menu-header">
+        <div class="side-menu-header">
-			<button class="side-menu-opener"></button>
+            <button class="side-menu-opener"></button>
 
-			<div v-if="logo" class="side-menu-logo">
+            <div v-if="logo" class="side-menu-logo">
-				<img v-bind:src="logo">
+                <img v-bind:src="logo">
-			</div>
+            </div>
-		</div>
+        </div>
 
-		<ul class="side-menu-apps-list">
+        <ul class="side-menu-apps-list">
-			<li v-for="app in apps" class="side-menu-app">
+            <li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
-				<a v-bind:href="app.href">
+                <a v-bind:href="app.href">
-					<img v-bind:src="app.icon" v-bind:alt="app.name" class="side-menu-app-icon">
+                     <span class="side-menu-app-icon" v-html="app.icon"></span>
 
-					{{ app.name }}
+                    {{ app.name }}
-				</a>
+                </a>
-			</li>
+            </li>
-		</ul>
+        </ul>
-	</div>
+    </div>
 </template>
 
 <script>
@@ -25,27 +25,46 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
-	name: 'SideMenu',
+    name: 'SideMenu',
-	data() {
+    data() {
-		return {
+        return {
-			apps: [],
+            apps: [],
-			logo: null
+            logo: null
-		}
+        }
-	},
+    },
-	created() {
+    methods: {
-		let that = this
+        retrieveApps() {
+            this.apps = [];
+            const links = document.querySelectorAll('#appmenu a');
 
-		axios.get(generateUrl('apps/side_menu/side_menu/api/apps'))
+            for (let element of links) {
-			.then(response => {
+                let href = element.getAttribute('href')
-				this.apps = response.data
-			})
 
-		this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
+                if (href !== '#') {
-			.getPropertyValue('background-image')
+                    this.apps.push({
-			.replace('url("', '')
+                        href: href,
-			.replace('")', '')
+                        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();
 
-		console.log(this.logo)
+        const menu = document.querySelector('#appmenu')
-	}
+        const config = {attributes: true, childList: true, subtree: true};
+        const observer = new MutationObserver(this.retrieveApps);
+        observer.observe(menu, config);
+    }
 }
 </script>