Merge pull request 'add check if menu exists before adding event listeners (#210 )' (#211 ) from feature/issue210 into v2.x

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/211
release v2.5.2
2023-01-21 21:49:02 +01:00 · 2023-01-21 21:45:41 +01:00 · 2023-01-21 21:41:22 +01:00 · 2022-10-11 22:49:02 +02:00
44 changed files with 1701 additions and 1988 deletions
@@ -4,4 +4,3 @@
 /releases
 /package-lock.json
 !/l10n/.gitkeep
-/yarn*.log
@@ -1,5 +1,5 @@
 {
    "rules": {
-        "indentation": 2
+        "indentation": 4
    }
 }
@@ -1,21 +1,21 @@
 pipeline:
  dependencies:
-    image: gitnet.fr/deblan/devenv
+    image: deblan/devenv
    commands:
-      - make dep
+      - npm install
    when:
      event: [tag, push, pull_request]
-      branch: [master, develop, feature/*]
+      branch: [master, develop, v2.x, feature/*]

  build:
-    image: gitnet.fr/deblan/devenv
+    image: deblan/devenv
    commands:
-      - make build
+      - make npm-build
    when:
      event: [push, pull_request]

  package:
-    image: gitnet.fr/deblan/devenv
+    image: deblan/devenv
    volumes:
      - /var/www/html/artifacts:/var/www/html/artifacts
    secrets: [app_certificate]
@@ -1,26 +1,8 @@
 ## [Unreleased]

-## 3.2.0
-### Added
-* use custom app names using 'app.navigation.name' (#148)
-* app sorting with all displays (#147)
-
-## 3.1.0
-### Added
-* add global custom app sorting for the top menu
+## 2.5.2
 ### Fixed
-* fix admin list/modal look
-
-## 3.0.1
-### Fixed
-* Remove the gap between the window's top and menu categories (large menu)
-
-## 3.0.0
-### Added
-* Add compatibility with NC25 (#136/#135)
-### Removed
-* Nextcloud 20-24 are not supported anymore
-* AppOrder is not supported anymore
+* add check if menu exists before adding event listeners (#210)

 ## 2.5.1
 ### Fixed
@@ -1,15 +1,11 @@
-build: dep
+npm-build:
 	npm run build

-watch: dep
+npm-watch:
 	npm run watch

-dep:
-	npm i
-	npm link @nextcloud/vue || sudo npm link @nextcloud/vue
-
 .ONESHELL:
-release: build translations
+release: npm-build translations
 	if [ -z "$$VERSION" ]; then
 		echo "VERSION required"
 		exit 1
@@ -1,15 +1,12 @@
 🤙 Nextcloud app / Custom menu 🎨
 ===============================

-[![Build Status](https://ci.gitnet.fr/api/badges/deblan/side_menu/status.svg)](https://ci.gitnet.fr/deblan/side_menu)
-[![Translations](https://translate.codeberg.org/widgets/custom-menu/-/application/svg-badge.svg)](https://translate.codeberg.org/engage/custom-menu/)
-
 Allows you to modify the position of the main menu by creating a panel on the left of the interface or with a big menu on the top.
 You can also add and sort custom categories, define apps that must be displayed in the top menu, etc. Fully customisable.

 This application is rather suitable for instances that activate a lot of applications.

-You can customize colors depending of the theme (Dark theme and Breeze Dark).
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.

 * [Installation and upgrade](#installation-and-upgrade)
 * [How to contribute?](#how-to-contribute)
@@ -18,6 +15,8 @@ You can customize colors depending of the theme (Dark theme and Breeze Dark).

 You like this app and you want to support me? ☕ [Buy me a coffee](https://www.buymeacoffee.com/deblan) or [Donate with liberapay](https://liberapay.com/deblan)

+[![Build Status](https://ci.gitnet.fr/api/badges/deblan/side_menu/status.svg)](https://ci.gitnet.fr/deblan/side_menu)
+
 Requirements
 ------------

@@ -52,18 +51,14 @@ How to contribute?

 You can report a bug or request a feature by opening an issue: https://gitnet.fr/deblan/side_menu/issues

-### You are a translator
-
-Translations are managed from [translate.codeberg.org](https://translate.codeberg.org/projects/custom-menu/application/).
-
-### You are a developer
+If you are a developer:

 * fork the repository
 * install an instance of Nextcloud
 * go to `apps/` and clone your repository
-* go to `apps/side_menu` and run `make dep`
+* go to `apps/side_menu` and run `npm install`

-Build javascripts using `make build` (or `make watch` to build them in real time).
+Build javascripts using `make npm-build` (or `make npm-watch` to build them in real time).

 Then commit and create a pull request.

@@ -71,10 +66,3 @@ Support
 -------

 You can join the official room on Matrix: [#custommenu:neutralnetwork.org](https://matrix.to/#/#custommenu:neutralnetwork.org).
-
-
-Notice
------
-
-Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
-In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
@@ -11,7 +11,7 @@ This application is rather suitable for instances that activate a lot of applica

 Use the shortcut `Ctrl`+`o` to open and to hide the side menu. Use `tab` to navigate.

-You can customize colors depending of the theme (Dark theme and Breeze Dark).
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.

 You can report a bug or request a feature by opening an issue.

@@ -25,14 +25,8 @@ If you like this application and if you want to support the development:
 * [Buy me a coffee](https://www.buymeacoffee.com/deblan)
 * [Donate with liberapay](https://liberapay.com/deblan)
 * [Leave a comment](https://apps.nextcloud.com/apps/side_menu#comments)
-
-Notice
------
-
-Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
-In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.2.0</version>
+    <version>2.5.2</version>
    <licence>agpl</licence>
    <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
    <namespace>SideMenu</namespace>
@@ -51,10 +45,8 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc18_menu_always_displayed.png</screenshot>
    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc20_big_menu_responsive.png</screenshot>
    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/personal_settings.png</screenshot>
-    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_big_menu.png</screenshot>
-    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png</screenshot>
    <dependencies>
-        <nextcloud min-version="25" max-version="25"/>
+        <nextcloud min-version="20" max-version="24"/>
        <php min-version="7.4"/>
    </dependencies>
    <settings>
@@ -16,162 +16,131 @@
 */

 #side-menu-section input[type="color"] {
-  width: 100px;
-  margin: 10px 0 10px 0;
-  padding: 0;
-  border-radius: 0;
+    width: 100px;
+    margin: 10px 0 10px 0;
 }

 #-dropside-menu-section input[type="checkbox"] {
-  vertical-align: middle;
+    vertical-align: middle;
 }

 #side-menu-section input[type="range"] {
-  vertical-align: middle;
+    vertical-align: middle;
 }

 #side-menu-section select {
-  margin: 10px 0 10px 0;
+    margin: 10px 0 10px 0;
 }

 .keyboard-key {
-  padding: 1px 9px;
-  margin: 0 2px;
-  background: #eee;
-  border: 1px solid #aaa;
-  color: #555;
-  border-radius: 3px;
+    padding: 1px 9px;
+    margin: 0 2px;
+    background: #eee;
+    border: 1px solid #aaa;
+    color: #555;
+    border-radius: 3px;
 }

 .side-menu-display {
-  padding: 10px;
-  border: 2px solid transparent;
-  max-width: 100%;
-  cursor: pointer;
+    padding: 10px;
+    border: 2px solid transparent;
+    max-width: 100%;
+    cursor: pointer;
 }

 .side-menu-display.is-active {
-  border: 2px solid #91cb7f;
+    border: 2px solid #91cb7f;
 }

 .info {
-  margin-top: 8px;
-  padding: 5px;
-  background: #91cb7f;
-  color: #fff;
-  border-radius: var(--border-radius);
+    margin-top: 8px;
+    padding: 5px;
+    background: #91cb7f;
+    color: #fff;
+    border-radius: var(--border-radius);
 }

 #side-menu-section h2 small {
-  font-size: 11px;
-  font-weight: normal;
+    font-size: 11px;
+    font-weight: normal;
 }

 .side-menu-toggler {
-  cursor: pointer;
+    cursor: pointer;
 }

 .side-menu-setting-list {
-  margin: 10px 4px 4px 0px;
-  border: 1px solid var(--color-border-dark);
-  border-radius: 15px;
+    margin: 10px 4px 4px 0px;
 }

 .side-menu-setting-list-item {
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--color-border-dark);
-  max-width: 300px;
-  margin: -1px 0 0 0;
-  cursor: pointer;
-  line-height: 32px;
-}
-
-.side-menu-setting-list-item:last-child {
-  border-bottom: 0;
+    padding: 5px 10px;
+    border: 1px solid var(--color-border-dark);
+    max-width: 300px;
+    margin: -1px 0 0 0;
+    cursor: pointer;
 }

 .side-menu-setting-list-drop {
-  background: yellow;
-  border-color: yellow;
-  height: 34px;
+    background: yellow;
+    border-color: yellow;
+    height: 34px;
 }

 .side-menu-setting.arrow {
-  color: #ccc;
-  padding-right: 5px;
+    color: #ccc;
+    padding-right: 5px;
 }

 .side-menu-setting-list-item input {
-  margin-top: 0;
-  height: 21px !important;
-  min-height: auto !important;
+    min-height: auto;
+    margin-top: -1px;
 }

 #apps-categories-custom-list select {
-  width: 100%;
+    width: 100%;
 }

+
 .side-menu-setting-table {
-  display: table;
-  width: 100%;
+    display: table;
+    width: 100%;
 }

 .side-menu-setting-row {
-  display: table;
-  margin-bottom: 10px;
-}
-
-.side-menu-setting-row code {
-  margin-left: 2px;
-  margin-bottom: 1px;
-  padding: 3px 10px;
-  border-radius: 5px;
-  display: inline-block;
-  right: 2px;
-  border: 1px solid var(--color-border-dark);
+    display: table;
 }

 .side-menu-setting-label {
-  display: table-cell;
-  width: 430px;
-  padding-right: 20px;
+    display: table-cell;
+    width: 400px;
+    padding-right: 20px;
 }

 .side-menu-setting-form {
-  display: table-cell;
-  min-width: 300px;
+    display: table-cell;
+    min-width: 300px;
 }

 .side-menu-setting-label-short {
-  width: 300px;
+    width: 300px;
 }

 .side-menu-setting-form-long {
-  width: 400px;
+    width: 400px;
 }

 #side-menu-save-progress {
-  display: inline-block;
-  width: 0;
-  height: 15px;
-  background: #fff;
+    display: inline-block;
+    width: 0;
+    height: 15px;
+    background: #fff;
 }

 .btn-reset {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  top: -8px;
-  left: 5px;
-  transition-duration: 0.8s;
-  transition-property: transform;
-  transform: rotate(360deg);
-}
-
-.btn-reset--down {
-  top: 2px;
-}
-
-.btn-reset--progress {
-  transform: rotate(-359deg);
+    display: inline-block;
+    cursor: pointer;
+    position: absolute;
+    margin-top: 17px;
+    margin-left: 5px;
 }
@@ -16,325 +16,326 @@
 */

 #side-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100%;
-  max-width: 290px;
-  background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
-  z-index: 3000;
-  color: var(--side-menu-text-color, #fff);
-  box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
-  display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100%;
+    max-width: 250px;
+    background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
+    z-index: 3000;
+    color: var(--side-menu-text-color, #fff);
+    box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
+    display: none;
 }

 #side-menu a {
-  transition: 0.2s;
+    transition: 0.2s;
 }

 #side-menu.open {
-  display: block;
+    display: block;
 }

 #header .side-menu-opener {
-  margin-left: 0px;
+    margin-left: 0px;
 }

 .side-menu-settings {
-  margin-right: 9px;
-  margin-top: 2px;
-  float: right;
-  line-height: 34px;
-  height: 28px;
-  display: none;
+    margin-right: 9px;
+    margin-top: 2px;
+    float: right;
+    line-height: 34px;
+    height: 28px;
+    display: none;
 }

 .side-menu-settings a {
-  color: var(--side-menu-text-color, #fff);
-  display: block;
-  padding: 4px 7px;
+    color: var(--side-menu-text-color, #fff);
+    display: block;
+    padding: 4px 7px;
 }

 .side-menu-settings:hover a, .side-menu-settings a:active, .side-menu-settings a:focus {
-  background: var(--side-menu-current-app-background-color, #444);
+    background: var(--side-menu-current-app-background-color, #444);
 }

 .side-menu-settings img {
-  vertical-align: bottom;
-  margin-left: 3px;
-  width: 32px;
-  height: 32px;
+    vertical-align: bottom;
+    margin-left: 3px;
+    width: 32px;
+    height: 32px;
 }

 #side-menu.open .side-menu-settings {
-  display: block;
+    display: block;
 }

 .side-menu-opener {
-  background: var(--side-menu-opener, url('../img/side-menu-opener.svg'));
-  background-color: transparent !important;
-  height: 40px !important;
-  width: 40px !important;
-  border-radius: 0 !important;
-  border: 0 !important;
-  padding-right: 12px !important;
-  padding-left: 12px !important;
-  margin-left: 5px !important;
-  margin-left: 3px !important;
+    background: var(--side-menu-opener, url('../img/side-menu-opener.svg'));
+    background-color: transparent !important;
+    height: 40px !important;
+    width: 40px !important;
+    border-radius: 0 !important;
+    border: 0 !important;
+    padding-right: 12px !important;
+    padding-left: 12px !important;
+    margin-left: 5px !important;
+    margin-left: 3px !important;
 }

 .side-menu-opener:active, .side-menu-opener:focus {
-  background-color: var(--side-menu-current-app-background-color, #444) !important;
+    background-color: var(--side-menu-current-app-background-color, #444) !important;
 }

 .side-menu-closer {
-  background: url('../img/side-menu-opener-closer.svg');
-  display: none;
+    background: url('../img/side-menu-opener-closer.svg');
+    display: none;
 }

 #side-menu.hide-opener .side-menu-opener, .side-menu-opener.hide, #side-menu.hide {
-  display: none !important;
+    display: none !important;
 }

 .side-menu-apps-list {
-  height: calc(100vh - 150px);
-  z-index: 2200;
-  position: fixed;
-  top: 150px;
-  width: 100%;
-  max-width: 290px;
-  overflow: auto;
+    height: calc(100vh - 150px);
+    z-index: 2200;
+    position: fixed;
+    top: 150px;
+    width: 100%;
+    max-width: 250px;
+    overflow: auto;
 }

 .side-menu-app-icon {
-  width: 20px;
-  vertical-align: middle;
-  margin-top: -4px;
-  margin-right: 10px;
-  filter: invert(var(--side-menu-icon-invert-filter, 0%));
-  opacity: var(--side-menu-icon-opacity, 1);
+    width: 20px;
+    vertical-align: top;
+    margin-right: 10px;
+    filter: invert(var(--side-menu-icon-invert-filter, 0%));
+    opacity: var(--side-menu-icon-opacity, 1);
+}
+
+.side-menu-app-icon svg {
+    vertical-align: middle;
+    margin-top: -3px;
+}
+
+.side-menu-app-icon .app-icon-notification {
+    display: none;
 }

 .side-menu-app a {
-  line-height: 30px;
-  color: var(--side-menu-text-color, #fff);
-  display: block;
-  padding: 7px 0 5px 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    line-height: 30px;
+    color: var(--side-menu-text-color, #fff);
+    display: block;
+    padding: 7px 0 5px 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

 .side-menu-app a:hover, .side-menu-app.active, .side-menu-app a:focus {
-  background: var(--side-menu-current-app-background-color, #444);
+    background: var(--side-menu-current-app-background-color, #444);
 }

 .side-menu-logo {
-  text-align: center;
+    text-align: center;
 }

 .side-menu-logo img {
-  max-width: 60%;
-  max-height: 100px;
+    max-width: 60%;
+    max-height: 100px;
 }

-.enu-header {
-  height: 150px;
-  width: 100%;
-  z-index: 2300;
-  max-width: 290px;
-  position: fixed;
-  padding-top: 2px;
-  top: 0;
+.side-menu-header {
+    height: 150px;
+    width: 100%;
+    z-index: 2300;
+    max-width: 250px;
+    position: fixed;
+    padding-top: 2px;
+    top: 0;
 }

 #side-menu.side-menu-with-categories .side-menu-header {
-  max-width: 295px;
+    max-width: 295px;
 }

 #side-menu.hide-opener .side-menu-logo {
-  margin-top: 20px;
+    margin-top: 20px;
 }

 #side-menu-loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 3001;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 3001;
 }

 #side-menu-loader-bar {
-  height: 4px;
-  background: var(--side-menu-loader-color, #0e75ac);
-  width: 0;
-  transition-property: width;
+    height: 4px;
+    background: var(--side-menu-loader-color, #0e75ac);
+    width: 0;
+    transition-property: width;
 }

 #side-menu.side-menu-big, #side-menu.side-menu-with-categories {
-  max-width: 100%;
-  height: auto;
+    max-width: 100%;
+    height: auto;
 }

 .side-menu-big .side-menu-header, .side-menu-with-categories .side-menu-header {
-  height: auto;
+    height: auto;
 }

 .side-menu-big .side-menu-apps-list, .side-menu-with-categories .side-menu-apps-list {
-  height: auto;
-  position: static;
-  max-width: 100vw;
-  overflow: auto;
+    height: auto;
+    position: static;
+    max-width: 100vw;
+    overflow: auto;
 }

 .side-menu-big .side-menu-app a, .side-menu-with-categories .side-menu-app a {
-  padding: 7px 0 7px 7px;
+    padding: 7px 0 7px 7px;
 }

 .side-menu-categories-wrapper {
-  padding-bottom: 70px;
+    padding-bottom: 70px;
 }

 .side-menu-categories {
-  max-height: calc(100vh - 5px);
-  overflow: auto;
-  position: relative;
-  top: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 0 10% 0 10%;
+    max-height: calc(100vh - 50px);
+    overflow: auto;
+    position: relative;
+    top: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 0 10% 0 10%;
 }

 .side-menu-category {
-  padding: 10px 20px;
-  flex: 1 1 auto;
+    padding: 10px 20px;
+    flex: 1 1 auto;
 }

 .side-menu-category-title {
-  padding-left: 10px;
-  color: var(--side-menu-text-color, #fff);
+    padding-left: 10px;
+    color: var(--side-menu-text-color, #fff);
 }

 .side-menu-loader {
-  text-align: center;
+    text-align: center;
 }

 .side-menu-loader svg {
-  width: 38px;
-  margin: auto;
-  stroke: var(--side-menu-text-color, #fff);
+    width: 38px;
+    margin: auto;
+    stroke: var(--side-menu-text-color, #fff);
 }

 .side-menu-with-categories .side-menu-app-icon, .side-menu-big .side-menu-app-icon {
-  vertical-align: middle;
-  margin-top: -2px;
+    vertical-align: middle;
+    margin-top: -2px;
+}
+
+.side-menu-always-displayed #header,
+.side-menu-always-displayed body {
+    width: calc(100% - 50px) !important;
 }

 .side-menu-always-displayed body {
-  width: calc(100% - 50px) !important;
-}
-
-.side-menu-always-displayed body {
-  position: absolute;
-  left: 50px;
+    position: absolute;
+    left: 50px;
 }

 .side-menu-always-displayed #side-menu {
-  display: block;
+    display: block;
 }

 .side-menu-always-displayed .side-menu-apps-list {
-  height: calc(100vh - 49px);
-  top: 49px;
-  overflow: hidden;
+    height: calc(100vh - 49px);
+    top: 49px;
+    overflow: hidden;
 }

 .side-menu-always-displayed .side-menu-apps-list:hover {
-  overflow: auto;
+    overflow: auto;
 }

 .side-menu-always-displayed #side-menu,
 .side-menu-always-displayed .side-menu-header,
 .side-menu-always-displayed .side-menu-apps-list {
-  width: 50px;
+    width: 50px;
 }

 .side-menu-always-displayed #side-menu .side-menu-app-text,
 .side-menu-always-displayed #header .side-menu-opener,
 .side-menu-always-displayed .side-menu-logo {
-  display: none;
+    display: none;
 }

 .side-menu-always-displayed #side-menu .side-menu-header {
-  height: 49px;
+    height: 49px;
 }

 .side-menu-always-displayed #side-menu.open,
 .side-menu-always-displayed #side-menu.open .side-menu-apps-list,
 .side-menu-always-displayed #side-menu.open .side-menu-header {
-  width: 100%;
+    width: 100%;
 }

 .side-menu-always-displayed #side-menu.open .side-menu-app-text {
-  display: inline;
+    display: inline;
 }

 .side-menu-always-displayed .app-navigation--close {
-  transform: translateX(calc(-100% + 50px)) !important;
+    transform: translateX(calc(-100% + 50px)) !important;
 }

 #side-menu.side-menu-with-categories {
-  max-width: 290px;
-  height: 100vh;
+    max-width: 290px;
+    height: 100vh;
 }

 .side-menu-with-categories .side-menu-categories {
-  display: block;
-  padding: 0;
+    display: block;
+    padding: 0;
 }

 .side-menu-with-categories .side-menu-category {
-  padding: 10px 0;
+    padding: 10px 0;
 }

 .side-menu-always-displayed #body-settings, #body-settings.body-settings-side-menu {
-  overflow-x: visible;
-}
-
-.app-menu {
-  visibility: hidden;
-}
-
-.app-menu.show {
-  visibility: visible;
+    overflow-x: visible;
 }

@media screen and (max-width: 1024px) {
-  #side-menu.side-menu-big {
-    max-width: 290px;
-    height: 100vh;
-  }
+    #side-menu.side-menu-big {
+        max-width: 290px;
+        height: 100vh;
+    }

-  .side-menu-categories {
-    display: block;
-    padding: 0;
-  }
+    .side-menu-categories {
+        display: block;
+        padding: 0;
+    }

-  .side-menu-category {
-    padding: 10px 0;
-  }
+    .side-menu-category {
+        padding: 10px 0;
+    }
 }

@media screen and (min-width: 1024px) {
-  .side-menu-closer {
-    display: block;
-    float: right;
-    margin-right: 9px;
-  }
+    .side-menu-closer {
+        display: block;
+        float: right;
+        margin-right: 9px;
+    }

-  .side-menu-big .side-menu-header {
-    max-width: 100%;
-  }
+    .side-menu-big .side-menu-header {
+        max-width: 100%;
+    }
 }
@@ -95,7 +95,6 @@ class JsController extends Controller
    {
        $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
        $topSideMenuApps = $this->config->getAppValueArray('top-side-menu-apps', '[]');
-        $topMenuAppsOrder = $this->config->getAppValueArray('top-menu-apps-order', '[]');
        $targetBlankApps = $this->config->getAppValueArray('target-blank-apps', '[]');
        $useAvatar = $this->config->getAppValueBool('use-avatar', '0');
        $isForced = $this->config->getAppValueBool('force', '0');
@@ -162,7 +161,6 @@ class JsController extends Controller
            'side-with-categories' => $this->config->getAppValueBool('side-with-categories', '0'),
            'big-menu' => $this->config->getAppValueBool('big-menu', '0'),
            'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
-            'apps-order' => $this->config->getAppValueArray('apps-order', '[]'),
            'avatar' => $avatar,
            'top-menu-apps' => $topMenuApps,
            'top-side-menu-apps' => $topSideMenuApps,
@@ -93,7 +93,7 @@ class NavController extends Controller
            ]);
        }

-        $apps = $this->appRepository->getOrderedApps();
+        $apps = $this->appRepository->getVisibleApps();
        $categoriesLabels = $this->categoryRepository->getOrderedCategories();
        $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
        $isForced = $this->config->getAppValueBool('force', '0');
@@ -178,6 +178,10 @@ class NavController extends Controller
        foreach ($items as $category => $value) {
            if (empty($items[$category]['apps'])) {
                unset($items[$category]);
+            } else {
+                uasort($items[$category]['apps'], function ($a, $b) {
+                    return ($a['name'] < $b['name']) ? -1 : 1;
+                });
            }
        }

@@ -36,7 +36,8 @@ class AppRepository
        IFactory $l10nFactory,
        ConfigProxy $config,
        CategoryRepository $categoryRepository
-    ) {
+    )
+    {
        $this->ocApp = $ocApp;
        $this->l10nFactory = $l10nFactory;
        $this->config = $config;
@@ -61,7 +62,7 @@ class AppRepository

            foreach ([$app['id'], $app['id'].'_index'] as $id) {
                if (isset($navigation[$id])) {
-                    $app['name'] = $this->getAppName($app);
+                    $app['name'] = $this->l10nFactory->get($id)->t($app['name']);
                    $app['href'] = $navigation[$id]['href'];
                    $app['icon'] = $navigation[$id]['icon'];

@@ -74,7 +75,7 @@ class AppRepository
            if ('external_index' === substr($app['id'], 0, 14)) {
                $visibleApps[$app['id']] = [
                    'id' => $app['id'],
-                    'name' => $this->getAppName($app),
+                    'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
                    'href' => $app['href'],
                    'icon' => $app['icon'],
                    'category' => [
@@ -84,7 +85,7 @@ class AppRepository
            } elseif ('files' === $app['id']) {
                $visibleApps[$app['id']] = [
                    'id' => $app['id'],
-                    'name' => $this->getAppName($app),
+                    'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
                    'href' => $app['href'],
                    'icon' => $app['icon'],
                    'category' => [],
@@ -98,34 +99,10 @@ class AppRepository
            }
        }

-        return $visibleApps;
-    }
-
-    public function getAppName($app)
-    {
-        return $this->config->getAppValue(
-            'app.navigation.name',
-            $this->l10nFactory->get($app['id'])->t($app['name']),
-            $app['id']
-        );
-    }
-
-    public function getOrderedApps()
-    {
-        $apps = $this->getVisibleApps();
-        $orders = $this->config->getAppValueArray('apps-order', '[]');
-
-        usort($apps, function ($a, $b) use ($orders) {
-            $ak = array_keys($orders, $a['id'])[0] ?? null;
-            $bk = array_keys($orders, $b['id'])[0] ?? null;
-
-            if (null === $ak || null === $bk) {
-                return ($a['name'] < $b['name']) ? -1 : 1;
-            }
-
-            return $ak < $bk ? -1 : 1;
+        usort($visibleApps, function ($a, $b) {
+            return ($a['name'] < $b['name']) ? -1 : 1;
        });

-        return $apps;
+        return $visibleApps;
    }
 }
@@ -159,8 +159,6 @@ class Admin implements ISettings
            'force' => $this->config->getAppValue('force', '0'),
            'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
            'top-menu-apps' => $this->config->getAppValueArray('top-menu-apps', '[]'),
-            'apps-order' => $this->config->getAppValueArray('apps-order', '[]'),
-            'ordered-apps' => $this->appRepository->getOrderedApps(),
            'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),
            'default-enabled' => $this->config->getAppValue('default-enabled', '1'),
            'apps' => $this->appRepository->getVisibleApps(),
@@ -2,15 +2,17 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"build": "NODE_ENV=production ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"dev": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"watch": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --watch --config webpack.js",
-		"lint": "./node_modules/.bin/eslint --ext .js,.vue src",
-		"lint:fix": "./node_modules/.bin/eslint --ext .js,.vue src --fix",
-		"stylelint": "./node_modules/.bin/stylelint src",
-		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
+		"build": "NODE_ENV=production webpack --progress --config webpack.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"lint": "eslint --ext .js,.vue src",
+		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix"
 	},
 	"dependencies": {
+		"@nextcloud/axios": "^1.8.0",
+		"@nextcloud/vue": "^1.5.0",
 		"axios": "^0.24.0",
 		"trim": "^1.0.1",
 		"vue": "^2.6.11"
@@ -25,12 +27,8 @@
 		"@babel/core": "^7.9.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/preset-env": "^7.9.0",
-		"@nextcloud/axios": "^1.8.0",
 		"@nextcloud/browserslist-config": "^1.0.0",
 		"@nextcloud/eslint-config": "^8.1.2",
-		"@nextcloud/initial-state": "^2.0.0",
-		"@nextcloud/l10n": "^1.6.0",
-		"@nextcloud/vue": "^7.0.0",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"css-loader": "^3.4.2",
@@ -52,9 +50,8 @@
 		"stylelint-scss": "^4.0.0",
 		"stylelint-webpack-plugin": "^3.3.0",
 		"url-loader": "^4.0.0",
-		"vue-loader": "^15",
-		"vue-style-loader": "^4.1.3",
-		"vue-template-compiler": "^2.7.13",
+		"vue-loader": "^15.9.1",
+		"vue-template-compiler": "^2.6.11",
 		"webpack": "^5.0.0",
 		"webpack-cli": "^4.0.0",
 		"webpack-merge": "^4.2.2",
@@ -15,161 +15,168 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <ul class="side-menu-setting-list">
-      <li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
-        <span v-text="item.en"></span>
-      </li>
-    </ul>
+    <div>
+        <ul class="side-menu-setting-list">
+            <li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
+                <span v-text="item.en"></span>
+            </li>
+        </ul>

-    <NcActions>
-      <NcActionButton @click="showAddForm" icon="icon-add"></NcActionButton>
-    </NcActions>
+        <Actions>
+	        <ActionButton @click="showAddForm" icon="icon-add"></ActionButton>
+        </Actions>

-    <NcModal v-if="addForm" @close="hideAddForm">
-      <div class="modal__content">
-        <div v-for="lang in langs">
-          <span class="lang" v-text="lang"></span>
-          <input type="text" v-model="newValue[lang]" required style="width: calc(100% - 100px)">
-        </div>
+		<Modal v-if="addForm" @close="hideAddForm">
+			<div class="modal__content">
+                <div v-for="lang in langs">
+                    <span class="lang" v-text="lang"></span>
+                    <input type="text" v-model="newValue[lang]" required>
+                </div>

-        <NcActions>
-          <NcActionButton @click="saveAdd" icon="icon-checkmark"></NcActionButton>
-        </NcActions>
-      </div>
-    </NcModal>
+                <Actions>
+                    <ActionButton @click="saveAdd" icon="icon-checkmark"></ActionButton>
+                </Actions>
+            </div>
+		</Modal>

-    <NcModal v-if="editForm" @close="hideEditForm">
-      <div class="modal__content">
-        <div v-for="lang in langs">
-          <span class="lang" v-text="lang"></span>
-          <input type="text" v-model="editValue[lang]" required style="width: calc(100% - 100px)">
-        </div>
+		<Modal v-if="editForm" @close="hideEditForm">
+			<div class="modal__content">
+                <div v-for="lang in langs">
+                    <span class="lang" v-text="lang"></span>
+                    <input type="text" v-model="editValue[lang]" required>
+                </div>

-        <div class="pull-right">
-          <NcActions>
-            <NcActionButton @click="removeEdit" icon="icon-delete"></NcActionButton>
-          </NcActions>
-        </div>
+                <div class="pull-right">
+                    <Actions>
+                        <ActionButton @click="removeEdit" icon="icon-delete"></ActionButton>
+                    </Actions>
+                </div>

-        <NcActions>
-          <NcActionButton @click="saveEdit" icon="icon-checkmark"></NcActionButton>
-        </NcActions>
-      </div>
-    </NcModal>
-  </div>
+                <Actions>
+                    <ActionButton @click="saveEdit" icon="icon-checkmark"></ActionButton>
+                </Actions>
+            </div>
+		</Modal>
+    </div>
 </template>

-<style>
-.modal__content {
-  padding: 10px;
-}
+<style scoped>
+    .modal__content {
+        width: 200px;
+        padding: 10px;
+    }

-.modal__content .lang {
-  width: 60px;
-  display: inline-block;
-  padding: 4px;
-  box-sizing: border-box;
-}
+    .modal__content .lang {
+        width: 60px;
+        display: inline-block;
+        padding: 4px;
+        box-sizing: border-box;
+    }

-.pull-right {
-  float: right;
-}
+    .modal__content input[type=text] {
+        width: calc(100% - 85px);
+        display: inline-block;
+        margin: 0;
+    }
+
+    .pull-right {
+        float: right;
+    }
 </style>

 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'

 export default {
-  name: 'AdminCategoriesCustom',
-  components: {
-    NcModal,
-    NcActions,
-    NcActionButton,
-  },
-  data() {
-    return {
-      input: null,
-      values: [],
-      langs: [],
-      addForm: false,
-      editForm: false,
-      newValue: {},
-      editValue: {},
+    name: 'AdminCategoriesCustom',
+    components: {
+        Modal,
+        Actions,
+        ActionButton,
+    },
+    data() {
+        return {
+            input: null,
+            values: [],
+            langs: [],
+            addForm: false,
+            editForm: false,
+            newValue: {},
+            editValue: {},
+        }
+    },
+    methods: {
+        init() {
+            this.values = JSON.parse(this.input.value)
+            this.langs = JSON.parse(this.input.getAttribute('data-langs'))
+        },
+        update() {
+            this.input.value = JSON.stringify(this.values)
+        },
+        showAddForm() {
+            this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
+
+            this.addForm = true
+        },
+        showEditForm(value) {
+            this.editValue = {id: value.id}
+
+            for (let i of this.langs) {
+                this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
+            }
+
+            this.editForm = true
+        },
+        saveAdd() {
+            for (let i of this.langs) {
+                if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
+                    return
+                }
+            }
+
+            this.values.push(this.newValue)
+            this.update()
+            this.hideAddForm()
+            this.newValue = {}
+        },
+        saveEdit() {
+            for (let i of this.langs) {
+                if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
+                    return
+                }
+            }
+
+            for (let i in this.values) {
+                if (this.values[i].id === this.editValue.id) {
+                    this.values[i] = this.editValue
+                }
+            }
+
+            this.update()
+            this.hideEditForm()
+        },
+        removeEdit() {
+            for (let i in this.values) {
+                if (this.values[i].id === this.editValue.id) {
+                    this.values.splice(i, 1);
+                }
+            }
+
+            this.update()
+            this.hideEditForm()
+        },
+        hideAddForm() {
+            this.addForm = false
+        },
+        hideEditForm() {
+            this.editForm = false
+        },
+    },
+    mounted() {
+        this.input = document.querySelector('input[name="categories-custom"]')
+        this.init()
    }
-  },
-  methods: {
-    init() {
-      this.values = JSON.parse(this.input.value)
-      this.langs = JSON.parse(this.input.getAttribute('data-langs'))
-    },
-    update() {
-      this.input.value = JSON.stringify(this.values)
-    },
-    showAddForm() {
-      this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
-
-      this.addForm = true
-    },
-    showEditForm(value) {
-      this.editValue = {id: value.id}
-
-      for (let i of this.langs) {
-        this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
-      }
-
-      this.editForm = true
-    },
-    saveAdd() {
-      for (let i of this.langs) {
-        if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
-          return
-        }
-      }
-
-      this.values.push(this.newValue)
-      this.update()
-      this.hideAddForm()
-      this.newValue = {}
-    },
-    saveEdit() {
-      for (let i of this.langs) {
-        if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
-          return
-        }
-      }
-
-      for (let i in this.values) {
-        if (this.values[i].id === this.editValue.id) {
-          this.values[i] = this.editValue
-        }
-      }
-
-      this.update()
-      this.hideEditForm()
-    },
-    removeEdit() {
-      for (let i in this.values) {
-        if (this.values[i].id === this.editValue.id) {
-          this.values.splice(i, 1);
-        }
-      }
-
-      this.update()
-      this.hideEditForm()
-    },
-    hideAddForm() {
-      this.addForm = false
-    },
-    hideEditForm() {
-      this.editForm = false
-    },
-  },
-  mounted() {
-    this.input = document.querySelector('input[name="categories-custom"]')
-    this.init()
-  }
 }
 </script>
@@ -1,309 +0,0 @@
-
-<!--
-  - @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -->
-
-<template>
-  <nav class="app-menu show">
-    <ul class="app-menu-main" v-if="apps !== null">
-      <li v-for="app in mainAppList()"
-        :key="app.id"
-        :data-app-id="app.id"
-        class="app-menu-entry"
-        :class="{ 'app-menu-entry__active': app.active }"
-        :style="makeStyle(app)"
-        >
-        <a :href="app.href"
-          :class="{ 'has-unread': app.unread > 0 }"
-          :aria-label="appLabel(app)"
-          :aria-current="app.active ? 'page' : false">
-          <img :src="app.icon" alt="">
-          <div class="app-menu-entry--label">
-            {{ app.name }}
-            <span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
-          </div>
-        </a>
-      </li>
-    </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')" v-if="apps !== null">
-      <NcActionLink v-for="app in popoverAppList()"
-        :key="app.id"
-        :aria-label="appLabel(app)"
-        :aria-current="app.active ? 'page' : false"
-        :href="app.href"
-        class="app-menu-popover-entry">
-        <template #icon>
-          <div class="app-icon" :class="{ 'has-unread': app.unread > 0 }">
-            <img :src="app.icon" alt="">
-          </div>
-        </template>
-        {{ app.name }}
-        <span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
-      </NcActionLink>
-    </NcActions>
-  </nav>
-</template>
-
-<script>
-import { loadState } from '@nextcloud/initial-state'
-import { NcActions, NcActionLink } from '@nextcloud/vue'
-
-export default {
-  name: 'AppMenu',
-  components: {
-    NcActions, NcActionLink,
-  },
-  data() {
-    return {
-      apps: null,
-      appLimit: 0,
-      observer: null,
-    }
-  },
-  mounted() {
-    const ncApps = loadState('core', 'apps', {})
-    this.apps = {}
-    let orders = {}
-
-    window.menuAppsOrder.forEach((app, order) => {
-      orders[app] = order + 1
-    })
-
-    Array.from(window.topMenuApps).forEach((id) => {
-      if (ncApps.hasOwnProperty(id)) {
-        this.apps[id] = ncApps[id]
-        this.apps[id].order = orders[id] || null
-      }
-    })
-
-    this.observer = new ResizeObserver(this.resize)
-    this.observer.observe(this.$el)
-    this.resize()
-  },
-  beforeDestroy() {
-    this.observer.disconnect()
-  },
-  methods: {
-    appLabel() {
-      return (app) => app.name
-        + (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
-        + (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
-    },
-    appList() {
-      return Object.values(this.apps)
-    },
-    mainAppList() {
-      return this.appList().slice(0, this.appLimit)
-    },
-    popoverAppList() {
-      return this.appList().slice(this.appLimit)
-    },
-    setNavigationCounter(id, counter) {
-      this.$set(this.apps[id], 'unread', counter)
-    },
-    resize() {
-      const availableWidth = this.$el.offsetWidth
-      let appCount = Math.floor(availableWidth / 50) - 1
-      const popoverAppCount = this.appList.length - appCount
-      if (popoverAppCount === 1) {
-        appCount--
-      }
-      if (appCount < 1) {
-        appCount = 0
-      }
-      this.appLimit = appCount
-    },
-    makeStyle(app) {
-      if (app.order !== null) {
-        return `order: ${app.order}`
-      }
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-$header-icon-size: 20px;
-
-.app-menu {
-  width: 100%;
-  display: flex;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-}
-.app-menu-main {
-  display: flex;
-  flex-wrap: nowrap;
-
-  .app-menu-entry {
-    width: 50px;
-    height: 50px;
-    position: relative;
-    display: flex;
-    opacity: .7;
-
-    &.app-menu-entry__active {
-      opacity: 1;
-
-      &::before {
-        content: " ";
-        position: absolute;
-        pointer-events: none;
-        border-bottom-color: var(--color-main-background);
-        transform: translateX(-50%);
-        width: 12px;
-        height: 5px;
-        border-radius: 3px;
-        background-color: var(--color-primary-text);
-        left: 50%;
-        bottom: 6px;
-        display: block;
-        transition: all 0.1s ease-in-out;
-        opacity: 1;
-      }
-
-      .app-menu-entry--label {
-        font-weight: bold;
-      }
-    }
-
-    a {
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      margin: 2px;
-      color: var(--color-primary-text);
-      position: relative;
-    }
-
-    img {
-      transition: margin 0.1s ease-in-out;
-      width: $header-icon-size;
-      height: $header-icon-size;
-      padding: calc((100% - $header-icon-size) / 2);
-      filter: var(--primary-invert-if-bright);
-    }
-
-    .app-menu-entry--label {
-      opacity: 0;
-      position: absolute;
-      font-size: 12px;
-      color: var(--color-primary-text);
-      text-align: center;
-      bottom: -5px;
-      left: 50%;
-      display: block;
-      min-width: 100%;
-      transform: translateX(-50%);
-      transition: all 0.1s ease-in-out;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    &:hover,
-    &:focus-within {
-      opacity: 1;
-      .app-menu-entry--label {
-        opacity: 1;
-        font-weight: bold;
-        font-size: 14px;
-        bottom: 0;
-        width: auto;
-        overflow: visible;
-      }
-    }
-
-  }
-
-  // Show labels
-  &:hover,
-  &:focus-within,
-  .app-menu-entry:hover,
-  .app-menu-entry:focus {
-    opacity: 1;
-
-    img {
-      margin-top: -6px;
-    }
-
-    .app-menu-entry--label {
-      opacity: 1;
-      bottom: 0;
-    }
-
-    &::before, .app-menu-entry::before {
-      opacity: 0;
-    }
-  }
-}
-
-::v-deep .app-menu-more .button-vue--vue-tertiary {
-  color: var(--color-primary-text);
-  opacity: .7;
-  margin: 3px;
-
-  &:hover {
-    opacity: 1;
-    background-color: transparent !important;
-  }
-
-  &:focus-visible {
-    opacity: 1;
-    background-color: transparent !important;
-    border-radius: var(--border-radius);
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary-text);
-  }
-}
-
-.app-menu-popover-entry {
-  .app-icon {
-    position: relative;
-    height: 44px;
-
-    &.has-unread::after {
-      background-color: var(--color-main-text);
-    }
-
-    img {
-      filter: var(--background-invert-if-bright);
-      width: $header-icon-size;
-      height: $header-icon-size;
-      padding: calc((50px - $header-icon-size) / 2);
-    }
-  }
-}
-
-.has-unread::after {
-  content: "";
-  width: 8px;
-  height: 8px;
-  background-color: var(--color-primary-text);
-  border-radius: 50%;
-  position: absolute;
-  display: block;
-  top: 10px;
-  right: 10px;
-}
-
-.unread-counter {
-  display: none;
-}
-</style>
@@ -15,11 +15,11 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener side-menu-closer"></button>
+    <button class="side-menu-opener side-menu-closer"></button>
 </template>

 <script>
 export default {
-  name: 'CloserButton',
+    name: 'CloserButton',
 }
 </script>
@@ -15,28 +15,28 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="side-menu-loader">
-    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fill-rule="evenodd">
-        <g transform="translate(1 1)" stroke-width="2">
-          <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-          <path d="M36 18c0-9.94-8.06-18-18-18">
-            <animateTransform
-              attributeName="transform"
-              type="rotate"
-              from="0 18 18"
-              to="360 18 18"
-              dur="1s"
-              repeatCount="indefinite"/>
-          </path>
-        </g>
-      </g>
-    </svg>
-  </div>
+    <div class="side-menu-loader">
+        <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fill-rule="evenodd">
+                <g transform="translate(1 1)" stroke-width="2">
+                    <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                    <path d="M36 18c0-9.94-8.06-18-18-18">
+                        <animateTransform
+                            attributeName="transform"
+                            type="rotate"
+                            from="0 18 18"
+                            to="360 18 18"
+                            dur="1s"
+                            repeatCount="indefinite"/>
+                    </path>
+                </g>
+            </g>
+        </svg>
+    </div>
 </template>

 <script>
 export default {
-  name: 'Loader',
+    name: 'Loader',
 }
 </script>
@@ -15,30 +15,30 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div v-bind:class="classes">
-    <a v-if="link !== null" v-bind:href="link">
-      <img v-bind:src="image" alt="Logo">
-    </a>
-    <img v-else v-bind:src="image" alt="Logo">
-  </div>
+    <div v-bind:class="classes">
+        <a v-if="link !== null" v-bind:href="link">
+            <img v-bind:src="image" alt="Logo">
+        </a>
+        <img v-else v-bind:src="image" alt="Logo">
+    </div>
 </template>

 <script>
 export default {
-  name: 'Logo',
-  props: {
-    image: {
-      type: String,
-      required: true
+    name: 'Logo',
+    props: {
+        image: {
+            type: String,
+            required: true
+        },
+        link: {
+            type: String,
+            required: false
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
    },
-    link: {
-      type: String,
-      required: false
-    },
-    classes: {
-      type: Object,
-      required: true
-    },
-  },
 }
 </script>
@@ -15,11 +15,11 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener"></button>
+    <button class="side-menu-opener"></button>
 </template>

 <script>
 export default {
-  name: 'OpenerButton',
+    name: 'OpenerButton',
 }
 </script>
@@ -1,20 +0,0 @@
-const createElement = require('./lib/createElement')
-
-const PageLoader = () => {
-  const pageLoader = createElement('div', {id: 'side-menu-loader'})
-  const pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
-
-  pageLoader.appendChild(pageLoaderBar)
-  document.querySelector('body').appendChild(pageLoader)
-
-  let pageLoaderValue = 0
-
-  window.addEventListener('beforeunload', () => {
-    setInterval(() => {
-      pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
-      pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
-    }, 25)
-  })
-}
-
-module.exports = PageLoader
@@ -15,33 +15,33 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="side-menu-settings">
-    <a v-bind:href="href">
-      {{ label }}
+    <div class="side-menu-settings">
+        <a v-bind:href="href">
+            {{ label }}

-      <span class="avatardiv avatardiv-shown">
-        <img v-bind:src="avatar">
-      </span>
-    </a>
-  </div>
+            <span class="avatardiv avatardiv-shown">
+                <img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
+            </span>
+        </a>
+    </div>
 </template>

 <script>
 export default {
-  name: 'SettingsButton',
-  props: {
-    label: {
-      type: String,
-      required: true
+    name: 'SettingsButton',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        avatar: {
+            type: String,
+            required: true
+        },
    },
-    href: {
-      type: String,
-      required: true
-    },
-    avatar: {
-      type: String,
-      required: true
-    },
-  },
 }
 </script>
@@ -16,56 +16,35 @@
 */

 import Vue from 'vue'
-import AppMenu from './AppMenu.vue'
 import SideMenu from './SideMenu.vue'
 import SideMenuBig from './SideMenuBig.vue'
 import SideMenuWithCategories from './SideMenuWithCategories.vue'
-import PageLoader from './PageLoader'
-import SMcreateElement from './lib/createElement'

 Vue.prototype.OC = OC
-Vue.prototype.t = OC.L10N.translate
-
-window.SMcreateElement = SMcreateElement
-window.PageLoader = PageLoader

 const mountSideMenuComponent = () => {
-  const container = document.querySelector('#side-menu')
+    const sideMenuContainer = document.querySelector('#side-menu')

-  if (!container) {
-    return window.setTimeout(mountSideMenuComponent, 50)
-  }
+    if (sideMenuContainer) {
+        let component

-  const component = (() => {
-    if (container.getAttribute('data-bigmenu')) {
-      return SideMenuBig
-    } else if(container.getAttribute('data-sidewithcategories')) {
-      return SideMenuWithCategories
+        if (sideMenuContainer.getAttribute('data-bigmenu')) {
+            component = SideMenuBig
+        } else if(sideMenuContainer.getAttribute('data-sidewithcategories')) {
+            component = SideMenuWithCategories
+        } else {
+            component = SideMenu
+        }
+
+        const View = Vue.extend(component)
+        const sideMenu = new View({})
+
+        sideMenu.$mount('#side-menu')
+
+        document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.ready'))
    } else {
-      return SideMenu
+        window.setTimeout(mountSideMenuComponent, 50)
    }
-  })()
-
-  const View = Vue.extend(component)
-  const App = new View({})
-
-  App.$mount('#side-menu')
-
-  document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.ready'))
-}
-
-const mountAppMenu = () => {
-  const container = document.querySelector('#header .app-menu')
-
-  if (!container) {
-    return window.setTimeout(mountAppMenu, 50)
-  }
-
-  const View = Vue.extend(AppMenu)
-  const App = new View({})
-
-  App.$mount('#header .app-menu')
 }

 mountSideMenuComponent()
-mountAppMenu()
@@ -15,41 +15,40 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div id="side-menu">
-    <div class="side-menu-header">
-      <SettingsButton
-        v-if="settings"
-        v-bind:href="settings.href"
-        v-bind:label="settings.name"
-        v-bind:avatar="settings.avatar" />
+    <div id="side-menu">
+        <div class="side-menu-header">
+            <SettingsButton
+                v-if="settings"
+                v-bind:href="settings.href"
+                v-bind:label="settings.name"
+                v-bind:avatar="settings.avatar" />

-      <OpenerButton />
+            <OpenerButton />

-      <Logo
-        v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
-        v-bind:image="logo"
-        v-bind:link="logoLink"
-      />
+            <Logo
+                v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
+                v-bind:image="logo"
+                v-bind:link="logoLink"
+            />

-      <Logo
-        v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
-        v-bind:image="avatar"
-        v-bind:link="logoLink"
-      />
+            <Logo
+                v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
+                v-bind:image="avatar"
+                v-bind:link="logoLink"
+            />
+        </div>
+
+        <ul class="side-menu-apps-list">
+            <SideMenuApp
+                v-for="app in apps"
+                v-bind:classes="{'side-menu-app': true, 'active': app.active}"
+                v-bind:icon="app.icon"
+                v-bind:label="app.name"
+                v-bind:href="app.href"
+                v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+            />
+        </ul>
    </div>
-
-    <ul class="side-menu-apps-list">
-      <SideMenuApp
-        v-for="(app, key) in apps"
-        v-bind:classes="{'side-menu-app': true, 'active': app.active}"
-        v-bind:key="key"
-        v-bind:icon="app.icon"
-        v-bind:label="app.name"
-        v-bind:href="app.href"
-        v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
-      />
-    </ul>
-  </div>
 </template>

 <script>
@@ -59,81 +58,111 @@ 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',
-  components: {
-    SettingsButton,
-    OpenerButton,
-    SideMenuApp,
-    Logo,
-  },
-  data() {
-    return {
-      apps: [],
-      logo: null,
-      logoLink: null,
-      avatar: null,
-      forceLightIcon: false,
-      targetBlankApps: [],
-      settings: null,
+    name: 'SideMenu',
+    components: {
+        SettingsButton,
+        OpenerButton,
+        SideMenuApp,
+        Logo,
+    },
+    data() {
+        return {
+            apps: [],
+            logo: null,
+            logoLink: null,
+            avatar: null,
+            forceLightIcon: false,
+            targetBlankApps: [],
+            settings: null,
+        }
+    },
+    methods: {
+        retrieveApps() {
+            this.apps = []
+            const links = document.querySelectorAll('#appmenu a')
+            const menu = document.querySelector('#appmenu')
+            let menuIsHidden = true
+
+            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)
+        },
+
+        retrieveConfig() {
+            let that = this
+
+            axios
+                .get(OC.generateUrl('/apps/side_menu/js/config'))
+                .then(function(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']
+                })
+        },
+    },
+    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)
+        }
    }
-  },
-  methods: {
-    retrieveApps() {
-      const ncApps = loadState('core', 'apps', {})
-      let orders = {}
-      let finalApps = []
-
-      window.menuAppsOrder.forEach((app, order) => {
-        orders[app] = order + 1
-      })
-
-      for (let id in ncApps) {
-        if (window.topMenuApps.includes(id) && !window.topSideMenuApps.includes(id)) {
-          continue;
-        }
-
-        let app = ncApps[id]
-        app.order = orders[id] || null
-
-        finalApps.push(app)
-      }
-
-      finalApps.sort((a, b) => {
-        if (a.order === null || b.order === null) {
-          return a.name < b.name ? -1 : 1;
-        }
-
-        return a.order < b.order ? -1 : 1;
-      })
-
-      this.apps = finalApps
-
-      document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
-        detail: {apps: this.apps},
-      }))
-    },
-
-    retrieveConfig() {
-      axios
-        .get(OC.generateUrl('/apps/side_menu/js/config'))
-        .then((response) => {
-          const config = response.data
-
-          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()
-  }
 }
 </script>
@@ -15,38 +15,38 @@ You should have received a copy of the GNU Affero General Public License
 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">
-      <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>
+    <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>
+            <span class="side-menu-app-text" v-text="label"></span>
+        </a>
+    </li>
 </template>

 <script>
 export default {
-  name: 'SideMenuApp',
-  props: {
-    label: {
-      type: String,
-      required: true
+    name: 'SideMenuApp',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
+        target: {
+            type: String,
+            required: false
+        },
    },
-    icon: {
-      type: String,
-      required: true
-    },
-    href: {
-      type: String,
-      required: true
-    },
-    classes: {
-      type: Object,
-      required: true
-    },
-    target: {
-      type: String,
-      required: false
-    },
-  },
 }
 </script>
@@ -15,42 +15,41 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div id="side-menu" class="side-menu-big">
-    <div class="side-menu-header">
-      <CloserButton />
+    <div id="side-menu" class="side-menu-big">
+        <div class="side-menu-header">
+            <CloserButton />

-      <SettingsButton
-        v-if="settings"
-        v-bind:href="settings.href"
-        v-bind:label="settings.name"
-        v-bind:avatar="settings.avatar"
-      />
-
-      <OpenerButton />
-    </div>
-
-    <div class="side-menu-categories-wrapper">
-      <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">
-          <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-bind:key="appId"
-              v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
-              v-bind:icon="app.icon"
-              v-bind:label="app.name"
-              v-bind:href="app.href"
-              v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+            <SettingsButton
+                v-if="settings"
+                v-bind:href="settings.href"
+                v-bind:label="settings.name"
+                v-bind:avatar="settings.avatar"
            />
-          </ul>
+
+            <OpenerButton />
+        </div>
+
+        <div class="side-menu-categories-wrapper">
+            <div class="side-menu-categories">
+                <Loader v-if="!items.length" />
+
+                <div class="side-menu-category" v-for="category in items">
+                    <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-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
+                            v-bind:icon="app.icon"
+                            v-bind:label="app.name"
+                            v-bind:href="app.href"
+                            v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+                        />
+                    </ul>
+                </div>
+            </div>
        </div>
-      </div>
    </div>
-  </div>
 </template>

 <script>
@@ -62,63 +61,69 @@ import Loader from './Loader'
 import SideMenuBigApp from './SideMenuBigApp'

 export default {
-  name: 'SideMenuBig',
-  components: {
-    SettingsButton,
-    OpenerButton,
-    CloserButton,
-    Loader,
-    SideMenuBigApp,
-  },
-  data() {
-    return {
-      items: [],
-      activeApp: null,
-      targetBlank: false,
-      targetBlankApps: [],
-      settings: null,
+    name: 'SideMenuBig',
+    components: {
+        SettingsButton,
+        OpenerButton,
+        CloserButton,
+        Loader,
+        SideMenuBigApp,
+    },
+    data() {
+        return {
+            items: [],
+            activeApp: null,
+            targetBlank: false,
+            targetBlankApps: [],
+            settings: null,
+        }
+    },
+    methods: {
+        retrieveApps() {
+            this.apps = []
+            let that = this
+
+            axios
+                .get(OC.generateUrl('/apps/side_menu/nav/items'))
+                .then(function(response) {
+                    that.items = response.data.items
+
+                    let apps = []
+
+                    for (let category of that.items) {
+                        for (let a in category.apps) {
+                            apps.push(category.apps[a])
+                        }
+                    }
+
+                    document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+                        detail: {apps: apps},
+                    }))
+                })
+        },
+
+        retrieveActiveApp() {
+            let activeAppLink = document.querySelector('#appmenu a.active')
+            this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
+        },
+
+        retrieveConfig() {
+            let that = this
+
+            axios
+                .get(OC.generateUrl('/apps/side_menu/js/config'))
+                .then(function(response) {
+                    const config = response.data
+
+                    that.targetBlankApps = config['target-blank-apps']
+                    that.settings = config['settings']
+                })
+        },
+    },
+    mounted() {
+        this.retrieveConfig()
+        this.retrieveApps()
+        this.retrieveActiveApp()
    }
-  },
-  methods: {
-    retrieveApps() {
-      axios
-        .get(OC.generateUrl('/apps/side_menu/nav/items'))
-        .then((response) => {
-          this.items = response.data.items
-          let apps = []
-
-          for (let category of this.items) {
-            for (let a in category.apps) {
-              apps.push(category.apps[a])
-            }
-          }
-
-          document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
-            detail: {apps: apps},
-          }))
-        })
-    },
-
-    retrieveActiveApp() {
-      let activeAppLink = document.querySelector('#appmenu a.active')
-      this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
-    },
-
-    retrieveConfig() {
-      axios
-        .get(OC.generateUrl('/apps/side_menu/js/config'))
-        .then((response) => {
-          const config = response.data
-
-          this.targetBlankApps = config['target-blank-apps']
-          this.settings = config['settings']
-        })
-    },
-  },
-  mounted() {
-    this.retrieveConfig()
-    this.retrieveApps()
-    this.retrieveActiveApp()
-  }
 }
 </script>
@@ -15,38 +15,38 @@ You should have received a copy of the GNU Affero General Public License
 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">
-      <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>
+    <li v-bind:class="classes">
+        <a v-bind:href="href" :target="target" v-bind:title="label">
+            <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>
 </template>

 <script>
 export default {
-  name: 'SideMenuBigApp',
-  props: {
-    label: {
-      type: String,
-      required: true
+    name: 'SideMenuBigApp',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
+        target: {
+            type: String,
+            required: false
+        },
    },
-    icon: {
-      type: String,
-      required: true
-    },
-    href: {
-      type: String,
-      required: true
-    },
-    classes: {
-      type: Object,
-      required: true
-    },
-    target: {
-      type: String,
-      required: false
-    },
-  },
 }
 </script>
@@ -15,40 +15,39 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div id="side-menu" class="side-menu-with-categories">
-    <div class="side-menu-header">
-      <SettingsButton
-        v-if="settings"
-        v-bind:href="settings.href"
-        v-bind:label="settings.name"
-        v-bind:avatar="settings.avatar"
-      />
-
-      <OpenerButton />
-    </div>
-
-    <div class="side-menu-categories-wrapper">
-      <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">
-          <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-bind:key="appId"
-              v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
-              v-bind:icon="app.icon"
-              v-bind:label="app.name"
-              v-bind:href="app.href"
-              v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+    <div id="side-menu" class="side-menu-with-categories">
+        <div class="side-menu-header">
+            <SettingsButton
+                v-if="settings"
+                v-bind:href="settings.href"
+                v-bind:label="settings.name"
+                v-bind:avatar="settings.avatar"
            />
-          </ul>
+
+            <OpenerButton />
+        </div>
+
+        <div class="side-menu-categories-wrapper">
+            <div class="side-menu-categories">
+                <Loader v-if="!items.length" />
+
+                <div class="side-menu-category" v-for="category in items">
+                    <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-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
+                            v-bind:icon="app.icon"
+                            v-bind:label="app.name"
+                            v-bind:href="app.href"
+                            v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+                        />
+                    </ul>
+                </div>
+            </div>
        </div>
-      </div>
    </div>
-  </div>
 </template>

 <script>
@@ -60,63 +59,69 @@ import Loader from './Loader'
 import SideMenuBigApp from './SideMenuBigApp'

 export default {
-  name: 'SideMenuWithCategories',
-  components: {
-    SettingsButton,
-    OpenerButton,
-    CloserButton,
-    Loader,
-    SideMenuBigApp,
-  },
-  data() {
-    return {
-      items: [],
-      activeApp: null,
-      targetBlank: false,
-      targetBlankApps: [],
-      settings: null,
+    name: 'SideMenuWithCategories',
+    components: {
+        SettingsButton,
+        OpenerButton,
+        CloserButton,
+        Loader,
+        SideMenuBigApp,
+    },
+    data() {
+        return {
+            items: [],
+            activeApp: null,
+            targetBlank: false,
+            targetBlankApps: [],
+            settings: null,
+        }
+    },
+    methods: {
+        retrieveApps() {
+            this.apps = []
+            let that = this
+
+            axios
+                .get(OC.generateUrl('/apps/side_menu/nav/items'))
+                .then(function(response) {
+                    that.items = response.data.items
+
+                    let apps = []
+
+                    for (let category of that.items) {
+                        for (let a in category.apps) {
+                            apps.push(category.apps[a])
+                        }
+                    }
+
+                    document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+                        detail: {apps: apps},
+                    }))
+                })
+        },
+
+        retrieveActiveApp() {
+            let activeAppLink = document.querySelector('#appmenu a.active')
+            this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
+        },
+
+        retrieveConfig() {
+            let that = this
+
+            axios
+                .get(OC.generateUrl('/apps/side_menu/js/config'))
+                .then(function(response) {
+                    const config = response.data
+
+                    that.targetBlankApps = config['target-blank-apps']
+                    that.settings = config['settings']
+                })
+        },
+    },
+    mounted() {
+        this.retrieveConfig()
+        this.retrieveApps()
+        this.retrieveActiveApp()
    }
-  },
-  methods: {
-    retrieveApps() {
-      axios
-        .get(OC.generateUrl('/apps/side_menu/nav/items'))
-        .then((response) => {
-          this.items = response.data.items
-          let apps = []
-
-          for (let category of this.items) {
-            for (let a in category.apps) {
-              apps.push(category.apps[a])
-            }
-          }
-
-          document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
-            detail: {apps: apps},
-          }))
-        })
-    },
-
-    retrieveActiveApp() {
-      let activeAppLink = document.querySelector('#appmenu a.active')
-      this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
-    },
-
-    retrieveConfig() {
-      axios
-        .get(OC.generateUrl('/apps/side_menu/js/config'))
-        .then((response) => {
-          const config = response.data
-
-          this.targetBlankApps = config['target-blank-apps']
-          this.settings = config['settings']
-        })
-    },
-  },
-  mounted() {
-    this.retrieveConfig()
-    this.retrieveApps()
-    this.retrieveActiveApp()
-  }
 }
 </script>
@@ -26,257 +26,235 @@ let elements = []
 const selector = '#side-menu-message'

 const userConfig = (name, value, callbacks) => {
-  const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
-  const formData = []
+    const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
+    const formData = []

-  formData.push('name=' + encodeURIComponent(name))
-  formData.push('value=' + encodeURIComponent(value))
+    formData.push('name=' + encodeURIComponent(name))
+    formData.push('value=' + encodeURIComponent(value))

-  fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    body: formData.join('&')
-  })
-  .then(callbacks.success)
-  .catch(callbacks.error)
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: formData.join('&')
+    })
+    .then(callbacks.success)
+    .catch(callbacks.error)
 }

 const appConfig = (name, value, callbacks) => {
-  OCP.AppConfig.setValue('side_menu', name, value, callbacks)
+    OCP.AppConfig.setValue('side_menu', name, value, callbacks)
 }

 const saveSettings = (key) => {
-  const element = elements[key]
+    const element = elements[key]

-  if (!element) {
-    return
-  }
-
-  let value
-  let name
-
-  if (element.hasAttribute('data-checkbox')) {
-    name = element.getAttribute('data-name')
-    value = []
-
-    const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
-
-    for (let input of inputs) {
-      value.push(input.value)
+    if (!element) {
+        return
    }

-    value = JSON.stringify(value)
-  } else {
-    name = element.getAttribute('name')
-    value = element.value
-  }
+    let value
+    let name

-  const size = elements.length
+    if (element.hasAttribute('data-checkbox')) {
+        name = element.getAttribute('data-name')
+        value = []

-  if (name === 'cache') {
-    ++value
-  }
+        const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')

-  const progress = document.querySelector('#side-menu-save-progress')
+        for (let input of inputs) {
+            value.push(input.value)
+        }

-  progress.style.width = '40px';
-  progress.style.marginLeft = '5px';
-
-  const callbacks = {
-    success: () => {
-      const percent = parseInt((key + 1) * 100 / size);
-
-      progress.setAttribute('value', percent)
-
-      if (key < size - 1) {
-        saveSettings(key + 1)
-      } else {
-        location.reload()
-      }
-    },
-    error: () => {
-      OC.msg.finishedError(selector, t('side_menu', 'Error while saving "' + element + '"'))
+        value = JSON.stringify(value)
+    } else {
+        name = element.getAttribute('name')
+        value = element.value
    }
-  }

-  if (element.hasAttribute('data-personal')) {
-    userConfig(name, value, callbacks)
-  } else {
-    appConfig(name, value, callbacks)
-  }
+    const size = elements.length
+
+    if (name === 'cache') {
+        ++value
+    }
+
+    const progress = document.querySelector('#side-menu-save-progress')
+
+    progress.style.width = '40px';
+    progress.style.marginLeft = '5px';
+
+    const callbacks = {
+        success: () => {
+            const percent = parseInt((key + 1) * 100 / size);
+
+            progress.setAttribute('value', percent)
+
+            if (key < size - 1) {
+                saveSettings(key + 1)
+            } else {
+                location.reload()
+            }
+        },
+        error: () => {
+            OC.msg.finishedError(selector, t('side_menu', 'Error while saving "' + element + '"'))
+        }
+    }
+
+    if (element.hasAttribute('data-personal')) {
+        userConfig(name, value, callbacks)
+    } else {
+        appConfig(name, value, callbacks)
+    }
 }

 const elementToggler = (element) => {
-  let display = 'none'
+    let display = 'none'

-  if (window.getComputedStyle(element).display === 'none') {
-    display = 'block'
-  }
+    if (window.getComputedStyle(element).display === 'none') {
+        display = 'block'
+    }

-  element.style.display = display
+    element.style.display = display
 }

 const updateAppsCategoriesCustom = () => {
-  let values = {}
+    let values = {}

-  for (let item of document.querySelectorAll('.apps-categories-custom')) {
-    let app = item.getAttribute('data-app')
-    let value = item.value
+    for (let item of document.querySelectorAll('.apps-categories-custom')) {
+        let app = item.getAttribute('data-app')
+        let value = item.value

-    if (value) {
-      values[app] = value
+        if (value) {
+            values[app] = value
+        }
    }
-  }

-  document.querySelector('#apps-categories-custom').value = JSON.stringify(values)
+    document.querySelector('#apps-categories-custom').value = JSON.stringify(values)
 }

 document.addEventListener('DOMContentLoaded', () => {
-  $('*[data-toggle="tooltip"]').tooltip();
+    $('*[data-toggle="tooltip"]').tooltip();

-  if (document.querySelector('#side-menu-categories-custom')) {
-    const View = Vue.extend(AdminCategoriesCustom)
-    const adminCategoriesCustom = new View({})
+    if (document.querySelector('#side-menu-categories-custom')) {
+        const View = Vue.extend(AdminCategoriesCustom)
+        const adminCategoriesCustom = new View({})

-    adminCategoriesCustom.$mount('#side-menu-categories-custom')
-  }
+        adminCategoriesCustom.$mount('#side-menu-categories-custom')
+    }

-  elements = document.querySelectorAll('.side-menu-setting')
+    elements = document.querySelectorAll('.side-menu-setting')

-  document.querySelector('#side-menu-save').addEventListener('click', (event) => {
-    event.preventDefault()
-    OC.msg.startSaving(selector)
+    document.querySelector('#side-menu-save').addEventListener('click', (event) => {
+        event.preventDefault()
+        OC.msg.startSaving(selector)

-    saveSettings(0)
-  })
-
-  const resets = document.querySelectorAll('.btn-reset')
-
-  for (let btn of resets) {
-    btn.addEventListener('click', (event) => {
-      const target = event.target
-      const values = JSON.parse(target.getAttribute('data-reset'))
-
-      target.classList.toggle('btn-reset--progress', true)
-
-      for (let i in values) {
-        document.querySelector(`#${i}`).value = values[i]
-      }
-
-      window.setTimeout(() => {
-        target.classList.toggle('btn-reset--progress', false)
-      }, 800)
+        saveSettings(0)
    })
-  }

-  const displays = document.querySelectorAll('.side-menu-display')
+    const resets = document.querySelectorAll('.btn-reset')

-  for (let display of displays) {
-    display.addEventListener('click', (event) => {
-      const target = event.target
+    for (let btn of resets) {
+        btn.addEventListener('click', (event) => {
+            const target = event.target
+            const values = JSON.parse(target.getAttribute('data-reset'))

-      for (let d of displays) {
-        d.classList.toggle('is-active', d === display)
-      }
+            for (let i in values) {
+                document.querySelector(`#${i}`).value = values[i]
+            }
+        })
+    }

-      document.querySelector('#side-menu-always-displayed').value = target.getAttribute('data-alwaysdiplayed')
-      document.querySelector('#side-menu-big-menu').value = target.getAttribute('data-bigmenu')
-      document.querySelector('#side-menu-side-with-categories').value = target.getAttribute('data-sidewithcategories')
+    const displays = document.querySelectorAll('.side-menu-display')
+
+    for (let display of displays) {
+        display.addEventListener('click', (event) => {
+            const target = event.target
+
+            for (let d of displays) {
+                d.classList.toggle('is-active', d === display)
+            }
+
+            document.querySelector('#side-menu-always-displayed').value = target.getAttribute('data-alwaysdiplayed')
+            document.querySelector('#side-menu-big-menu').value = target.getAttribute('data-bigmenu')
+            document.querySelector('#side-menu-side-with-categories').value = target.getAttribute('data-sidewithcategories')
+        })
+    }
+
+    for (let item of document.querySelectorAll('.apps-categories-custom')) {
+        item.addEventListener('change', (event) => {
+            updateAppsCategoriesCustom()
+        })
+    }
+
+    for (let item of document.querySelectorAll('.side-menu-setting-live')) {
+        item.addEventListener('change', (event) => {
+            const target = event.target
+            const name = target.getAttribute('name')
+
+            let value = target.value
+            let id = null
+
+            if (name === 'background-color-opacity') {
+                id = '#side-menu-background-color, #side-menu-background-color-to'
+            } else if (name === 'dark-mode-background-color-opacity') {
+                id = '#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to'
+            }
+
+            if (id) {
+                document.querySelector(id).dispatchEvent(new CustomEvent('change'))
+
+                return
+            }
+
+            if (name === 'opener') {
+                const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
+
+                value = `url(${url})`
+            }
+
+            if (name === 'icon-invert-filter' || name === 'icon-opacity') {
+                value/=100
+            }
+
+            if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
+                const opacity = parseInt(document.querySelector('#side-menu-dark-mode-background-color-opacity').value * 255 / 100)
+
+                value = [value, opacity.toString(16)].join('')
+            } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
+                const opacity = parseInt(document.querySelector('#side-menu-background-color-opacity').value * 255 / 100)
+
+                value = [value, opacity.toString(16)].join('')
+            }
+
+            document.documentElement.style.setProperty('--side-menu-' + name, value)
+        })
+    }
+
+    for (let toggler of document.querySelectorAll('.side-menu-toggler')) {
+        toggler.addEventListener('click', (event) => {
+            const target = event.target
+            const element = document.querySelector(target.getAttribute('data-target'))
+
+            elementToggler(element)
+        })
+    }
+
+    sortable('#categories-list .side-menu-setting-list', {
+        placeholderClass: 'side-menu-setting-list-drop'
    })
-  }

-  for (let item of document.querySelectorAll('.apps-categories-custom')) {
-    item.addEventListener('change', (event) => {
-      updateAppsCategoriesCustom()
-    })
-  }
+    try {
+        sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
+            let value = []

-  for (let item of document.querySelectorAll('.side-menu-setting-live')) {
-    item.addEventListener('change', (event) => {
-      const target = event.target
-      const name = target.getAttribute('name')
+            for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+                console.log(item.getAttribute('data-id'))
+                value.push(item.getAttribute('data-id'))
+            }

-      let value = target.value
-      let id = null
-
-      if (name === 'background-color-opacity') {
-        id = '#side-menu-background-color, #side-menu-background-color-to'
-      } else if (name === 'dark-mode-background-color-opacity') {
-        id = '#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to'
-      }
-
-      if (id) {
-        document.querySelector(id).dispatchEvent(new CustomEvent('change'))
-
-        return
-      }
-
-      if (name === 'opener') {
-        const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
-
-        value = `url(${url})`
-      }
-
-      if (name === 'icon-invert-filter' || name === 'icon-opacity') {
-        value/=100
-      }
-
-      if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
-        const opacity = parseInt(document.querySelector('#side-menu-dark-mode-background-color-opacity').value * 255 / 100)
-
-        value = [value, opacity.toString(16)].join('')
-      } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
-        const opacity = parseInt(document.querySelector('#side-menu-background-color-opacity').value * 255 / 100)
-
-        value = [value, opacity.toString(16)].join('')
-      }
-
-      document.documentElement.style.setProperty('--side-menu-' + name, value)
-    })
-  }
-
-  for (let toggler of document.querySelectorAll('.side-menu-toggler')) {
-    toggler.addEventListener('click', (event) => {
-      const target = event.target
-      const element = document.querySelector(target.getAttribute('data-target'))
-
-      elementToggler(element)
-    })
-  }
-
-  sortable('#categories-list .side-menu-setting-list', {
-    placeholderClass: 'side-menu-setting-list-drop'
-  })
-
-  try {
-    sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
-      let value = []
-
-      for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
-        value.push(item.getAttribute('data-id'))
-      }
-
-      document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
-    })
-  } catch (e) {
-  }
-
-  sortable('#apps-order-list .side-menu-setting-list', {
-    placeholderClass: 'side-menu-setting-list-drop'
-  })
-
-  try {
-    sortable('#apps-order-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
-      let value = []
-
-      for (let item of document.querySelectorAll('#apps-order-list .side-menu-setting-list-item')) {
-        value.push(item.getAttribute('data-id'))
-      }
-
-      document.querySelector('input[name="apps-order"]').value = JSON.stringify(value)
-    })
-  } catch (e) {
-  }
+            document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
+        })
+    } catch (e) {
+    }
 })
@@ -3,21 +3,13 @@
 "No": "Ne"
 "Yes": "Ano"
 "Menu": "Nabídka"
-? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-  to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
-  navigate.'
-: 'Pro otevření/skrytí postranní nabídky použijte zkratku <span class="keyboard-key">Ctrl</span>+<span
-  class="keyboard-key">O</span> („O“ jako otevřít). Pro pohyb po použijte klávesu
-  <span class="keyboard-key">Tab</span>.'
+'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.': 'Pro otevření/skrytí postranní nabídky použijte zkratku <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">O</span> („O“ jako otevřít). Pro pohyb po použijte klávesu <span class="keyboard-key">Tab</span>.'
 "Top menu": "Horní nabídka"
-"Apps that not must be moved in the side menu": "Aplikace, které nepřesouvat do postranní\
-  \ nabídky"
-"If there is no selection then the global configuration is applied.": "Pokud neexistuje\
-  \ žádný výběr, je uplatněno globální nastavení."
+"Apps that not must be moved in the side menu": "Aplikace, které nepřesouvat do postranní nabídky"
+"If there is no selection then the global configuration is applied.": "Pokud neexistuje žádný výběr, je uplatněno globální nastavení."
 "Experimental": "Experimentální"
 "Save": "Uložit"
-"You like this app and you want to support me?": "Líbí se vám tato aplikace a chcete\
-  \ podpořit její vývoj?"
+"You like this app and you want to support me?": "Líbí se vám tato aplikace a chcete podpořit její vývoj?"
 "Buy me a coffee ☕": "Kupte mi kafe ☕"
 "Hidden": "Skryté"
 "Small": "Malé"
@@ -44,25 +36,19 @@
 "After the logo": "Za logem"
 "Position": "Pozice"
 "Show only the opener (hidden logo)": "Zobrazovat pouze otevírací tlačítko (logo skryto)"
-"Do not display the side menu and the opener if there is no application (eg: public pages).": "Nezobrazovat\
-  \ postranní nabídku a její otevírací tlačítko pokud nejsou dostupné žádné aplikace\
-  \ (např. na veřejných stránkách)."
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Nezobrazovat postranní nabídku a její otevírací tlačítko pokud nejsou dostupné žádné aplikace (např. na veřejných stránkách)."
 "Panel": "Panel"
-"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Otevřít\
-  \ nabídku při najetím ukazatelem na tlačítko nabídky (automaticky vypnuto pro dotykové\
-  \ obrazovky)"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Otevřít nabídku při najetím ukazatelem na tlačítko nabídky (automaticky vypnuto pro dotykové obrazovky)."
 "Display the big menu": "Zobrazit velkou nabídku"
+"This menu is not compatible with AppOrder.": "Nabídka není kompatibilní s jinou aplikací (doplňkem) „Pořadí aplikací“."
 "Display the logo": "Zobrazit logo"
-"This feature is not compatible with the <code>big menu</code> display.": "Tato funkce\
-  \ není kompatibilní se zobrazením <code>velké nabídky</code>."
+"This feature is not compatible with the <code>big menu</code> display.": "Tato funkce není kompatibilní se zobrazením <code>velké nabídky</code>."
 "Icons and texts": "Ikony a texty"
 "Loader enabled": "Načítání zapnuto"
 "Tips": "Tipy"
 "Always displayed": "Vždy zobrazeno"
-"The logo will be hidden when the menu is always displayed.": "Pokud je nabídka zobrazena\
-  \ trvale, logo bude skryto."
-"This is the automatic behavior when the menu is always displayed.": "Toto je automatické\
-  \ chování, kdy je nabídka vždy zobrazena."
+"The logo will be hidden when the menu is always displayed.": "Pokud je nabídka zobrazena trvale, logo bude skryto."
+"This is the automatic behavior when the menu is always displayed.": "Toto je automatické chování, kdy je nabídka vždy zobrazena."
 "Not compatible with touch screens.": "Nekompatibilní s dotykovými obrazovkami."
 "Big menu": "Velká nabídka"
 "Live preview": "Živý náhled"
@@ -76,13 +62,10 @@
 "Export the configuration": "Exportovat nastavení"
 "Purge the cache": "Vyprázdnit mezipaměť"
 "Show the link to settings": "Zobrazit odkaz na nastavení"
-"The menu is enabled by default for users": "Nabídka je ve výchozím stavu pro uživatele\
-  \ zapnutá"
+"The menu is enabled by default for users": "Nabídka je ve výchozím stavu pro uživatele zapnutá"
 "Except when the configuration is forced.": "S výjimkou, kdy je nastavení vynuceno."
-"Apps that should not be displayed in the menu": "Aplikace, které by neměly být v\
-  \ nabídce zobrazeny"
-"This feature is only compatible with the <code>big menu</code> display.": "Tato funkce\
-  \ je kompatibilní pouze s <code>velkou nabídkou</code>."
+"Apps that should not be displayed in the menu": "Aplikace, které by neměly být v nabídce zobrazeny"
+"This feature is only compatible with the <code>big menu</code> display.": "Tato funkce je kompatibilní pouze s <code>velkou nabídkou</ code>."
 "The logo is a link to the default app": "Logo je odkaz na výchozí aplikaci"
 "Others": "Ostatní"
 "Categories": "Kategorie"
@@ -91,13 +74,12 @@
 "Name": "Název"
 "Customed": "Přizpůsobeno"
 "Show and hide the list of categories": "Zobrazit/skrýt seznam kategorií"
-"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Tyto\
-  \ parametry jsou použity v případě, že je zapnutý (Breeze) tmavý motiv vzhledu."
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Tyto parametry jsou použity v případě, že je zapnutý (Breeze) tmavý motiv vzhledu."
 "Dark mode colors": "Barvy tmavého režimu"
 "With categories": "S kategoriemi"
 "Custom categories": "Vlastní kategorie"
 "Customize application categories": "Přizpůsobte kategorie aplikací"
-"Apps only visible in the top menu": "Aplikace jsou viditelné pouze v horní nabídce"
+"Apps only visible in the top menu": "Aplikace jsou viditelné pouze v horní nabídce "
 "Apps visible in the top and side menus": "Aplikace viditelné v horní a boční nabídce"
 "Reset to default": "Vrátit zpět na výchozí hodnoty"
 "Hidden icon": "Skrytá ikona"
@@ -108,4 +90,3 @@
 "Small text": "Malý text"
 "Normal text": "Normální text"
 "Big text": "Velký text"
-"Applications": "Applications"
@@ -3,21 +3,13 @@
 "No": "Nein"
 "Yes": "Ja"
 "Menu": "Menü"
-? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-  to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
-  navigate.'
-: 'Verwende die Tastenkombination <span class="keyboard-key">Strg</span>+<span class="keyboard-key">o</span>,
-  um das Seitenmenü ein- und auszublenden. Verwende <span class="keyboard-key">tab</span>
-  zum Navigieren.'
+'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.': 'Verwende die Tastenkombination <span class="keyboard-key">Strg</span>+<span class="keyboard-key">o</span>, um das Seitenmenü ein- und auszublenden. Verwende <span class="keyboard-key">tab</span> zum Navigieren.'
 "Top menu": "Obere Navigationsleiste"
-"Apps that not must be moved in the side menu": "Anwendungen, die nicht ins Seitenmenü\
-  \ verschoben werden sollen"
-"If there is no selection then the global configuration is applied.": "Wenn keine\
-  \ Auswahl vorhanden ist, wird die globale Konfiguration angewendet."
+"Apps that not must be moved in the side menu": "Anwendungen, die nicht ins Seitenmenü verschoben werden sollen"
+"If there is no selection then the global configuration is applied.": "Wenn keine Auswahl vorhanden ist, wird die globale Konfiguration angewendet."
 "Experimental": "Experimentell"
 "Save": "Speichern"
-"You like this app and you want to support me?": "Du magst diese Anwendung und möchtest\
-  \ mich unterstützen?"
+"You like this app and you want to support me?": "Du magst diese Anwendung und möchtest mich unterstützen?"
 "Buy me a coffee ☕": "Gib mir einen Kaffee aus ☕"
 "Hidden": "Ausblenden"
 "Small": "Klein"
@@ -44,25 +36,19 @@
 "After the logo": "Nach dem Logo"
 "Position": "Position"
 "Show only the opener (hidden logo)": "Nur das Menü-Symbol anzeigen (Logo wird ausgeblendet)"
-"Do not display the side menu and the opener if there is no application (eg: public pages).": "Zeige\
-  \ das Seitenmenü und das Menü-Symbol nicht an, wenn keine Anwendung vorhanden ist\
-  \ (z.B. bei öffentlichen Seiten)."
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Zeige das Seitenmenü und das Menü-Symbol nicht an, wenn keine Anwendung vorhanden ist (z.B. bei öffentlichen Seiten)."
 "Panel": "Panel"
-"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Öffne\
-  \ das Menü, wenn die Maus über das Menü-Symbol bewegt wird (auf Touchscreens automatisch\
-  \ deaktiviert)"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Öffne das Menü, wenn die Maus über das Menü-Symbol bewegt wird (auf Touchscreens automatisch deaktiviert)."
 "Display the big menu": "Großes Menü anzeigen"
+"This menu is not compatible with AppOrder.": "Dieses Menü ist nicht mit <code>AppOrder</code> kompatibel."
 "Display the logo": "Logo anzeigen"
-"This feature is not compatible with the <code>big menu</code> display.": "Diese Funktion\
-  \ ist nicht mit dem <code>großen Menü</code> kompatibel."
+"This feature is not compatible with the <code>big menu</code> display.": "Diese Funktion ist nicht mit dem <code>großen Menü</code> kompatibel."
 "Icons and texts": "Symbole und Texte"
 "Loader enabled": "Ladestandanzeige aktiviert"
 "Tips": "Tipps"
 "Always displayed": "Immer anzeigen"
-"The logo will be hidden when the menu is always displayed.": "Das Logo wird ausgeblendet,\
-  \ wenn das Menü immer angezeigt wird."
-"This is the automatic behavior when the menu is always displayed.": "Dies ist das\
-  \ automatische Verhalten, wenn das Menü immer angezeigt wird."
+"The logo will be hidden when the menu is always displayed.": "Das Logo wird ausgeblendet, wenn das Menü immer angezeigt wird."
+"This is the automatic behavior when the menu is always displayed.": "Dies ist das automatische Verhalten, wenn das Menü immer angezeigt wird."
 "Not compatible with touch screens.": "Nicht kompatibel mit Touchscreens."
 "Big menu": "Großes Menü"
 "Live preview": "Live-Vorschau"
@@ -71,20 +57,15 @@
 "Use my selection": "Verwende meine Auswahl"
 "Show and hide the list of applications": "Ein- und Ausblenden der Anwendungsliste"
 "Use the avatar instead of the logo": "Avatar anstelle des Logos anzeigen"
-"You do not have permission to change the settings.": "Du hast keine Berechtigung,\
-  \ die Einstellungen dieser Anwendung zu ändern."
+"You do not have permission to change the settings.": "Du hast keine Berechtigung, die Einstellungen dieser Anwendung zu ändern."
 "Force this configuration to users": "Konfiguration für alle Benutzer erzwingen"
 "Export the configuration": "Konfiguration exportieren"
 "Purge the cache": "Cache leeren"
 "Show the link to settings": "Link zu den Einstellungen anzeigen"
-"The menu is enabled by default for users": "Das Menü ist standardmäßig für alle Benutzer\
-  \ aktiviert"
-"Except when the configuration is forced.": "Gilt nicht, wenn die Konfiguration erzwungen\
-  \ wird."
-"Apps that should not be displayed in the menu": "Anwendungen, die nicht im Menü angezeigt\
-  \ werden sollen"
-"This feature is only compatible with the <code>big menu</code> display.": "Kompatibel\
-  \ mit dem <code>großen Menü</code>."
+"The menu is enabled by default for users": "Das Menü ist standardmäßig für alle Benutzer aktiviert"
+"Except when the configuration is forced.": "Gilt nicht, wenn die Konfiguration erzwungen wird."
+"Apps that should not be displayed in the menu": "Anwendungen, die nicht im Menü angezeigt werden sollen"
+"This feature is only compatible with the <code>big menu</code> display.": "Kompatibel mit dem <code>großen Menü</code>."
 "The logo is a link to the default app": "Das Logo ist ein Link zur Standard-App"
 "Others": "Andere"
 "Categories": "Kategorien"
@@ -93,14 +74,12 @@
 "Name": "Name"
 "Customed": "Benutzerdefiniert"
 "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
-"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese\
-  \ Optionen werden auf <code>Dark Theme</code> oder <code>Breeze Dark Theme</code>\
-  \ angewendet."
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Optionen werden auf <code>Dark Theme</code> oder <code>Breeze Dark Theme</code> angewendet."
 "Dark mode colors": "Farben für den dunklen Modus"
 "With categories": "Mit Kategorien"
 "Custom categories": "Benutzerdefinierte Kategorien"
 "Customize application categories": "Anwendungskategorien anpassen"
-"Apps only visible in the top menu": "Apps nur im oberen Menü sichtbar"
+"Apps only visible in the top menu": "Apps nur im oberen Menü sichtbar "
 "Apps visible in the top and side menus": "Apps im oberen und seitlichen Menü sichtbar"
 "Reset to default": "Auf Standard zurücksetzen"
 "Hidden icon": "Verstecktes Symbol"
@@ -111,4 +90,3 @@
 "Small text": "Kleiner Text"
 "Normal text": "Normaler Text"
 "Big text": "Großer Text"
-"Applications": "Applications"
@@ -3,21 +3,13 @@
 "No": "Non"
 "Yes": "Oui"
 "Menu": "Menu"
-? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-  to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
-  navigate.'
-: 'Utiliser le raccourcis clavier <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-  pour ouvrir et fermer le menu latéral. Utiliser <span class="keyboard-key">tab</span>
-  pour naviguer.'
+'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.': 'Utiliser le raccourcis clavier <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> pour ouvrir et fermer le menu latéral. Utiliser <span class="keyboard-key">tab</span> pour naviguer.'
 "Top menu": "Menu supérieur"
-"Apps that not must be moved in the side menu": "Les applications qui ne doivent pas\
-  \ être affichées dans le menu latéral"
-"If there is no selection then the global configuration is applied.": "Si il n'y a\
-  \ aucune sélection alors la configuration globale sera appliquée."
+"Apps that not must be moved in the side menu": "Les applications qui ne doivent pas être affichées dans le menu latéral"
+"If there is no selection then the global configuration is applied.": "Si il n'y a aucune sélection alors la configuration globale sera appliquée"
 "Experimental": "Expérimental"
 "Save": "Sauvegarder"
-"You like this app and you want to support me?": "Vous aimer cette application et\
-  \ vous souhaitez m'aider ?"
+"You like this app and you want to support me?": "Vous aimer cette application et vous souhaitez m'aider ?"
 "Buy me a coffee ☕": "Offrez moi un café ☕"
 "Hidden": "Caché"
 "Small": "Petit"
@@ -51,26 +43,20 @@
 "Before the logo": "Avant le logo"
 "After the logo": "Après le logo"
 "Position": "Position"
-"Show only the opener (hidden logo)": "Afficher uniquement le bouton d'ouverture (masquer\
-  \ le logo)"
-"Do not display the side menu and the opener if there is no application (eg: public pages).": "Ne\
-  \ pas afficher le menu latéral et le bouton d'ouverture s'il n'y a aucune application\
-  \ (exemple : page publiques)."
+"Show only the opener (hidden logo)": "Afficher uniquement le bouton d'ouverture (masquer le logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Ne pas afficher le menu latéral et le bouton d'ouverture s'il n'y a aucune application (exemple : page publiques)."
 "Panel": "Panneau"
-"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Ouvrir\
-  \ le menu au passage de la souris (automatiquement désactivé sur les écrans tactiles)"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Ouvrir le menu au passage de la souris (automatiquement désactivé sur les écrans tactiles)"
 "Display the big menu": "Afficher le menu large"
+"This menu is not compatible with AppOrder.": "Ce menu n'est pas compatible avec l'application AppOrder"
 "Display the logo": "Afficher le logo"
-"This feature is not compatible with the <code>big menu</code> display.": "Cette fonctionnalité\
-  \ n'est pas compatible avec l'affichage <code>Menu large</code>."
+"This feature is not compatible with the <code>big menu</code> display.": "Cette fonctionnalité n'est pas compatible avec l'affichage du menu large."
 "Icons and texts": "Icônes et textes"
 "Loader enabled": "Activation de l'indicateur de chargement"
 "Tips": "Astuces"
 "Always displayed": "Toujours affiché"
-"The logo will be hidden when the menu is always displayed.": "Le logo sera masque\
-  \ si le menu est toujours affiché."
-"This is the automatic behavior when the menu is always displayed.": "C'est le comportement\
-  \ automatique lorsque le menu est toujours affiché."
+"The logo will be hidden when the menu is always displayed.": "Le logo sera masque si le menu est toujours affiché."
+"This is the automatic behavior when the menu is always displayed.": "C'est le comportement automatique lorsque le menu est toujours affiché."
 "Not compatible with touch screens.": "Incompatible avec les écrans tactiles."
 "Big menu": "Menu large"
 "Live preview": "Aperçu en direct"
@@ -79,21 +65,16 @@
 "Use my selection": "Utiliser ma sélection"
 "Show and hide the list of applications": "Afficher et masquer la liste des applications"
 "Use the avatar instead of the logo": "Utiliser l'avatar à la place du logo"
-"You do not have permission to change the settings.": "Vous n'avez pas la permission\
-  \ de changer les paramètres."
+"You do not have permission to change the settings.": "Vous n'avez pas la permission de changer les paramètres."
 "Force this configuration to users": "Forcer cette configuration aux utilisateurs"
 "Export the configuration": "Exporter la configuration"
 "Purge the cache": "Purger le cache"
 "Show the link to settings": "Afficher le lien vers les paramètres"
-"The menu is enabled by default for users": "Le menu est activé par défaut pour les\
-  \ utilisateurs"
+"The menu is enabled by default for users": "Le menu est activé par défaut pour les utilisateurs"
 "Except when the configuration is forced.": "Sauf lorsque la configuration est forcée."
-"Apps that should not be displayed in the menu": "Applications qui ne doivent pas\
-  \ être affichées dans le menu"
-"This feature is only compatible with the <code>big menu</code> display.": "Compatible\
-  \ avec l'affichage <code>Menu large</code>."
-"The logo is a link to the default app": "Le logo est un lien vers l'application par\
-  \ défaut"
+"Apps that should not be displayed in the menu": "Applications qui ne doivent pas être affichées dans le menu"
+"This feature is only compatible with the <code>big menu</code> display.": "Compatible avec l'affichage <code>Menu large</code>."
+"The logo is a link to the default app": "Le logo est un lien vers l'application par défaut"
 "Others": "Autres"
 "Categories": "Catégories"
 "Customize sorting": "Personnaliser le tri"
@@ -101,16 +82,11 @@
 "Name": "Nom"
 "Customed": "Personnalisé"
 "Show and hide the list of categories": "Afficher et masquer la liste des catégories"
-"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces\
-  \ paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont\
-  \ activés."
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
 "Dark mode colors": "Couleurs du mode sombre"
 "With categories": "Avec les catégories"
 "Custom categories": "Catégories personnalisées"
 "Customize application categories": "Personnaliser les catégories des applications"
-"Apps only visible in the top menu": "Applications visibles uniquement dans le menu\
-  \ supérieur"
-"Apps visible in the top and side menus": "Applications visibles dans le menus supérieur\
-  \ et latéral"
+"Apps only visible in the top menu": "Applications visibles uniquement dans le menu supérieur"
+"Apps visible in the top and side menus": "Applications visibles dans le menus supérieur et latéral"
 "Reset to default": "Restaurer les valeurs par défaut"
-"Applications": "Applications"
@@ -1,95 +0,0 @@
-"Custom menu": ""
-"Enable the custom menu": ""
-"No": ""
-"Yes": ""
-"Menu": ""
-? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-  to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
-  navigate.'
-: ''
-"Top menu": ""
-"Apps that not must be moved in the side menu": ""
-"If there is no selection then the global configuration is applied.": ""
-"Experimental": ""
-"Save": ""
-"You like this app and you want to support me?": ""
-"Buy me a coffee ☕": ""
-"Hidden": ""
-"Small": ""
-"Normal": ""
-"Big": ""
-"Hidden icon": ""
-"Small icon": ""
-"Normal icon": ""
-"Big icon": ""
-"Hidden text": ""
-"Small text": ""
-"Normal text": ""
-"Big text": ""
-"Colors": ""
-"Background color": ""
-"Background color of current app": ""
-"Text color": ""
-"Loader": ""
-"Icon": ""
-"Same color": ""
-"Opposite color": ""
-"Transparent": ""
-"Opaque": ""
-"Opener": ""
-"Default": ""
-"Default (dark)": ""
-"Hamburger": ""
-"Hamburger (dark)": ""
-"Hamburger 2": ""
-"Hamburger 2 (dark)": ""
-"Before the logo": ""
-"After the logo": ""
-"Position": ""
-"Show only the opener (hidden logo)": ""
-"Do not display the side menu and the opener if there is no application (eg: public pages).": ""
-"Panel": ""
-"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": ""
-"Display the big menu": ""
-"Display the logo": ""
-"This feature is not compatible with the <code>big menu</code> display.": ""
-"Icons and texts": ""
-"Loader enabled": ""
-"Tips": ""
-"Always displayed": ""
-"The logo will be hidden when the menu is always displayed.": ""
-"This is the automatic behavior when the menu is always displayed.": ""
-"Not compatible with touch screens.": ""
-"Big menu": ""
-"Live preview": ""
-"Open apps in new tab": ""
-"Use the global setting": ""
-"Use my selection": ""
-"Show and hide the list of applications": ""
-"Use the avatar instead of the logo": ""
-"You do not have permission to change the settings.": ""
-"Force this configuration to users": ""
-"Export the configuration": ""
-"Purge the cache": ""
-"Show the link to settings": ""
-"The menu is enabled by default for users": ""
-"Except when the configuration is forced.": ""
-"Apps that should not be displayed in the menu": ""
-"This feature is only compatible with the <code>big menu</code> display.": ""
-"The logo is a link to the default app": ""
-"Others": ""
-"Categories": ""
-"Customize sorting": ""
-"Order by": ""
-"Name": ""
-"Customed": ""
-"Show and hide the list of categories": ""
-"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": ""
-"Dark mode colors": ""
-"With categories": ""
-"Custom categories": ""
-"Customize application categories": ""
-"Apps only visible in the top menu": ""
-"Apps visible in the top and side menus": ""
-"Reset to default": ""
-"Applications": ""
@@ -40,6 +40,7 @@
 "Panel": "面板"
 "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)"
 "Display the big menu": "显示大型菜单"
+"This menu is not compatible with AppOrder.": "型菜单与应用顺序不兼容"
 "Display the logo": "显示logo"
 "This feature is not compatible with the <code>big menu<\/code> display.": "此功能与显示<code>大型菜单<\/code>不兼容。"
 "Icons and texts": "图标与文字"
@@ -89,4 +90,3 @@
 "Small text": "小文本"
 "Normal text": "普通文本"
 "Big text": "大文本"
-"Applications": "Applications"
@@ -1,11 +0,0 @@
-module.exports = (tagName, attributes) => {
-  const element = document.createElement(tagName)
-
-  if (typeof attributes === 'object') {
-    for (let i in attributes) {
-      element.setAttribute(i, attributes[i])
-    }
-  }
-
-  return element
-}
@@ -1,128 +1,116 @@
 :root {
-  <?php foreach ($_['vars'] as $key => $value): ?>
-    <?php if ($key === 'opener'): ?>
-      --side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
-    <?php else: ?>
-      --side-menu-<?php echo $key ?>: <?php echo $value ?>;
-    <?php endif; ?>
-  <?php endforeach; ?>
+    <?php foreach ($_['vars'] as $key => $value): ?>
+        <?php if ($key === 'opener'): ?>
+            --side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
+        <?php else: ?>
+            --side-menu-<?php echo $key ?>: <?php echo $value ?>;
+        <?php endif; ?>
+    <?php endforeach; ?>
 }

 <?php if (empty($_['top-menu-apps']) && empty($_['top-side-menu-apps'])): ?>
-  #appmenu {
-    display: none;
-  }
+    #appmenu {
+        display: none;
+    }

-  #appmenu + nav {
-    display: none;
-  }
+    #appmenu + nav {
+        display: none;
+    }
 <?php else: ?>
-  .app-hidden {
-    opacity: 0;
-  }
+    .app-hidden {
+        opacity: 0;
+    }
 <?php endif; ?>

 <?php if ($_['opener-only']): ?>
-  #nextcloud {
-    display: none;
-  }
+    #nextcloud {
+        display: none;
+    }
 <?php endif; ?>

 <?php if (!$_['display-logo']): ?>
-  .side-menu-logo {
-    display: none;
-  }
-
-  .side-menu-header {
-    height: 50px;
-  }
-
-  .side-menu-apps-list {
-    height: calc(100vh - 49px);
-    top: 49px;
-  }
-
-  #side-menu.hide-opener .side-menu-header {
-    visibility: hidden;
-  }
-
-  <?php if ($_['size-text'] === 'hidden'): ?>
-    #side-menu, .side-menu-apps-list {
-      <?php if ($_['size-icon'] === 'big'): ?>
-        width: 55px;
-      <?php else: ?>
-        width: 52px;
-      <?php endif; ?>
+    .side-menu-logo {
+        display: none;
    }

-    #side-menu .side-menu-opener {
-      <?php if ($_['size-icon'] === 'big'): ?>
-        margin-left: 1px;
-      <?php else: ?>
-        margin-left: 0px;
-      <?php endif; ?>
+    .side-menu-header {
+        height: 50px;
    }
-  <?php endif; ?>
+
+    .side-menu-apps-list {
+        height: calc(100vh - 49px);
+        top: 49px;
+    }
+
+    #side-menu.hide-opener .side-menu-header {
+        visibility: hidden;
+    }
+
+    <?php if ($_['size-text'] === 'hidden'): ?>
+        #side-menu, .side-menu-apps-list {
+            <?php if ($_['size-icon'] === 'big'): ?>
+                width: 55px;
+            <?php else: ?>
+                width: 52px;
+            <?php endif; ?>
+        }
+
+        #side-menu .side-menu-opener {
+            <?php if ($_['size-icon'] === 'big'): ?>
+                margin-left: 1px;
+            <?php else: ?>
+                margin-left: 0px;
+            <?php endif; ?>
+        }
+    <?php endif; ?>
 <?php endif; ?>

 <?php if ($_['size-icon'] === 'hidden'): ?>
-  .side-menu-app-icon {
-    display: none;
-  }
+    .side-menu-app-icon {
+        display: none;
+    }
 <?php elseif ($_['size-icon'] === 'small'): ?>
-  .side-menu-app-icon svg {
-    width: 15px;
-    height: 15px;
-  }
+    .side-menu-app-icon svg {
+        width: 15px;
+        height: 15px;
+    }

-  img.side-menu-app-icon {
-    width: 15px;
-    height: 15px;
-  }
+    img.side-menu-app-icon {
+        width: 15px;
+        height: 15px;
+    }
 <?php elseif ($_['size-icon'] === 'normal'): ?>
-  .side-menu-app-icon svg {
-    width: 20px;
-    height: 20px;
-  }
+    .side-menu-app-icon svg {
+        width: 20px;
+        height: 20px;
+    }

-  img.side-menu-app-icon {
-    width: 20px;
-    height: 20px;
-  }
+    img.side-menu-app-icon {
+        width: 20px;
+        height: 20px;
+    }
 <?php elseif ($_['size-icon'] === 'big'): ?>
-  .side-menu-app-icon svg {
-    width: 23px;
-    height: 23px;
-  }
+    .side-menu-app-icon svg {
+        width: 23px;
+        height: 23px;
+    }

-  img.side-menu-app-icon {
-    width: 23px;
-    height: 23px;
-  }
+    img.side-menu-app-icon {
+        width: 23px;
+        height: 23px;
+    }
 <?php endif; ?>

 <?php if ($_['size-text'] === 'hidden'): ?>
-  .side-menu-app-text {
-    display: none;
-  }
+    .side-menu-app-text {
+        display: none;
+    }
 <?php elseif ($_['size-text'] === 'small'): ?>
-  .side-menu-app-text {
-    font-size: 12px;
-  }
+    .side-menu-app-text {
+        font-size: 12px;
+    }
 <?php elseif ($_['size-text'] === 'big'): ?>
-  .side-menu-app-text {
-    font-size: 16px;
-  }
-<?php endif; ?>
-
-<?php if ($_['always-displayed']): ?>
-  #content {
-    left: 53px;
-    width: calc(100% - (var(--body-container-margin) * 2) - 62px);
-  }
-
-  #content-vue {
-    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
-    margin-left: 11px;
-  }
+    .side-menu-app-text {
+        font-size: 16px;
+    }
 <?php endif; ?>
@@ -0,0 +1,86 @@
+const alwaysDisplayed = function() {
+    const elements = querySelectorAll('*')
+    const fixedElements = []
+
+    for (let element of elements) {
+        if (typeof element !== 'object') {
+            continue
+        }
+
+        const position = window.getComputedStyle(element, null).getPropertyValue('position')
+
+        if (position !== 'fixed') {
+            continue
+        }
+
+        const id = element.getAttribute('id')
+
+        if (id === 'header' || id === 'side-menu' || id === 'side-menu-loader') {
+            continue
+        }
+
+        if (element.classList.contains('oc-dialog')) {
+            continue
+        }
+
+        let elementIsInSideMenu = false
+        let parent = element.parentNode
+
+        while (parent && !elementIsInSideMenu) {
+            try {
+                if  (parent.getAttribute('id') === 'side-menu') {
+                    elementIsInSideMenu = true
+                }
+            } catch (e) {
+            }
+
+            parent = parent.parentNode
+        }
+
+        if (elementIsInSideMenu) {
+            continue
+        }
+
+        fixedElements.push(element)
+    }
+
+    for (let i in fixedElements) {
+        const element = fixedElements[i]
+        const computedStyle = window.getComputedStyle(element, null)
+        const left = computedStyle.getPropertyValue('left')
+        const right = computedStyle.getPropertyValue('right')
+
+        if (right !== '0px') {
+            const intValue = parseInt(left.replace('px', '')) + 50
+            element.style.setProperty('transform', 'translateX(' + intValue.toString() + 'px)')
+        }
+    }
+}
+
+const content = querySelector('#content')
+
+if (content && content.classList.contains('app-settings')) {
+    let loaded = false
+    const config = {
+        attributes: false,
+        childList: true,
+        subtree: true
+    }
+    const observer = new MutationObserver(() => {
+        if (loaded) {
+            return
+        }
+
+        const element = content.querySelector('#app-category-your-apps') || content.querySelector('#app-navigation ul')
+
+        if (element) {
+            loaded = true
+
+            alwaysDisplayed()
+        }
+    })
+
+    observer.observe(content, config)
+} else {
+    window.setTimeout(alwaysDisplayed, 200)
+}
@@ -0,0 +1,14 @@
+let pageLoader = createElement('div', {id: 'side-menu-loader'})
+let pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
+
+pageLoader.appendChild(pageLoaderBar)
+querySelector('body').appendChild(pageLoader)
+
+let pageLoaderValue = 0
+
+window.addEventListener('beforeunload', () => {
+    setInterval(() => {
+        pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
+        pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
+    }, 25)
+})
@@ -0,0 +1,216 @@
+let menuCache = null
+
+const breakpointMobileWidth = 1024
+const usePercentualAppMenuLimit = 0.8
+const minAppsDesktop = 8
+
+const handleMenuClick = (e, icon) => {
+    let element = e.target
+
+    while (element.tagName !== 'LI') {
+        element = element.parentNode
+    }
+
+    const a = querySelector('a', element)
+
+    if (a.getAttribute('target') !== '_blank' && e.which === 1 && !e.ctrlKey && !e.metaKey) {
+        for (let tag of ['svg', 'div']) {
+            let el = querySelector(tag, element)
+
+            if (el) {
+                el.remove()
+            }
+        }
+
+        const loader = createElement('div', {'class': icon})
+
+        a.insertBefore(loader, querySelector('span', a))
+    }
+}
+
+const updateTopMenu = function() {
+    const isMobile = window.innerWidth < breakpointMobileWidth
+    const menu = querySelector('#appmenu')
+    const moreApps = querySelector('#more-apps')
+    const navigation = querySelector('#navigation')
+    const navigationApps = querySelector('#apps ul')
+
+    let apps = querySelectorAll('li', menu)
+    let lastShownApp = null
+    let appShown = []
+
+    if ((menu.innerHTML + menu.nextSibling.innerHTML) === menuCache) {
+        return
+    }
+
+    let navigationAppsHtml = ''
+
+    for (let app of apps) {
+        const dataId = app.getAttribute('data-id')
+
+        if (dataId === null) {
+            continue
+        }
+
+        if (topMenuApps.indexOf(dataId) === -1 && topSideMenuApps.indexOf(dataId) === -1) {
+            app.classList.add('hidden')
+            app.classList.add('app-hidden')
+        } else {
+            app.classList.remove('hidden')
+            app.classList.add('app-external-site')
+
+            if (topSideMenuApps.indexOf(dataId) !== -1) {
+                app.classList.add('app-top-side-menu')
+            }
+
+            appShown.push(app)
+
+            navigationAppsHtml = navigationAppsHtml + app.outerHTML
+        }
+
+        if (targetBlankApps.indexOf(dataId) !== -1) {
+            querySelector('a', app).setAttribute('target', '_blank')
+        }
+    }
+
+    navigationApps.innerHTML = navigationAppsHtml
+
+    const rightHeaderWidth = querySelector('.header-right').offsetWidth
+    const headerWidth = querySelector('header').offsetWidth
+
+    let availableWidth = headerWidth
+
+    availableWidth -= nextcloud.offsetWidth
+    availableWidth -= querySelector('#header .side-menu-opener').offsetWidth
+    availableWidth -= rightHeaderWidth > 230 ? rightHeaderWidth : 230
+    availableWidth *= isMobile ? usePercentualAppMenuLimit : 1
+
+    let appCount = Math.floor(availableWidth / querySelector('#appmenu li:not(.hidden)').offsetWidth)
+
+    if (isMobile && appCount > minAppsDesktop) {
+        appCount = minAppsDesktop
+    } else if (!isMobile && appCount < minAppsDesktop) {
+        appCount = minAppsDesktop
+    }
+
+    menu.style.opacity = 1
+
+    if (appShown.length - 1 - appCount >= 1) {
+        appCount--
+    }
+
+    for (let item of querySelectorAll('a', moreApps)) {
+        item.classList.remove('active')
+    }
+
+    let k = 0
+    let notInHeader = 0
+
+    for (let app of appShown) {
+        const name = app.getAttribute('data-id')
+        const li = querySelector('#apps li[data-id=' + name + '].app-external-site')
+
+        if (k < appCount && appCount > 0) {
+            app.classList.remove('hidden')
+            li.classList.add('in-header')
+
+            lastShownApp = app
+        } else {
+            app.classList.add('hidden')
+            li.classList.remove('in-header')
+
+            notInHeader++
+
+            const a = querySelector('a', app)
+
+            if (appCount > 0 && a.classList.contains('active')) {
+                lastShownApp.classList.add('hidden')
+                app.classList.remove('hidden')
+                notInHeader++
+
+                li.classList.add('in-header')
+            }
+        }
+
+        k++
+    }
+
+    // Hack for:
+    // - https://github.com/nextcloud/server/blob/master/core/src/components/MainMenu.js#L97-L119
+    // - https://github.com/nextcloud/server/blob/master/core/src/components/MainMenu.js#L97-L119
+    jQuery(menu).undelegate('li:not(#more-apps) > a', 'click')
+    jQuery(navigation).undelegate('a', 'click')
+
+    const confs = [
+        {
+            items: querySelectorAll('#navigation li'),
+            icon: 'icon-loading-small'
+        },
+        {
+            items: querySelectorAll('li:not(#more-apps)', menu),
+            icon: OCA.Theming && OCA.Theming.inverted ? 'icon-loading-small' : 'icon-loading-small-dark'
+        },
+    ]
+
+    for (let conf of confs) {
+        for (let item of conf.items) {
+            item.addEventListener('click', (e) => {
+                handleMenuClick(e, conf.icon)
+            })
+        }
+    }
+
+    for (let app of querySelectorAll('#apps li.app-external-site')) {
+        const appId = app.getAttribute('data-id')
+
+        if (app.classList.contains('in-header')) {
+            for (let defs of querySelectorAll('svg defs', app)) {
+                defs.remove()
+            }
+        } else {
+            const svg = querySelector('svg', app)
+
+            if (querySelectorAll('svg defs', app).length > 0) {
+                continue
+            }
+
+            const defs = `
+                <defs>
+                    <filter id="invertMenuMore-${appId}">
+                        <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix>
+                    </filter>
+                </defs>`
+
+            svg.innerHTML = defs + svg.innerHTML
+
+            for (let image of querySelectorAll('image', svg)) {
+                image.setAttribute('filter', `url(#invertMenuMore-${appId})`)
+            }
+
+            svg.innerHTML = svg.innerHTML.replace(/fecolormatrix/g, 'feColorMatrix')
+        }
+    }
+
+    if (notInHeader === 0) {
+        moreApps.style.display = 'none'
+        navigation.style.display = 'none'
+    } else {
+        moreApps.style.display = 'flex'
+    }
+
+    menuCache = menu.innerHTML + menu.nextSibling.innerHTML
+}
+
+for (let i = 0; i < 4000; i+= 100) {
+    setTimeout(updateTopMenu, i)
+}
+
+let resizeTimeout = null;
+
+window.addEventListener('resize', () => {
+    if (resizeTimeout !== null) {
+        clearTimeout(resizeTimeout)
+    }
+
+    resizeTimeout = setTimeout(updateTopMenu, 100)
+})
@@ -13,169 +13,210 @@ if ($_['always-displayed']) {
 ?>

 (function() {
-  const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
-  const sideMenuOpener = SMcreateElement('button', {'class': 'side-menu-opener'})
-  const sideMenu = SMcreateElement('div', {id: 'side-menu'})
-
-  const body = document.querySelector('body')
-  const html = document.querySelector('html')
-  const nextcloud = document.querySelector('#nextcloud')
-
-  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
-  const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
-
-  window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
-  window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps'])."\n"; ?>
-  window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
-
-  <?php if ($display === 'big-menu'): ?>
-    sideMenu.setAttribute('data-bigmenu', '1')
-  <?php elseif ($display === 'side-with-categories'): ?>
-    sideMenu.setAttribute('data-sidewithcategories', '1')
-  <?php endif; ?>
-
-  document.querySelector('body').addEventListener('side-menu.apps', (e) => {
-    const apps = e.detail.apps;
-
-    <?php if ($_['hide-when-no-apps']): ?>
-      const sideMenu = document.querySelector('#side-menu')
-
-      if (apps.length === 0) {
-        sideMenu.classList.remove('open')
-        sideMenu.classList.add('hide')
-        sideMenuOpener.classList.add('hide')
-      } else {
-        sideMenu.classList.remove('hide')
-        sideMenuOpener.classList.remove('hide')
-      }
-
-      <?php if ($display === 'always-displayed'): ?>
-        if (apps.length === 0) {
-          html.classList.remove('side-menu-always-displayed')
-        } else {
-          html.classList.add('side-menu-always-displayed')
+    const querySelector = function(selector, element) {
+        if (element) {
+            return element.querySelector(selector)
        }
-      <?php endif; ?>
-    <?php else: ?>
-      <?php if ($display === 'always-displayed'): ?>
-        if (apps.length === 0) {
-          html.classList.remove('side-menu-always-displayed')
-        } else {
-          html.classList.add('side-menu-always-displayed')
-        }
-      <?php endif; ?>
-    <?php endif; ?>
-  })

-  body.addEventListener('side-menu.ready', () => {
-    const sideMenu = document.querySelector('#side-menu')
-    const headerMenuOpener = document.querySelector('#header .side-menu-opener')
-    const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener')
-
-    sideMenuFocus = () => {
-      let a = document.querySelector('.side-menu-app.active a', sideMenu)
-
-      if (!a) {
-        return
-      }
-
-      if (a.length === 0) {
-        a = sideMenu.querySelector('.side-menu-app:first-child a')
-      }
-
-      if (a.length > 0) {
-        a.focus()
-      }
+        return document.querySelector(selector)
    }

-    <?php if ($_['opener-hover']): ?>
-      const sideMenuMouseLeave = () => {
-        sideMenu.classList.remove('open')
-        sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
-      }
+    const querySelectorAll = function(selector, element) {
+        if (element) {
+            return element.querySelectorAll(selector)
+        }

-      const sideMenuMouseEnter = () => {
-        sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
-      }
+        return document.querySelectorAll(selector)
+    }

-      const sideMenuOpenerMouseEnter = () => {
-        sideMenu.classList.add('open')
-        sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
+    const createElement = function(tagName, attributes) {
+        const element = document.createElement(tagName)

-        sideMenuFocus()
-      }
+        if (typeof attributes === 'object') {
+            for (let i in attributes) {
+                element.setAttribute(i, attributes[i])
+            }
+        }

-      if (!isTouchDevice) {
-        <?php if ($_['opener-hover']): ?>
-          headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
+        return element
+    }

-          sideMenu.classList.add('hide-opener')
-        <?php endif ?>
+    const sideMenuContainer = createElement('div', {id: 'side-menu-container'})
+    const sideMenuOpener = createElement('button', {'class': 'side-menu-opener'})
+    const sideMenu = createElement('div', {id: 'side-menu'})

-        sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
-        sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
-      }
+    const body = querySelector('body')
+    const html = querySelector('html')
+    const nextcloud = querySelector('#nextcloud')
+
+    const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
+    const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
+
+    <?php if ($display === 'big-menu'): ?>
+        sideMenu.setAttribute('data-bigmenu', '1')
+    <?php elseif ($display === 'side-with-categories'): ?>
+        sideMenu.setAttribute('data-sidewithcategories', '1')
    <?php endif; ?>

-    headerMenuOpener.addEventListener('click', () => {
-      sideMenu.classList.add('open')
+    querySelector('body').addEventListener('side-menu.apps', (e) => {
+        const apps = e.detail.apps;

-      const a = sideMenu.querySelector('.side-menu-app.active a')
+        <?php if ($_['hide-when-no-apps']): ?>
+            const sideMenu = querySelector('#side-menu')

-      if (a !== null) {
-        a.focus()
-      }
+            if (apps.length === 0) {
+                sideMenu.classList.remove('open')
+                sideMenu.classList.add('hide')
+                sideMenuOpener.classList.add('hide')
+            } else {
+                sideMenu.classList.remove('hide')
+                sideMenuOpener.classList.remove('hide')
+            }

-      headerMenuOpener.blur()
-    })
-
-    for (let opener of sideMenuOpener) {
-      opener.addEventListener('click', () => {
-        <?php if ($display === 'always-displayed'): ?>
-          sideMenu.classList.toggle('open')
+            <?php if ($display === 'always-displayed'): ?>
+                if (apps.length === 0) {
+                    html.classList.remove('side-menu-always-displayed')
+                } else {
+                    html.classList.add('side-menu-always-displayed')
+                }
+            <?php endif; ?>
        <?php else: ?>
-          sideMenu.classList.remove('open')
+            <?php if ($display === 'always-displayed'): ?>
+                if (apps.length === 0) {
+                    html.classList.remove('side-menu-always-displayed')
+                } else {
+                    html.classList.add('side-menu-always-displayed')
+                }
+            <?php endif; ?>
+        <?php endif; ?>
+    })
+
+    body.addEventListener('side-menu.ready', () => {
+        const sideMenu = querySelector('#side-menu')
+        const headerMenuOpener = querySelector('#header .side-menu-opener')
+        const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')
+
+        if (!headerMenuOpener) {
+            return
+        }
+
+        sideMenuFocus = () => {
+            let a = querySelector('.side-menu-app.active a', sideMenu)
+
+            if (!a) {
+                return
+            }
+
+            if (a.length === 0) {
+                a = querySelector('.side-menu-app:first-child a', sideMenu)
+            }
+
+            if (a.length > 0) {
+                a.focus()
+            }
+        }
+
+        <?php if ($_['opener-hover']): ?>
+            const sideMenuMouseLeave = () => {
+                sideMenu.classList.remove('open')
+                sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
+            }
+
+            const sideMenuMouseEnter = () => {
+                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
+            }
+
+            const sideMenuOpenerMouseEnter = () => {
+                sideMenu.classList.add('open')
+                sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
+
+                sideMenuFocus()
+            }
+
+            if (!isTouchDevice) {
+                <?php if ($_['opener-hover']): ?>
+                    headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
+
+                    sideMenu.classList.add('hide-opener')
+                <?php endif ?>
+
+                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
+                sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
+            }
+        <?php endif; ?>
+
+        headerMenuOpener.addEventListener('click', () => {
+            sideMenu.classList.add('open')
+
+            const a = querySelector('.side-menu-app.active a', sideMenu)
+
+            if (a !== null) {
+                a.focus()
+            }
+
+            headerMenuOpener.blur()
+        })
+
+        for (let opener of sideMenuOpener) {
+            opener.addEventListener('click', () => {
+                <?php if ($display === 'always-displayed'): ?>
+                    sideMenu.classList.toggle('open')
+                <?php else: ?>
+                    sideMenu.classList.remove('open')
+                <?php endif; ?>
+            })
+        }
+
+        document.addEventListener('keydown', (e) => {
+            var key = e.key || e.keyCode
+
+            if ((key === 'o' || key === 79) && e.ctrlKey === true) {
+                e.preventDefault()
+
+                sideMenu.classList.toggle('open')
+                sideMenuFocus()
+            }
+        })
+
+        const sideMenuObserver = new MutationObserver((e) => {
+            if (body.getAttribute('id') !== 'body-settings') {
+                return
+            }
+
+            body.classList.toggle('body-settings-side-menu', sideMenu.classList.contains('open'))
+        })
+
+        sideMenuObserver.observe(sideMenu, {
+            attributes: true,
+            attributeFilter: ['class'],
+            childList: false,
+            characterData: false
+        })
+    })
+
+    body.appendChild(sideMenuContainer)
+    sideMenuContainer.appendChild(sideMenu)
+
+    <?php if ($_['loader-enabled'] === true): ?>
+        <?php require_once __DIR__.'/_loaderEnabled.js'; ?>
+    <?php endif; ?>
+
+    if (nextcloud) {
+        <?php if ($_['opener-position'] === 'before'): ?>
+            nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
+        <?php else: ?>
+            nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
        <?php endif; ?>
-      })
    }

-    document.addEventListener('keydown', (e) => {
-      var key = e.key || e.keyCode
+    <?php if (!empty($_['top-menu-apps']) || !empty($_['top-side-menu-apps'])): ?>
+        const topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
+        const topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>

-      if ((key === 'o' || key === 79) && e.ctrlKey === true) {
-        e.preventDefault()
+        <?php require_once __DIR__.'/_topMenuApps.js'; ?>
+    <?php endif; ?>

-        sideMenu.classList.toggle('open')
-        sideMenuFocus()
-      }
-    })
-
-    const sideMenuObserver = new MutationObserver((e) => {
-      if (body.getAttribute('id') !== 'body-settings') {
-        return
-      }
-
-      body.classList.toggle('body-settings-side-menu', sideMenu.classList.contains('open'))
-    })
-
-    sideMenuObserver.observe(sideMenu, {
-      attributes: true,
-      attributeFilter: ['class'],
-      childList: false,
-      characterData: false
-    })
-  })
-
-  body.appendChild(sideMenuContainer)
-  sideMenuContainer.appendChild(sideMenu)
-
-  <?php if ($_['loader-enabled'] === true): ?>
-    PageLoader()
-  <?php endif; ?>
-
-  <?php if ($_['opener-position'] === 'before'): ?>
-    nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
-  <?php else: ?>
-    nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
-  <?php endif; ?>
+    <?php if ($display === 'always-displayed'): ?>
+        <?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
+    <?php endif; ?>
 })();
@@ -509,6 +509,7 @@ $labelReset = 'Reset to default';
                <?php p($l->t('With categories')); ?>
            </label>
        </div>
+        <p><em><?php echo $l->t('This menu is not compatible with AppOrder.'); ?></em></p>
        <p>
            <img
                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
@@ -523,6 +524,7 @@ $labelReset = 'Reset to default';
                <?php p($l->t('Big menu')); ?>
            </label>
        </div>
+        <p><em><?php echo $l->t('This menu is not compatible with AppOrder.'); ?></em></p>
        <p>
            <img
                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
@@ -796,7 +798,9 @@ $labelReset = 'Reset to default';
                    </div>
                </div>
            </div>
+        </div>

+        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Apps visible in the top and side menus')); ?>
@@ -830,45 +834,6 @@ $labelReset = 'Reset to default';
        </div>
    </div>

-    <div class="section">
-        <h2>
-            <?php p($l->t('Applications')); ?>
-        </h2>
-
-        <div class="side-menu-setting-table">
-            <div class="side-menu-setting-row">
-                <div class="side-menu-setting-label">
-                    <?php p($l->t('Customize sorting')); ?>
-                </div>
-                <div class="side-menu-setting-form">
-                    <a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
-                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
-                    </a>
-
-                    <div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
-                        'side-menu-apps-order' => [],
-                    ])) ?>"></div>
-
-                    <div id="apps-order-list" style="display: none">
-                        <ul class="side-menu-setting-list">
-                            <?php foreach ($_['ordered-apps'] as $key => $app): ?>
-                                <li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
-                                    <span class="arrow">
-                                        ⇅
-                                    </span>
-
-                                    <?php echo p($l->t($app['name'])); ?>
-                                </li>
-                            <?php endforeach; ?>
-                        </ul>
-                    </div>
-
-                    <input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order">
-                </div>
-            </div>
-        </div>
-    </div>
-

    <div class="section">
        <h2>
@@ -3,7 +3,6 @@ const { VueLoaderPlugin } = require('vue-loader')
 const StyleLintPlugin = require('stylelint-webpack-plugin')

 module.exports = {
-    devtool: "source-map",
    entry: {
        'admin': path.join(__dirname, 'src', 'admin.js'),
        'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
Author	SHA1	Message	Date
Simon Vieille	711d169d22	Merge pull request 'add check if menu exists before adding event listeners (#210 )' (#211 ) from feature/issue210 into v2.x Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/211	2023-01-21 21:49:02 +01:00
Simon Vieille	ddcd10f7b0	release v2.5.2	2023-01-21 21:45:41 +01:00
Simon Vieille	ab8b745496	add check if menu exists before adding event listeners (#210 )	2023-01-21 21:41:22 +01:00
Simon Vieille	401b351fbd	include v2.x in CI	2022-10-11 22:49:02 +02:00