Merge pull request 'release v3.10.0' (#268) from develop into master

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/268

.drone.yml

@@ -1,54 +0,0 @@
----
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: dependencies
-    image: deblan/devenv
-    commands:
-      - npm install
-
-  - name: build
-    image: deblan/devenv
-    commands:
-      - make npm-build
-    when:
-      branch:
-        exclude:
-          - master
-        include:
-          - develop
-          - feature/*
-      event:
-        - push
-        - pull_request
-
-  - name: release
-    image: deblan/devenv
-    volumes:
-      - name: artifacts
-        path: /artifacts
-    environment:
-      APP_CERTIFICATE:
-        from_secret: app_certificate
-    commands:
-      - mkdir -p "$HOME/.nextcloud/certificates"
-      - echo "$APP_CERTIFICATE" > "$HOME/.nextcloud/certificates/side_menu.key"
-      - export VERSION=$(grep "<version>" appinfo/info.xml | grep -o "[0-9]*\.[0-9]*\.[0-9]*" --color=never)
-      - export RELEASE_DIRECTORY="/artifacts/deblan/side_menu"
-      - make release
-    when:
-      branch:
-        exclude:
-          - develop
-          - feature/*
-        include:
-          - master
-      event:
-        - push
-
-volumes:
-  - name: artifacts
-    host:
-      path: /var/www/html/artifacts

.gitea/issue_template/FEATURE_TEMPLATE.md

@@ -1,16 +0,0 @@
----
-name: "New feature"
-about: "Use this template if you want to request a feature"
-title: "[FEATURE] "
-labels:
-  - enhancement
----
-## Feature
-
-### Description
-
-...
-
-### Benefits
-
-...

.gitea/issue_template/FEATURE_TEMPLATE.yml

@@ -0,0 +1,34 @@
+name: New feature
+about: Use this template if you want to request a feature
+title: "[FEATURE] "
+labels:
+  - enhancement
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this feature request!
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Describe the feature.
+    validations:
+      required: true
+
+  - type: textarea
+    id: benefits
+    attributes:
+      label: Benefits
+      description: Describe the benefits of this feature.
+    validations:
+      required: true
+
+  - type: textarea
+    id: extra
+    attributes:
+      label: More informations
+      description: If you want to share more things, this is here!
+    validations:
+      required: false

.gitea/issue_template/ISSUE_TEMPLATE.md

@@ -1,32 +0,0 @@
----
-name: "New issue"
-about: "Use this template if you have a bug"
-title: "[BUG] "
-labels:
-  - bug
----
-## Issue
-
-### Environment
-
-* Custom menu version: 
-* Nextcloud version: 
-* PHP version: 
-* Web server (Nginx, Apache2): 
-* Web browser and version (Firefox 80, Google Chrome 74, etc): 
-
-```
-Insert your configuration here. You can export the configuration using the admin page.
-```
-
-### Steps to reproduce
-
-...
-
-### Observed Results
-
-...
-
-### Expected Results
-
-...

.gitea/issue_template/ISSUE_TEMPLATE.yml

@@ -0,0 +1,69 @@
+name: New issue
+about: Use this template if you have a bug
+title: "[Bug] "
+labels:
+  - bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      value: |
+        * Custom menu version: 
+        * Nextcloud version: 
+        * PHP version: 
+        * Web server (Nginx, Apache2): 
+        * Web browser and version (Firefox 80, Google Chrome 74, etc): 
+    validations:
+      required: true
+
+  - type: textarea
+    id: configuration
+    attributes:
+      label: Configuration
+      description: Export the configuration using the admin page and copy/paste here ([documentation](https://deblan.gitnet.page/side_menu_doc/tips/#export-the-configuration)).
+      value: |
+        ```
+        {
+          ...
+        }
+        ```
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: How reproduce the bug?
+    validations:
+      required: false
+
+  - type: textarea
+    id: resuts
+    attributes:
+      label: Observed Results
+      description: What happened?
+    validations:
+      required: false
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Results
+      description: What should happen?
+    validations:
+      required: false
+
+  - type: textarea
+    id: extra
+    attributes:
+      label: More informations
+      description: If you want to share more things, this is here!
+    validations:
+      required: false

.gitignore

@@ -4,3 +4,4 @@
 /releases
 /package-lock.json
 !/l10n/.gitkeep
+/yarn*.log

.stylelintrc.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "indentation": 2
+    }
+}

.woodpecker.yml

@@ -0,0 +1,95 @@
+pipeline:
+  dependencies:
+    image: node:16
+    pull: true
+    commands:
+      - npm i
+    when:
+      event: [tag, push, pull_request]
+      branch: [master, develop, feature/*, fix/*, translations]
+
+  osv-detector:
+    image: gitnet.fr/deblan/osv-detector:v0.10
+    commands:
+      - osv-detector package-lock.json
+    failure: ignore
+
+  build-js:
+    image: node:16
+    commands:
+      - npm run build
+    when:
+      branch: [master, develop, feature/*, fix/*, translations]
+      event: [tag, push, pull_request]
+
+  build-translations:
+    image: deblan/php:8.0
+    commands:
+      - php bin/generate_l10n.php
+    when:
+      branch: [master, develop, feature/*, fix/*, translations]
+      event: [tag, push, pull_request]
+
+  create-signature:
+    image: nextcloud:25
+    secrets: [app_certificate, app_public_certificate]
+    environment:
+      SQLITE_DATABASE: /var/www/data/data.db
+      NEXTCLOUD_ADMIN_USER: admin
+      NEXTCLOUD_ADMIN_PASSWORD: admin
+    commands:
+      - echo "$APP_CERTIFICATE" > "/tmp/side_menu.key"
+      - echo "$APP_PUBLIC_CERTIFICATE" > "/tmp/side_menu.crt"
+      - mkdir /tmp/app
+      - cp -r README.md CHANGELOG.md appinfo css lib img l10n js src templates screenshots vendor /tmp/app
+      - /usr/src/nextcloud/occ integrity:sign-app
+        --privateKey=/tmp/side_menu.key
+        --certificate=/tmp/side_menu.crt
+        --path=/tmp/app
+      - mv /tmp/app/appinfo/signature.json appinfo/
+    when:
+      event: [tag]
+
+  # check-code-quality:
+  #   image: sonarsource/sonar-scanner-cli
+  #   secrets: [sonar_token, sonar_host, sonar_project]
+  #   commands:
+  #     - sonar-scanner
+  #       -Dsonar.projectKey=$SONAR_PROJECT
+  #       -Dsonar.sources=.
+  #       -Dsonar.host.url=$SONAR_HOST
+  #       -Dsonar.pullrequest.key=$CI_COMMIT_PULL_REQUEST
+  #       -Dsonar.pullrequest.branch=$CI_COMMIT_SOURCE_BRANCH
+  #       -Dsonar.pullrequest.base=$CI_COMMIT_TARGET_BRANCH
+  #   failure: ignore
+  #   when:
+  #     event: [pull_request]
+
+  create-package:
+    image: deblan/php:8.0
+    volumes:
+      - /var/www/html/artifacts:/var/www/html/artifacts
+    secrets: [app_certificate]
+    commands:
+      - apt-get update
+      - apt-get install -y zip make
+      - mkdir -p "$HOME/.nextcloud/certificates"
+      - echo "$APP_CERTIFICATE" > "$HOME/.nextcloud/certificates/side_menu.key"
+      - export VERSION=$(grep "<version>" appinfo/info.xml | grep -o "[0-9]*\.[0-9]*\.[0-9]*" --color=never)
+      - export RELEASE_DIRECTORY="/var/www/html/artifacts/deblan/side_menu"
+      - make release
+    when:
+      event: [tag]
+
+  push-release:
+    image: plugins/gitea-release
+    volumes:
+      - /var/www/html/artifacts:/var/www/html/artifacts
+    settings:
+      api_key:
+        from_secret: gitnet_api_key
+      base_url: https://gitnet.fr
+      note: ${CI_COMMIT_MESSAGE}
+      files: /var/www/html/artifacts/deblan/side_menu/${CI_COMMIT_TAG/v//}/*
+    when:
+      event: [tag]

CHANGELOG.md

@@ -1,5 +1,173 @@
 ## [Unreleased]
 
+## 3.10.0
+### Added
+* add compatibility with NC28
+### Fixed
+* fix NC28 error: remove deprecated method `OC_App::getNavigation()`
+
+## 3.9.1
+### Fixed
+* fix fixed menu on dashboard (#262)
+
+## 3.9.0
+### Added
+* add compatibility with NC27
+### Fixed
+* fix app redirect (#261)
+
+## 3.8.0
+### Added
+* add option to show hovered label only on top menu (fix #253)
+
+## 3.7.4
+### Fixed
+* fix Integrity failed (#247)
+
+## 3.7.3
+### Fixed
+* fix #244: use app href for redirection
+### Added
+* add signature on build
+
+## 3.7.2
+### Added
+* update pipeline conditions allowing `fix/*`
+### Fixed
+* fix #233: load configuration and then retrieve apps in default side menu display
+
+## 3.7.1
+### Fixed
+* fix build process (#230)
+
+## 3.7.0
+### Added
+* add translations (thanks to AHOHNMYC)
+* add compatibility with NC26
+
+## 3.6.0
+### Added
+* add hidden apps compatible with default menu (#219)
+
+## 3.5.2
+### Fixed
+* add check if menu exists before adding event listeners (#210)
+
+## 3.5.1
+### Added
+* add translations (thanks to p-bo adn gallegonovato)
+### Fixed
+* fix #189: sorting not applied on mobile
+
+## 3.5.0
+### Added
+* add dependency check (ci)
+* add code quality check (ci)
+* add translations (thanks to gallegonovato)
+* add option to disable the display labels in the top menu (#194)
+### Fixed
+* fix missing img alt (settings image)
+* fix code quality alerts
+
+## 3.4.1
+### Added
+* add translations (thanks to zonorti, jorisvandijk, jak2k)
+### Fixed
+* fix #183: hide custom categories list when empty (admin page)
+
+## 3.4.0
+### Added
+* add translations (thanks to Pavelb, nier, Timur, p-bo)
+* add possibility to define Custom Menu as default app and redirect to the first top menu app (#177)
+
+## 3.3.2
+### Fixed
+* fix #173: reduce the height of categories list
+
+## 3.3.1
+### Fixed
+* fix #162: top and side apps does work correctly
+
+## 3.3.0
+### Added
+* add documentation in admin page
+* add app sorter in user config side (#160)
+### Fixed
+* fix #164: open apps in new tab does not work
+* fix #162 #159: top and side apps does work correctly
+
+## 3.2.1
+### Fixed
+* fix #150: active app is not visible has active in menu (except in default menu)
+* fix #151: opener position
+
+## 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
+### 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
+
+## 2.5.1
+### Fixed
+* fix icon render (#133)
+
+## 2.5.0
+### Changed
+* upgrade dependencies
+### Fixed
+* remove duplicated code
+* remove unused variables and packages
+* replace repeated strings with variables
+* add html attributes
+* replace var with let
+* replace v-html with v-text to prevent xss
+
+## 2.4.3
+### Fixed
+* fix translations
+
+## 2.4.2
+### Fixed
+* fix typo
+### Changed
+* change ci/cd
+
+## 2.4.1
+### Fixed
+* fix user setting save
+
+## 2.4.0
+### Added
+* remove focus on opener after click
+* add button to set default colors
+* add menu hover effect
+* add translations
+### Fixed
+* fix deprecated app.php file
+* fix menu with categories header
+* fix minor issues
+### Changed
+* change saving progression
+### Removed
+* Nextcloud 19 is not supported anymore
+* PHP 7.3 is not supported anymore
+
 ## 2.3.5
 ### Fixed
 * fix white square (#99)

Makefile

@@ -1,11 +1,15 @@
-npm-build:
+build: dep
 	npm run build
 
-npm-watch:
+watch: dep
 	npm run watch
 
+dep:
+	npm i
+	npm link @nextcloud/vue || sudo npm link @nextcloud/vue
+
 .ONESHELL:
-release: npm-build translations
+release:
 	if [ -z "$$VERSION" ]; then
 		echo "VERSION required"
 		exit 1
@@ -26,3 +30,8 @@ release: npm-build translations
 
 translations:
 	php bin/generate_l10n.php
+
+.ONESHELL:
+run-code-quality-analysis:
+	export SONAR_TOKEN="$$SONAR_TOKEN_DEBLAN_SIDE_MENU"
+	sonar-scanner -Dsonar.projectKey=deblan-side_menu -Dsonar.sources=. -Dsonar.host.url=$$SONAR_SERVER -Dsonar.branch.name=$$(git branch --show-current)

README.md

@@ -1,12 +1,16 @@
 🤙 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/)
+![Downloads](https://img.shields.io/badge/dynamic/json?color=brightgreen&label=downloads&query=%24.K_downloads&suffix=K&url=https%3A%2F%2Fapi-side-menu.deblan.org%2Fdownloads.php)
+
 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). Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark).
 
 * [Installation and upgrade](#installation-and-upgrade)
 * [How to contribute?](#how-to-contribute)
@@ -15,12 +19,12 @@ You can customize colors depending of the theme (Dark theme and Breeze Dark). Co
 
 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://ci2.gitnet.fr/api/badges/deblan/side_menu/status.svg)](https://ci2.gitnet.fr/deblan/side_menu)
+## [📘 Read the documentation](https://deblan.gitnet.page/side_menu_doc/)
 
 Requirements
 ------------
 
-* PHP >= 7.3
+* PHP >= 8.0
 * App `theming` enabled
 
 Installation and upgrade
@@ -46,19 +50,33 @@ Users can disable the menu using the page of personal settings.
 
 Use the shortcut `Ctrl`+`o` to open and to hide the side menu. Use `tab` to navigate.
 
+### Use first top menu app as default app
+
+You can easily let Custom Menu redirect to the first app in the top menu by changing the following parameter in your `config/config.php`:
+
+```
+'defaultapp' => 'side_menu',
+```
+
+If the top menu is empty then it redirects to files.
+
 How to contribute?
 ------------------
 
 You can report a bug or request a feature by opening an issue: https://gitnet.fr/deblan/side_menu/issues
 
-If you are a developer:
+### You are a translator
+
+Translations are managed from [translate.codeberg.org](https://translate.codeberg.org/projects/custom-menu/application/).
+
+### 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 `npm install`
+* go to `apps/side_menu` and run `make dep`
 
-Build javascripts using `make npm-build` (or `make npm-watch` to build them in real time).
+Build javascripts using `make build` (or `make watch` to build them in real time).
 
 Then commit and create a pull request.
 
@@ -66,3 +84,10 @@ 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/).

appinfo/app.php

@@ -1,10 +0,0 @@
-<?php
-
-use OCA\SideMenu\AppInfo\Application;
-
-$app = new Application();
-
-if ($app->isEnabled()) {
-    $app->registerAssets();
-    $app->registerServices();
-}

appinfo/info.xml

@@ -11,13 +11,13 @@ 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). Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark).
 
 You can report a bug or request a feature by opening an issue.
 
 Requirements:
 
-* PHP >= 7.3
+* PHP >= 8.0
 * App `theming` enabled
 
 If you like this application and if you want to support the development:
@@ -25,13 +25,19 @@ 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>2.3.5</version>
+    <version>3.10.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
     <documentation>
-        <admin>https://gitnet.fr/deblan/side_menu/src/branch/master/README.md</admin>
+        <admin>https://deblan.gitnet.page/side_menu_doc/</admin>
         <developer>https://gitnet.fr/deblan/side_menu/src/branch/master/README.md</developer>
     </documentation>
     <category>customization</category>
@@ -45,9 +51,11 @@ If you like this application and if you want to support the development:
     <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="19" max-version="24"/>
+        <nextcloud min-version="25" max-version="28"/>
-        <php min-version="7.3"/>
+        <php min-version="7.4"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

appinfo/routes.php

@@ -19,6 +19,7 @@
 
 return [
     'routes' => [
+        ['name' => 'App#index', 'url' => '/', 'verb' => 'GET'],
         ['name' => 'Css#stylesheet', 'url' => '/css/stylesheet', 'verb' => 'GET'],
         ['name' => 'Js#script', 'url' => '/js/script', 'verb' => 'GET'],
         ['name' => 'Js#config', 'url' => '/js/config', 'verb' => 'GET'],

css/admin.css

@@ -16,116 +16,205 @@
  */
 
 #side-menu-section input[type="color"] {
-    width: 100px;
+  width: 100px;
-    margin: 10px 0 10px 0;
+  margin: 10px 0 10px 0;
+  padding: 0;
+  border-radius: 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;
+  padding: 1px 9px;
-    margin: 0 2px;
+  margin: 0 2px;
-    background: #eee;
+  background: #eee;
-    border: 1px solid #aaa;
+  border: 1px solid #aaa;
-    color: #555;
+  color: #555;
-    border-radius: 3px;
+  border-radius: 3px;
 }
 
 .side-menu-display {
-    padding: 10px;
+  padding: 10px;
-    border: 2px solid transparent;
+  border: 2px solid transparent;
-    max-width: 100%;
+  max-width: 100%;
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .side-menu-display.is-active {
-    border: 2px solid #91cb7f;
+  border: 2px solid #91cb7f;
 }
 
 .info {
-    margin-top: 8px;
+  margin-top: 8px;
-    padding: 5px;
+  padding: 5px;
-    background: #91cb7f;
+  background: #91cb7f;
-    color: #fff;
+  color: #fff;
-    border-radius: var(--border-radius);
+  border-radius: var(--border-radius);
 }
 
 #side-menu-section h2 small {
-    font-size: 11px;
+  font-size: 11px;
-    font-weight: normal;
+  font-weight: normal;
 }
 
 .side-menu-toggler {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .side-menu-setting-list {
-    margin: 10px 4px 4px 0px;
+  margin: 10px 4px 4px 0px;
+  border: 2px solid var(--color-border-dark);
+  border-radius: 15px;
 }
 
 .side-menu-setting-list-item {
-    padding: 5px 10px;
+  padding: 5px 10px;
-    border: 1px solid var(--color-border-dark);
+  border-bottom: 1px solid var(--color-border-dark);
-    max-width: 300px;
+  max-width: 300px;
-    margin: -1px 0 0 0;
+  margin: -1px 0 0 0;
-    cursor: pointer;
+  cursor: pointer;
+  line-height: 32px;
+}
+
+.side-menu-setting-list-item:last-child {
+  border-bottom: 0;
 }
 
 .side-menu-setting-list-drop {
-    background: yellow;
+  background: yellow;
-    border-color: yellow;
+  border-color: yellow;
-    height: 34px;
+  height: 34px;
 }
 
 .side-menu-setting.arrow {
-    color: #ccc;
+  color: #ccc;
-    padding-right: 5px;
+  padding-right: 5px;
 }
 
 .side-menu-setting-list-item input {
-    min-height: auto;
+  margin-top: 0;
-    margin-top: -1px;
+  height: 21px !important;
+  min-height: auto !important;
 }
 
 #apps-categories-custom-list select {
-    width: 100%;
+  width: 100%;
 }
 
-
 .side-menu-setting-table {
-    display: table;
+  display: table;
-    width: 100%;
+  width: 100%;
 }
 
 .side-menu-setting-row {
-    display: table;
+  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);
 }
 
 .side-menu-setting-label {
-    display: table-cell;
+  display: table-cell;
-    width: 400px;
+  width: 430px;
-    padding-right: 20px;
+  padding-right: 20px;
+}
+
+.side-menu-setting-label--top {
+  vertical-align: top;
 }
 
 .side-menu-setting-form {
-    display: table-cell;
+  display: table-cell;
-    min-width: 300px;
+  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;
+}
+
+.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);
+}
+
+.badges {
+  margin-bottom: 14px;
+  margin-top: 4px;
+}
+
+.badge {
+  border-width: 1px;
+  padding: 2px 8px;
+  margin-right: 2px;
+  margin-bottom: 5px;
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.badge-1 {
+  background: #d4ce14;
+  border-color: #cad413;
+  color: #373a05;
+}
+
+.badge-2 {
+  background: #96d47f;
+  border-color: #7ed49b;
+  color: #333;
+}
+
+.badge-3 {
+  background: #d4540a;
+  border-color: #d4700c;
+  color: #fff;
+}
+
+.badge-4 {
+  background: #9d81d4;
+  border-color: #c681d4;
+  color: #fff;
 }

css/sideMenu.css

@@ -16,319 +16,332 @@
  */
 
 #side-menu {
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    height: 100vh;
+  height: 100vh;
-    width: 100%;
+  width: 100%;
-    max-width: 250px;
+  max-width: 290px;
-    background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
+  background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
-    z-index: 3000;
+  z-index: 3000;
-    color: var(--side-menu-text-color, #fff);
+  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;
+  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;
+  display: none;
+}
+
+#side-menu a {
+  transition: 0.2s;
 }
 
 #side-menu.open {
-    display: block;
+  display: block;
 }
 
 #header .side-menu-opener {
-    margin-left: 0px;
+  margin-left: 0px;
+  margin-top: -1px;
 }
 
 .side-menu-settings {
-    margin-right: 9px;
+  margin-right: 9px;
-    margin-top: 2px;
+  margin-top: 2px;
-    float: right;
+  float: right;
-    line-height: 34px;
+  line-height: 34px;
-    height: 28px;
+  height: 28px;
-    display: none;
+  display: none;
 }
 
 .side-menu-settings a {
-    color: var(--side-menu-text-color, #fff);
+  color: var(--side-menu-text-color, #fff);
-    display: block;
+  display: block;
-    padding: 4px 7px;
+  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;
+  vertical-align: bottom;
-    margin-left: 3px;
+  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: var(--side-menu-opener, url('../img/side-menu-opener.svg'));
-    background-color: transparent !important;
+  background-color: transparent !important;
-    height: 40px !important;
+  height: 40px !important;
-    width: 40px !important;
+  width: 40px !important;
-    border-radius: 0 !important;
+  border-radius: 0 !important;
-    border: 0 !important;
+  border: 0 !important;
-    padding-right: 12px !important;
+  padding-right: 12px !important;
-    padding-left: 12px !important;
+  padding-left: 12px !important;
-    margin-left: 5px !important;
+  margin-left: 5px !important;
-    margin-left: 3px !important;
+  margin-left: 3px !important;
 }
 
-.side-menu-opener:active {
+.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');
+  background: url('../img/side-menu-opener-closer.svg');
-    display: none;
+  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);
+  height: calc(100vh - 150px);
-    z-index: 2200;
+  z-index: 2200;
-    position: fixed;
+  position: fixed;
-    top: 150px;
+  top: 150px;
-    width: 100%;
+  width: 100%;
-    max-width: 250px;
+  max-width: 290px;
-    overflow: auto;
+  overflow: auto;
 }
 
 .side-menu-app-icon {
-    width: 20px;
+  width: 20px;
-    vertical-align: top;
+  vertical-align: middle;
-    margin-right: 10px;
+  margin-top: -4px;
-    filter: invert(var(--side-menu-icon-invert-filter, 0%));
+  margin-right: 10px;
-    opacity: var(--side-menu-icon-opacity, 1);
+  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;
+  line-height: 30px;
-    color: var(--side-menu-text-color, #fff);
+  color: var(--side-menu-text-color, #fff);
-    display: block;
+  display: block;
-    padding: 7px 0 5px 15px;
+  padding: 7px 0 5px 15px;
-    overflow: hidden;
+  overflow: hidden;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
-    white-space: nowrap;
+  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-width: 60%;
-    max-height: 100px;
+  max-height: 100px;
 }
 
-.side-menu-header {
+.enu-header {
-    height: 150px;
+  height: 150px;
-    width: 100%;
+  width: 100%;
-    z-index: 2300;
+  z-index: 2300;
-    max-width: 250px;
+  max-width: 290px;
-    position: fixed;
+  position: fixed;
-    padding-top: 2px;
+  padding-top: 2px;
-    top: 0;
+  top: 0;
+}
+
+#side-menu.side-menu-with-categories .side-menu-header {
+  max-width: 295px;
 }
 
 #side-menu.hide-opener .side-menu-logo {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 #side-menu-loader {
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    z-index: 3001;
+  z-index: 3001;
 }
 
 #side-menu-loader-bar {
-    height: 4px;
+  height: 4px;
-    background: var(--side-menu-loader-color, #0e75ac);
+  background: var(--side-menu-loader-color, #0e75ac);
-    width: 0;
+  width: 0;
-    transition-property: width;
+  transition-property: width;
 }
 
 #side-menu.side-menu-big, #side-menu.side-menu-with-categories {
-    max-width: 100%;
+  max-width: 100%;
-    height: auto;
+  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;
+  height: auto;
-    position: static;
+  position: static;
-    max-width: 100vw;
+  max-width: 100vw;
-    overflow: auto;
+  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 - 50px);
+  max-height: calc(100vh - 55px);
-    overflow: auto;
+  overflow: auto;
-    position: relative;
+  position: relative;
-    top: 50px;
+  top: 5px;
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    justify-content: center;
+  justify-content: center;
-    padding: 0 10% 0 10%;
+  padding: 0 10% 0 10%;
 }
 
 .side-menu-category {
-    padding: 10px 20px;
+  padding: 10px 20px;
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .side-menu-category-title {
-    padding-left: 10px;
+  padding-left: 10px;
-    color: var(--side-menu-text-color, #fff);
+  color: var(--side-menu-text-color, #fff);
 }
 
 .side-menu-loader {
-    text-align: center;
+  text-align: center;
 }
 
 .side-menu-loader svg {
-    width: 38px;
+  width: 38px;
-    margin: auto;
+  margin: auto;
-    stroke: var(--side-menu-text-color, #fff);
+  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;
+  vertical-align: middle;
-    margin-top: -2px;
+  margin-top: -2px;
-}
-
-.side-menu-always-displayed #header,
-.side-menu-always-displayed body {
-    width: calc(100% - 50px) !important;
 }
 
 .side-menu-always-displayed body {
-    position: absolute;
+  width: calc(100% - 50px) !important;
-    left: 50px;
+  position: absolute;
+  left: 50px;
+}
+
+.side-menu-always-displayed #header {
+  position: absolute !important;
 }
 
 .side-menu-always-displayed #side-menu {
-    display: block;
+  display: block;
 }
 
 .side-menu-always-displayed .side-menu-apps-list {
-    height: calc(100vh - 49px);
+  height: 100vh;
-    top: 49px;
+  top: 0;
-    overflow: hidden;
+  overflow: hidden;
+}
+
+.side-menu-always-displayed .side-menu-apps-list--with-settings {
+  height: calc(100vh - 49px);
+  top: 49px;
 }
 
 .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;
+  max-width: 290px;
-    height: 100vh;
+  height: 100vh;
 }
 
 .side-menu-with-categories .side-menu-categories {
-    display: block;
+  display: block;
-    padding: 0;
+  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;
+  overflow-x: visible;
+}
+
+.app-menu {
+  visibility: hidden;
+}
+
+.app-menu.show {
+  visibility: visible;
 }
 
 @media screen and (max-width: 1024px) {
-    #side-menu.side-menu-big {
+  #side-menu.side-menu-big {
-        max-width: 290px;
+    max-width: 290px;
-    }
+    height: 100vh;
+  }
 
-    .side-menu-categories {
+  .side-menu-categories {
-        display: block;
+    display: block;
-        padding: 0;
+    padding: 0;
-    }
+  }
 
-    .side-menu-category {
+  .side-menu-category {
-        padding: 10px 0;
+    padding: 10px 0;
-    }
+  }
-
-    #side-menu.side-menu-big {
-        height: 100vh;
-    }
 }
 
 @media screen and (min-width: 1024px) {
-    .side-menu-closer {
+  .side-menu-closer {
-        display: block;
+    display: block;
-        float: right;
+    float: right;
-        margin-right: 9px;
+    margin-right: 9px;
-    }
+  }
 
-    .side-menu-big .side-menu-header {
+  .side-menu-big .side-menu-header {
-        max-width: 100%;
+    max-width: 100%;
-    }
+  }
 }

lib/AppInfo/Application.php

@@ -9,6 +9,9 @@ use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\App;
+use OCP\AppFramework\Bootstrap\IBootContext;
+use OCP\AppFramework\Bootstrap\IBootstrap;
+use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\IUserSession;
 use OCP\Util;
 use Psr\Container\ContainerInterface;
@@ -18,7 +21,7 @@ use Psr\Container\ContainerInterface;
  *
  * @author Simon Vieille <simon@deblan.fr>
  */
-class Application extends App
+class Application extends App implements IBootstrap
 {
     public const APP_ID = 'side_menu';
 
@@ -44,16 +47,9 @@ class Application extends App
     public function __construct(array $urlParams = [])
     {
         parent::__construct(self::APP_ID, $urlParams);
-
-        $this->config = OC::$server->getConfig();
-        $this->cspnm = OC::$server->getContentSecurityPolicyNonceManager();
-        $this->user = OC::$server[IUserSession::class]->getUser();
     }
 
-    /**
+    protected function isEnabled(): bool
-     * Checks if this app is enabled.
-     */
-    public function isEnabled(): bool
     {
         $enabled = true;
         $isForced = (bool) $this->config->getAppValue(self::APP_ID, 'force', '0');
@@ -74,64 +70,65 @@ class Application extends App
         return $enabled;
     }
 
-    /**
+    protected function addAssets()
-     * Registes services.
-     */
-    public function registerServices()
-    {
-        $container = $this->getContainer();
-
-        $container->registerService('AppRepository', function (ContainerInterface $c) {
-            return new AppRepository();
-        });
-
-        $container->registerService('CategoryRepository', function (ContainerInterface $c) {
-            return new CategoryRepository();
-        });
-
-        $container->registerService('ConfigProxy', function (ContainerInterface $c) {
-            return new ConfigProxy();
-        });
-    }
-
-    /**
-     * Registers assets.
-     */
-    public function registerAssets()
     {
         Util::addScript(self::APP_ID, 'sideMenu');
         Util::addStyle(self::APP_ID, 'sideMenu');
 
-        $stylesheet = OC::$server->getURLGenerator()->linkToRoute(
+        $assets = [
-            'side_menu.Css.stylesheet',
+            'stylesheet' => [
-            [
+                'route' => 'side_menu.Css.stylesheet',
-                'v' => $this->config->getAppValue(self::APP_ID, 'cache', '0'),
+                'type' => 'link',
-            ]
+                'route_attr' => 'href',
-        );
+                'attr' => [
-
+                    'rel' => 'stylesheet',
-        $script = OC::$server->getURLGenerator()->linkToRoute(
+                ],
-            'side_menu.Js.script',
-            [
-                'v' => $this->config->getAppValue(self::APP_ID, 'cache', '0'),
-            ]
-        );
-
-        Util::addHeader(
-            'link',
-            [
-                'href' => $stylesheet,
-                'rel' => 'stylesheet',
             ],
-            ''
+            'script' => [
-        );
+                'route' => 'side_menu.Js.script',
-
+                'type' => 'script',
-        Util::addHeader(
+                'route_attr' => 'src',
-            'script',
+                'attr' => [
-            [
+                    'nonce' => $this->cspnm->getNonce(),
-                'src' => $script,
+                ],
-                'nonce' => $this->cspnm->getNonce(),
             ],
-            ''
+        ];
-        );
+
+        $cache = $this->config->getAppValue(self::APP_ID, 'cache', '0');
+
+        foreach ($assets as $value) {
+            $route = OC::$server->getURLGenerator()->linkToRoute($value['route'], ['v' => $cache]);
+            $value['attr'][$value['route_attr']] = $route;
+
+            Util::addHeader($value['type'], $value['attr'], '');
+        }
+    }
+
+    public function register(IRegistrationContext $context): void
+    {
+        $context->registerService('AppRepository', function () {
+            return new AppRepository();
+        });
+
+        $context->registerService('CategoryRepository', function () {
+            return new CategoryRepository();
+        });
+
+        $context->registerService('ConfigProxy', function () {
+            return new ConfigProxy();
+        });
+    }
+
+    public function boot(IBootContext $context): void
+    {
+        $this->config = OC::$server->getConfig();
+        $this->cspnm = OC::$server->getContentSecurityPolicyNonceManager();
+        $this->user = OC::$server[IUserSession::class]->getUser();
+
+        if (!$this->isEnabled()) {
+            return;
+        }
+
+        $this->addAssets();
     }
 }

lib/Controller/AdminSettingController.php

@@ -69,7 +69,7 @@ class AdminSettingController extends Controller
     public function exportConfiguration()
     {
         $keys = $this->config->getAppKeys(Application::APP_ID);
-        $config = [];
+        $appConfig = [];
         $excludedKeys = [
             'cache',
             'cache-categories',
@@ -80,11 +80,11 @@ class AdminSettingController extends Controller
                 continue;
             }
 
-            $config[$key] = $this->config->getAppValue(Application::APP_ID, $key);
+            $appConfig[$key] = $this->config->getAppValue(Application::APP_ID, $key);
         }
 
         return new DataDownloadResponse(
-            json_encode($config, JSON_PRETTY_PRINT),
+            json_encode($appConfig, JSON_PRETTY_PRINT),
             'config.json',
             'text/json'
         );

lib/Controller/AppController.php

@@ -0,0 +1,110 @@
+<?php
+/**
+ * @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/>.
+ */
+
+namespace OCA\SideMenu\Controller;
+
+use OC;
+use OCA\SideMenu\Service\AppRepository;
+use OCA\SideMenu\Service\ConfigProxy;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\RedirectResponse;
+use OCP\IRequest;
+use OCP\IURLGenerator;
+use OCP\IUserSession;
+
+class AppController extends Controller
+{
+    /**
+     * @var ConfigProxy
+     */
+    protected $config;
+
+    /**
+     * @var AppRepository
+     */
+    protected $appRepository;
+
+    public function __construct(
+        string $appName,
+        IRequest $request,
+        AppRepository $appRepository,
+        IURLGenerator $urlGenerator,
+        ConfigProxy $config
+    ) {
+        parent::__construct($appName, $request);
+
+        $this->appRepository = $appRepository;
+        $this->urlGenerator = $urlGenerator;
+        $this->config = $config;
+    }
+
+    /**
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function index(): RedirectResponse
+    {
+        $user = OC::$server[IUserSession::class]->getUser();
+        $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
+        $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
+        $isForced = $this->config->getAppValueBool('force', '0');
+        $userTopMenuApps = $this->config->getUserValueArray($user, 'top-menu-apps', '[]');
+        $apps = $this->appRepository->getOrderedApps($user);
+
+        if (!$isForced && !empty($userTopMenuApps)) {
+            $topMenuApps = $userTopMenuApps;
+        }
+
+        foreach ($apps as $app) {
+            $inTopMenuApps = in_array($app['id'], $topMenuApps);
+            $inHiddenApps = in_array($app['id'], $hiddenApps);
+
+            if (!$inTopMenuApps && $inHiddenApps) {
+                continue;
+            }
+
+            return $this->redirectToApp($app, true);
+        }
+
+        return $this->redirectToApp('files');
+    }
+
+    protected function redirectToApp($app, bool $isHref = false): RedirectResponse
+    {
+        if (!$isHref) {
+            $isIgnoreFrontController = true === OC::$server->getConfig()->getSystemValue(
+                'htaccess.IgnoreFrontController',
+                false
+            );
+
+            $isFrontControllerActive = 'true' === getenv('front_controller_active');
+
+            if ($isIgnoreFrontController || $isFrontControllerActive) {
+                $path = '/apps/%s/';
+            } else {
+                $path = '/index.php/apps/%s/';
+            }
+
+            $url = $this->urlGenerator->getAbsoluteURL(sprintf($path, $app));
+        } else {
+            $url = $app['href'];
+        }
+
+        return new RedirectResponse($url);
+    }
+}

lib/Controller/CssController.php

@@ -21,14 +21,14 @@ namespace OCA\SideMenu\Controller;
 use OC;
 use OC\User\User;
 use OCA\SideMenu\AppInfo\Application;
+use OCA\SideMenu\Service\Color;
 use OCA\SideMenu\Service\ConfigProxy;
+use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IRequest;
 use OCP\IUserSession;
-use OCA\Theming\ThemingDefaults;
-use OCA\SideMenu\Service\Color;
 
 class CssController extends Controller
 {
@@ -58,8 +58,7 @@ class CssController extends Controller
         ConfigProxy $config,
         ThemingDefaults $theming,
         Color $color
-    )
+    ) {
-    {
         parent::__construct($appName, $request);
 
         $this->user = OC::$server[IUserSession::class]->getUser();
@@ -105,16 +104,18 @@ class CssController extends Controller
                 $topSideMenuApps = $userTopSideMenuApps;
             }
 
-            $isDarkThemeUserEnabled = $this->config->getUserValue($this->user, 'theme', '', 'accessibility') === 'dark';
+            $isDarkThemeUserEnabled = 'dark' === $this->config->getUserValue($this->user, 'theme', '', 'accessibility');
             $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark');
 
-            $isBreezeDarkUserEnabled = $isBreezeDarkUserEnabled === '1' || ($isBreezeDarkGlobalEnabled && $isBreezeDarkUserEnabled === '');
+            $isBreezeDarkUserEnabled = '1' === $isBreezeDarkUserEnabled ||
+                ($isBreezeDarkGlobalEnabled && '' === $isBreezeDarkUserEnabled);
         } else {
             $isDarkThemeUserEnabled = false;
             $isBreezeDarkUserEnabled = false;
         }
 
-        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
+        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) ||
+            ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
 
         $primaryColor = $this->theming->getColorPrimary();
         $lightenPrimaryColor = $this->color->adjustBrightness($primaryColor, 0.2);
@@ -125,25 +126,33 @@ class CssController extends Controller
         if ($isDarkMode) {
             $backgroundColor = $this->config->getAppValue('dark-mode-background-color', $darkenPrimaryColor);
             $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor);
-            $currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', $darkenPrimaryColor2);
+            $currentAppBackgroundColor = $this->config->getAppValue(
+                'dark-mode-current-app-background-color',
+                $darkenPrimaryColor2
+            );
             $loaderColor = $this->config->getAppValue('dark-mode-loader-color', $lightenPrimaryColor);
             $textColor = $this->config->getAppValue('dark-mode-text-color', $textColor);
             $iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
             $iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
             $opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
 
-            $backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
+            $opacity = $this->config->getAppValueInt('dark-mode-background-color-opacity', '100');
+            $backgroundOpacity = dechex($opacity * 255 / 100);
         } else {
             $backgroundColor = $this->config->getAppValue('background-color', $darkenPrimaryColor);
             $backgroundColorTo = $this->config->getAppValue('background-color-to', $darkenPrimaryColor);
-            $currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', $darkenPrimaryColor2);
+            $currentAppBackgroundColor = $this->config->getAppValue(
+                'current-app-background-color',
+                $darkenPrimaryColor2
+            );
             $loaderColor = $this->config->getAppValue('loader-color', $lightenPrimaryColor);
             $textColor = $this->config->getAppValue('text-color', $textColor);
             $iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
             $iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
             $opener = $this->config->getAppValue('opener', 'side-menu-opener');
 
-            $backgroundOpacity = dechex($this->config->getAppValueInt('background-color-opacity', '100') * 255 / 100);
+            $opacity = $this->config->getAppValueInt('background-color-opacity', '100');
+            $backgroundOpacity = dechex($opacity * 255 / 100);
         }
 
         $backgroundColor .= $backgroundOpacity;

lib/Controller/JsController.php

@@ -99,10 +99,12 @@ class JsController extends Controller
         $useAvatar = $this->config->getAppValueBool('use-avatar', '0');
         $isForced = $this->config->getAppValueBool('force', '0');
         $addLogoLink = $this->config->getAppValueBool('add-logo-link', '1');
+        $appsOrder = $this->config->getAppValueArray('apps-order', '[]');
         $avatar = null;
         $settings = null;
 
         if ($this->user) {
+            $userAppsOrder = $this->config->getUserValueArray($this->user, 'apps-order', '[]');
             $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
             $userTopSideMenuApps = $this->config->getUserValueArray($this->user, 'top-side-menu-apps', '[]');
 
@@ -114,6 +116,10 @@ class JsController extends Controller
                 $topSideMenuApps = $userTopSideMenuApps;
             }
 
+            if (!empty($userAppsOrder) && !$isForced) {
+                $appsOrder = $userAppsOrder;
+            }
+
             $userTargetBlankMode = $this->config->getUserValueInt($this->user, 'target-blank-mode', '1');
             $userTargetBlankApps = $this->config->getUserValueArray($this->user, 'target-blank-apps', '[]');
 
@@ -161,9 +167,14 @@ 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' => $appsOrder,
             'avatar' => $avatar,
             'top-menu-apps' => $topMenuApps,
             'top-side-menu-apps' => $topSideMenuApps,
+            'top-menu-mouse-over-hidden-label' => $this->config->getAppValueInt(
+                'top-menu-mouse-over-hidden-label',
+                '0'
+            ),
             'target-blank-apps' => $targetBlankApps,
             'settings' => $settings,
             'logo' => $this->themingDefaults->getLogo(),

lib/Controller/NavController.php

@@ -93,11 +93,13 @@ class NavController extends Controller
             ]);
         }
 
-        $apps = $this->appRepository->getVisibleApps();
+        $apps = $this->appRepository->getOrderedApps($user);
         $categoriesLabels = $this->categoryRepository->getOrderedCategories();
         $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
         $isForced = $this->config->getAppValueBool('force', '0');
         $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
+        $topSideMenuApps = $this->config->getAppValueArray('top-side-menu-apps', '[]');
+        $userTopSideMenuApps = $this->config->getUserValueArray($user, 'top-side-menu-apps', '[]');
         $userTopMenuApps = $this->config->getUserValueArray($user, 'top-menu-apps', '[]');
         $appsCategories = [];
         $categoriesAppsCount = [];
@@ -106,12 +108,16 @@ class NavController extends Controller
             $topMenuApps = $userTopMenuApps;
         }
 
-        foreach ($apps as $app) {
+        if (!$isForced && !empty($userTopSideMenuApps)) {
-            if (in_array($app['id'], $topMenuApps)) {
+            $topSideMenuApps = $userTopSideMenuApps;
-                continue;
+        }
-            }
 
-            if (in_array($app['id'], $hiddenApps)) {
+        foreach ($apps as $app) {
+            $inTopMenuApps = in_array($app['id'], $topMenuApps);
+            $inTopSideMenuApps = in_array($app['id'], $topSideMenuApps);
+            $inHiddenApps = in_array($app['id'], $hiddenApps);
+
+            if (($inTopMenuApps && !$inTopSideMenuApps) || $inHiddenApps) {
                 continue;
             }
 
@@ -178,10 +184,6 @@ 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;
-                });
             }
         }
 

lib/Controller/PersonalSettingController.php

@@ -43,8 +43,13 @@ class PersonalSettingController extends Controller
      */
     protected $userSession;
 
-    public function __construct($appName, IRequest $request, IConfig $config, ConfigProxy $configProxy, IUserSession $userSession)
+    public function __construct(
-    {
+        $appName,
+        IRequest $request,
+        IConfig $config,
+        ConfigProxy $configProxy,
+        IUserSession $userSession
+    ) {
         parent::__construct($appName, $request);
 
         $this->config = $config;
@@ -97,7 +102,7 @@ class PersonalSettingController extends Controller
             }
         }
 
-        if (in_array($name, ['top-menu-apps', 'top-side-menu-apps'])) {
+        if (in_array($name, ['top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
             $doSave = true;
             $data = json_decode($value, true);
 

lib/Service/AppRepository.php

@@ -2,6 +2,8 @@
 
 namespace OCA\SideMenu\Service;
 
+use OC\User\User;
+use OCP\INavigationManager;
 use OCP\L10N\IFactory;
 
 /**
@@ -33,11 +35,11 @@ class AppRepository
 
     public function __construct(
         \OC_App $ocApp,
+        protected INavigationManager $navigationManager,
         IFactory $l10nFactory,
         ConfigProxy $config,
         CategoryRepository $categoryRepository
-    )
+    ) {
-    {
         $this->ocApp = $ocApp;
         $this->l10nFactory = $l10nFactory;
         $this->config = $config;
@@ -51,9 +53,8 @@ class AppRepository
      */
     public function getVisibleApps()
     {
-        $navigation = $this->ocApp->getNavigation();
+        $navigation = $this->navigationManager->getAll();
         $appCategoriesCustom = $this->config->getAppValueArray('apps-categories-custom', '[]');
-        $categoriesCustom = $this->config->getAppValueArray('categories-custom', '[]');
         $categories = $this->categoryRepository->getOrderedCategories();
         $apps = $this->ocApp->listAllApps();
         $visibleApps = [];
@@ -63,7 +64,7 @@ class AppRepository
 
             foreach ([$app['id'], $app['id'].'_index'] as $id) {
                 if (isset($navigation[$id])) {
-                    $app['name'] = $this->l10nFactory->get($id)->t($app['name']);
+                    $app['name'] = $this->getAppName($app);
                     $app['href'] = $navigation[$id]['href'];
                     $app['icon'] = $navigation[$id]['icon'];
 
@@ -76,7 +77,7 @@ class AppRepository
             if ('external_index' === substr($app['id'], 0, 14)) {
                 $visibleApps[$app['id']] = [
                     'id' => $app['id'],
-                    'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
+                    'name' => $this->getAppName($app),
                     'href' => $app['href'],
                     'icon' => $app['icon'],
                     'category' => [
@@ -86,7 +87,7 @@ class AppRepository
             } elseif ('files' === $app['id']) {
                 $visibleApps[$app['id']] = [
                     'id' => $app['id'],
-                    'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
+                    'name' => $this->getAppName($app),
                     'href' => $app['href'],
                     'icon' => $app['icon'],
                     'category' => [],
@@ -100,10 +101,42 @@ class AppRepository
             }
         }
 
-        usort($visibleApps, function ($a, $b) {
-            return ($a['name'] < $b['name']) ? -1 : 1;
-        });
-
         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(?User $user = null)
+    {
+        $apps = $this->getVisibleApps();
+        $orders = $this->config->getAppValueArray('apps-order', '[]');
+
+        if (null !== $user && !$this->config->getAppValueBool('force', '0')) {
+            $userOrders = $this->config->getUserValueArray($user, 'apps-order', '[]');
+
+            if (!empty($userOrders)) {
+                $orders = $userOrders;
+            }
+        }
+
+        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;
+        });
+
+        return $apps;
+    }
 }

lib/Service/CategoryRepository.php

@@ -74,7 +74,8 @@ class CategoryRepository
         }
 
         foreach ($categoriesLabels as $k => $category) {
-            $categoriesLabels[$category['id']] = $category['translations'][$currentLanguage]['name'] ?? $category['translations']['en']['name'];
+            $categoriesLabels[$category['id']] = $category['translations'][$currentLanguage]['name'] ??
+                $category['translations']['en']['name'];
 
             unset($categoriesLabels[$k]);
         }

lib/Settings/Admin.php

@@ -110,18 +110,39 @@ class Admin implements ISettings
         $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor);
 
         $parameters = [
+            'defaults' => [
+                'background-color' => $darkenPrimaryColor,
+                'background-color-to' => $darkenPrimaryColor,
+                'current-app-background-color' => $darkenPrimaryColor2,
+                'text-color' => $textColor,
+                'loader-color' => $lightenPrimaryColor,
+                'dark-mode-background-color' => $darkenPrimaryColor,
+                'dark-mode-background-color-to' => $darkenPrimaryColor,
+                'dark-mode-current-app-background-color' => $darkenPrimaryColor2,
+                'dark-mode-text-color' => $textColor,
+                'dark-mode-loader-color' => $textColor,
+            ],
             'background-color' => $backgroundColor,
             'background-color-to' => $backgroundColorTo,
             'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
-            'current-app-background-color' => $this->config->getAppValue('current-app-background-color', $darkenPrimaryColor2),
+            'current-app-background-color' => $this->config->getAppValue(
+                'current-app-background-color',
+                $darkenPrimaryColor2
+            ),
             'loader-color' => $this->config->getAppValue('loader-color', $lightenPrimaryColor),
             'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
             'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
             'text-color' => $this->config->getAppValue('text-color', $textColor),
             'dark-mode-background-color' => $darkModeBackgroundColor,
             'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
-            'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
+            'dark-mode-background-color-opacity' => $this->config->getAppValueInt(
-            'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', $darkenPrimaryColor2),
+                'dark-mode-background-color-opacity',
+                '100'
+            ),
+            'dark-mode-current-app-background-color' => $this->config->getAppValue(
+                'dark-mode-current-app-background-color',
+                $darkenPrimaryColor2
+            ),
             'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', $textColor),
             'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),
             'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
@@ -147,6 +168,12 @@ 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', '[]'),
+            'top-menu-mouse-over-hidden-label' => $this->config->getAppValue(
+                'top-menu-mouse-over-hidden-label',
+                '0'
+            ),
+            '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(),

lib/Settings/Personal.php

@@ -54,8 +54,13 @@ class Personal implements ISettings
      */
     private $appRepository;
 
-    public function __construct(IL10N $l, ILogger $logger, ConfigProxy $config, IUserSession $userSession, AppRepository $appRepository)
+    public function __construct(
-    {
+        IL10N $l,
+        ILogger $logger,
+        ConfigProxy $config,
+        IUserSession $userSession,
+        AppRepository $appRepository
+    ) {
         $this->l = $l;
         $this->logger = $logger;
         $this->config = $config;
@@ -81,7 +86,9 @@ class Personal implements ISettings
             'top-side-menu-apps' => $this->config->getUserValueArray($user, 'top-side-menu-apps', '[]'),
             'target-blank-mode' => $this->config->getUserValue($user, 'target-blank-mode', '1'),
             'target-blank-apps' => $this->config->getUserValueArray($user, 'target-blank-apps', '[]'),
+            'apps-order' => $this->config->getUserValueArray($user, 'apps-order', '[]'),
             'apps' => $this->appRepository->getVisibleApps(),
+            'ordered-apps' => $this->appRepository->getOrderedApps($user),
         ];
 
         return new TemplateResponse(Application::APP_ID, 'settings/personal-form', $parameters, '');

package.json

@@ -2,19 +2,17 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.js",
+		"build": "NODE_ENV=production ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
+		"dev": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"watch": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --watch --config webpack.js",
-		"lint": "eslint --ext .js,.vue src",
+		"lint": "./node_modules/.bin/eslint --ext .js,.vue src",
-		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"lint:fix": "./node_modules/.bin/eslint --ext .js,.vue src --fix",
-		"stylelint": "stylelint src",
+		"stylelint": "./node_modules/.bin/stylelint src",
-		"stylelint:fix": "stylelint src --fix"
+		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
-		"@nextcloud/axios": "^1.8.0",
-		"@nextcloud/vue": "^1.5.0",
 		"axios": "^0.24.0",
-		"trim": "0.0.1",
+		"trim": "^1.0.1",
 		"vue": "^2.6.11"
 	},
 	"browserslist": [
@@ -27,33 +25,38 @@
 		"@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",
-		"eslint": "^5.16.0",
+		"eslint": "^8.0.0",
-		"eslint-config-nextcloud": "0.1.1",
+		"eslint-config-standard": "^17.0.0",
-		"eslint-config-standard": "^12.0.0",
 		"eslint-import-resolver-webpack": "^0.12.1",
-		"eslint-loader": "^3.0.3",
 		"eslint-plugin-import": "^2.20.0",
 		"eslint-plugin-nextcloud": "^0.3.0",
 		"eslint-plugin-node": "^10.0.0",
-		"eslint-plugin-promise": "^4.2.1",
+		"eslint-plugin-promise": "^6.0.0",
 		"eslint-plugin-standard": "^4.0.1",
-		"eslint-plugin-vue": "^5.2.3",
+		"eslint-plugin-vue": "^9.0.0",
+		"eslint-webpack-plugin": "^3.0.0",
 		"file-loader": "^6.0.0",
-		"sass-loader": "^8.0.2",
-		"stylelint": "^8.4.0",
 		"sass": "^1.49.9",
-		"stylelint-config-recommended-scss": "^3.3.0",
+		"sass-loader": "^13.0.2",
-		"stylelint-scss": "^3.16.0",
+		"stylelint": "^14.0.0",
-		"stylelint-webpack-plugin": "^0.10.5",
+		"stylelint-config-recommended-scss": "^7.0.0",
+		"stylelint-scss": "^4.0.0",
+		"stylelint-webpack-plugin": "^3.3.0",
 		"url-loader": "^4.0.0",
-		"vue-loader": "^15.9.1",
+		"vue-loader": "^15",
-		"vue-template-compiler": "^2.6.11",
+		"vue-style-loader": "^4.1.3",
-		"webpack": "^4.42.0",
+		"vue-template-compiler": "^2.7.13",
-		"webpack-cli": "^3.3.11",
+		"webpack": "^5.0.0",
+		"webpack-cli": "^4.0.0",
 		"webpack-merge": "^4.2.2",
 		"webpack-node-externals": "^1.7.2"
 	}

src/AdminCategoriesCustom.vue

@@ -15,168 +15,167 @@ 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>
+  <div>
-        <ul class="side-menu-setting-list">
+    <ul class="side-menu-setting-list" :class="{hide: values.length === 0}">
-            <li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
+      <li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
-                <span v-html="item.en"></span>
+        <span v-text="item.en"></span>
-            </li>
+      </li>
-        </ul>
+    </ul>
 
-        <Actions>
+    <NcActions>
-	        <ActionButton @click="showAddForm" icon="icon-add"></ActionButton>
+      <NcActionButton @click="showAddForm" icon="icon-add"></NcActionButton>
-        </Actions>
+    </NcActions>
 
-		<Modal v-if="addForm" @close="hideAddForm">
+    <NcModal v-if="addForm" @close="hideAddForm">
-			<div class="modal__content">
+      <div class="modal__content">
-                <div v-for="lang in langs">
+        <div v-for="lang in langs">
-                    <span class="lang" v-html="lang"></span>
+          <span class="lang" v-text="lang"></span>
-                    <input type="text" v-model="newValue[lang]" required>
+          <input type="text" v-model="newValue[lang]" required style="width: calc(100% - 100px)">
-                </div>
+        </div>
 
-                <Actions>
+        <NcActions>
-                    <ActionButton @click="saveAdd" icon="icon-checkmark"></ActionButton>
+          <NcActionButton @click="saveAdd" icon="icon-checkmark"></NcActionButton>
-                </Actions>
+        </NcActions>
-            </div>
+      </div>
-		</Modal>
+    </NcModal>
 
-		<Modal v-if="editForm" @close="hideEditForm">
+    <NcModal v-if="editForm" @close="hideEditForm">
-			<div class="modal__content">
+      <div class="modal__content">
-                <div v-for="lang in langs">
+        <div v-for="lang in langs">
-                    <span class="lang" v-html="lang"></span>
+          <span class="lang" v-text="lang"></span>
-                    <input type="text" v-model="editValue[lang]" required>
+          <input type="text" v-model="editValue[lang]" required style="width: calc(100% - 100px)">
-                </div>
+        </div>
 
-                <div class="pull-right">
+        <div class="pull-right">
-                    <Actions>
+          <NcActions>
-                        <ActionButton @click="removeEdit" icon="icon-delete"></ActionButton>
+            <NcActionButton @click="removeEdit" icon="icon-delete"></NcActionButton>
-                    </Actions>
+          </NcActions>
-                </div>
+        </div>
 
-                <Actions>
+        <NcActions>
-                    <ActionButton @click="saveEdit" icon="icon-checkmark"></ActionButton>
+          <NcActionButton @click="saveEdit" icon="icon-checkmark"></NcActionButton>
-                </Actions>
+        </NcActions>
-            </div>
+      </div>
-		</Modal>
+    </NcModal>
-    </div>
+  </div>
 </template>
 
+<style>
+.modal__content {
+  padding: 10px;
+}
+
+.modal__content .lang {
+  width: 60px;
+  display: inline-block;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.pull-right {
+  float: right;
+}
+</style>
+
 <style scoped>
-    .modal__content {
+.hide {
-        width: 200px;
+  display: none;
-        padding: 10px;
+}
-    }
-
-    .modal__content .lang {
-        width: 60px;
-        display: inline-block;
-        padding: 4px;
-        box-sizing: border-box;
-    }
-
-    .modal__content input[type=text] {
-        width: calc(100% - 85px);
-        display: inline-block;
-        margin: 0;
-    }
-
-    .pull-right {
-        float: right;
-    }
 </style>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 export default {
-    name: 'AdminCategoriesCustom',
+  name: 'AdminCategoriesCustom',
-    components: {
+  components: {
-        Modal,
+    NcModal,
-        Actions,
+    NcActions,
-        ActionButton,
+    NcActionButton,
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            input: null,
+      input: null,
-            values: [],
+      values: [],
-            langs: [],
+      langs: [],
-            addForm: false,
+      addForm: false,
-            editForm: false,
+      editForm: false,
-            newValue: {},
+      newValue: {},
-            editValue: {},
+      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>

src/AppMenu.vue

@@ -0,0 +1,345 @@
+
+<!--
+  - @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"
+      :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
+      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, 'app-menu-entry__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
+        :style="makeStyle(app)"
+        >
+        <a :href="app.href"
+          :class="{ 'has-unread': app.unread > 0 }"
+          :aria-label="appLabel(app)"
+          :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+          :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"
+        :style="makeStyle(app)"
+        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,
+      targetBlankApps: [],
+      hiddenLabels: true
+    }
+  },
+  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.targetBlankApps = window.targetBlankApps
+    this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
+    this.observer = new ResizeObserver(this.resize)
+    this.observer.observe(this.$el)
+    this.resize()
+  },
+  beforeDestroy() {
+    this.observer.disconnect()
+  },
+  methods: {
+    appLabel(app) {
+      return app.name
+        + (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
+        + (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
+    },
+    appList() {
+      let items = Object.values(this.apps)
+
+      items.sort((a, b) => {
+        return a.order < b.order ? -1 : 1;
+      })
+
+      return items
+    },
+    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;
+    }
+
+    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
+    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):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;
+  }
+
+  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
+  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+    img {
+      margin-top: -6px;
+    }
+
+    .app-menu-entry--label {
+      opacity: 1;
+      bottom: 0;
+    }
+
+    &::before, .app-menu-entry::before {
+      opacity: 0;
+    }
+  }
+
+  &.app-menu-main__show-hovered .app-menu-entry:hover,
+  &.app-menu-main__show-hovered .app-menu-entry:focus {
+    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>

src/CloserButton.vue

@@ -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>

src/Loader.vue

@@ -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">
+  <div class="side-menu-loader">
-        <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fill-rule="evenodd">
+      <g fill="none" fill-rule="evenodd">
-                <g transform="translate(1 1)" stroke-width="2">
+        <g transform="translate(1 1)" stroke-width="2">
-                    <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+          <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-                    <path d="M36 18c0-9.94-8.06-18-18-18">
+          <path d="M36 18c0-9.94-8.06-18-18-18">
-                        <animateTransform
+            <animateTransform
-                            attributeName="transform"
+              attributeName="transform"
-                            type="rotate"
+              type="rotate"
-                            from="0 18 18"
+              from="0 18 18"
-                            to="360 18 18"
+              to="360 18 18"
-                            dur="1s"
+              dur="1s"
-                            repeatCount="indefinite"/>
+              repeatCount="indefinite"/>
-                    </path>
+          </path>
-                </g>
+        </g>
-            </g>
+      </g>
-        </svg>
+    </svg>
-    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Loader',
+  name: 'Loader',
 }
 </script>

src/Logo.vue

@@ -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">
+  <div v-bind:class="classes">
-        <a v-if="link !== null" v-bind:href="link">
+    <a v-if="link !== null" v-bind:href="link">
-            <img v-bind:src="image">
+      <img v-bind:src="image" alt="Logo">
-        </a>
+    </a>
-        <img v-else v-bind:src="image">
+    <img v-else v-bind:src="image" alt="Logo">
-    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Logo',
+  name: 'Logo',
-    props: {
+  props: {
-        image: {
+    image: {
-            type: String,
+      type: String,
-            required: true
+      required: true
-        },
-        link: {
-            type: String,
-            required: false
-        },
-        classes: {
-            type: Object,
-            required: true
-        },
     },
+    link: {
+      type: String,
+      required: false
+    },
+    classes: {
+      type: Object,
+      required: true
+    },
+  },
 }
 </script>

src/OpenerButton.vue

@@ -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>

src/PageLoader.js

@@ -0,0 +1,20 @@
+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

src/SettingsButton.vue

@@ -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">
+  <div class="side-menu-settings">
-        <a v-bind:href="href">
+    <a v-bind:href="href">
-            {{ label }}
+      {{ label }}
 
-            <span class="avatardiv avatardiv-shown">
+      <span class="avatardiv avatardiv-shown">
-                <img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
+        <img v-bind:src="avatar" :alt="label">
-            </span>
+      </span>
-        </a>
+    </a>
-    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'SettingsButton',
+  name: 'SettingsButton',
-    props: {
+  props: {
-        label: {
+    label: {
-            type: String,
+      type: String,
-            required: true
+      required: true
-        },
-        href: {
-            type: String,
-            required: true
-        },
-        avatar: {
-            type: String,
-            required: true
-        },
     },
+    href: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: String,
+      required: true
+    },
+  },
 }
 </script>

src/SideMenu.js

@@ -16,35 +16,56 @@
  */
 
 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 sideMenuContainer = document.querySelector('#side-menu')
+  const container = document.querySelector('#side-menu')
 
-    if (sideMenuContainer) {
+  if (!container) {
-        let component
+    return window.setTimeout(mountSideMenuComponent, 50)
+  }
 
-        if (sideMenuContainer.getAttribute('data-bigmenu')) {
+  const component = (() => {
-            component = SideMenuBig
+    if (container.getAttribute('data-bigmenu')) {
-        } else if(sideMenuContainer.getAttribute('data-sidewithcategories')) {
+      return SideMenuBig
-            component = SideMenuWithCategories
+    } else if(container.getAttribute('data-sidewithcategories')) {
-        } else {
+      return SideMenuWithCategories
-            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 {
-        window.setTimeout(mountSideMenuComponent, 50)
+      return SideMenu
     }
+  })()
+
+  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()

src/SideMenu.vue

@@ -15,154 +15,134 @@ 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 id="side-menu">
-        <div class="side-menu-header">
+    <div class="side-menu-header" v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar">
-            <SettingsButton
+      <SettingsButton
-                v-if="settings"
+        v-if="settings"
-                v-bind:href="settings.href"
+        v-bind:href="settings.href"
-                v-bind:label="settings.name"
+        v-bind:label="settings.name"
-                v-bind:avatar="settings.avatar" />
+        v-bind:avatar="settings.avatar" />
 
-            <OpenerButton />
+      <OpenerButton />
 
-            <Logo
+      <Logo
-                v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
+        v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
-                v-bind:image="logo"
+        v-bind:image="logo"
-                v-bind:link="logoLink"
+        v-bind:link="logoLink"
-            />
+      />
 
-            <Logo
+      <Logo
-                v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
+        v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
-                v-bind:image="avatar"
+        v-bind:image="avatar"
-                v-bind:link="logoLink"
+        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" :class="{'side-menu-apps-list--with-settings': !!settings}">
+      <SideMenuApp
+        v-for="(app, key) in apps"
+        v-if="!hiddenApps.includes(app.id)"
+        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>
-import trim from 'trim'
 import axios from 'axios'
 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',
+  name: 'SideMenu',
-    components: {
+  components: {
-        SettingsButton,
+    SettingsButton,
-        OpenerButton,
+    OpenerButton,
-        SideMenuApp,
+    SideMenuApp,
-        Logo,
+    Logo,
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            apps: [],
+      apps: [],
-            logo: null,
+      logo: null,
-            logoLink: null,
+      logoLink: null,
-            avatar: null,
+      avatar: null,
-            forceLightIcon: false,
+      forceLightIcon: false,
-            targetBlankApps: [],
+      targetBlankApps: [],
-            settings: null,
+      hiddenApps: [],
-        }
+      settings: null,
-    },
+      openerHover: false,
-    methods: {
+      alwaysDisplayed: false,
-        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')
-                var parent = element.parentNode
-
-                if (!parent) {
-                    continue
-                }
-
-                var 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
+        }
+
+        if (this.hiddenApps.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() {
+    },
+  },
+  mounted() {
+    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']
+        this.openerHover = config['opener-hover']
+        this.alwaysDisplayed = config['always-displayed']
+        this.hiddenApps = config['big-menu-hidden-apps']
+        this.retrieveApps()
+      })
+  }
 }
 </script>

src/SideMenuApp.vue

@@ -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">
+  <li v-bind:class="classes">
-        <a v-bind:href="href" :target="target" v-bind:title="label">
+    <a v-bind:href="href" :target="target" v-bind:title="label">
-            <span class="side-menu-app-icon" v-html="icon"></span>
+      <img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
-            <span class="side-menu-app-text" v-html="label"></span>
+      <span class="side-menu-app-text" v-text="label"></span>
-        </a>
+    </a>
-    </li>
+  </li>
 </template>
 
 <script>
 export default {
-    name: 'SideMenuApp',
+  name: 'SideMenuApp',
-    props: {
+  props: {
-        label: {
+    label: {
-            type: String,
+      type: String,
-            required: true
+      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>

src/SideMenuBig.vue

@@ -15,116 +15,116 @@ 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 id="side-menu" class="side-menu-big">
-        <div class="side-menu-header">
+    <div class="side-menu-header">
-            <CloserButton />
+      <CloserButton />
 
-            <SettingsButton
+      <SettingsButton
-                v-if="settings"
+        v-if="settings"
-                v-bind:href="settings.href"
+        v-bind:href="settings.href"
-                v-bind:label="settings.name"
+        v-bind:label="settings.name"
-                v-bind:avatar="settings.avatar"
+        v-bind:avatar="settings.avatar"
-            />
+      />
 
-            <OpenerButton />
+      <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-html="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 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"
+            />
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import trim from 'trim'
 import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import CloserButton from './CloserButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
 import SideMenuBigApp from './SideMenuBigApp'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
-    name: 'SideMenuBig',
+  name: 'SideMenuBig',
-    components: {
+  components: {
-        SettingsButton,
+    SettingsButton,
-        OpenerButton,
+    OpenerButton,
-        CloserButton,
+    CloserButton,
-        Loader,
+    Loader,
-        SideMenuBigApp,
+    SideMenuBigApp,
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            items: [],
+      items: [],
-            activeApp: null,
+      activeApp: null,
-            targetBlank: false,
+      targetBlank: false,
-            targetBlankApps: [],
+      targetBlankApps: [],
-            settings: null,
+      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() {
+      const ncApps = loadState('core', 'apps', {})
+
+      for (let id in ncApps) {
+        if (ncApps[id].active) {
+          this.activeApp = id
+        }
+      }
+    },
+
+    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>

src/SideMenuBigApp.vue

@@ -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">
+  <li v-bind:class="classes">
-        <a v-bind:href="href" :target="target" v-bind:title="label">
+    <a v-bind:href="href" :target="target" v-bind:title="label">
-            <img class="side-menu-app-icon" v-bind:src="icon"></span>
+      <img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
-            <span class="side-menu-app-text" v-html="label"></span>
+      <span class="side-menu-app-text" v-text="label"></span>
-        </a>
+    </a>
-    </li>
+  </li>
 </template>
 
 <script>
 export default {
-    name: 'SideMenuBigApp',
+  name: 'SideMenuBigApp',
-    props: {
+  props: {
-        label: {
+    label: {
-            type: String,
+      type: String,
-            required: true
+      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>

src/SideMenuWithCategories.vue

@@ -15,114 +15,112 @@ 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 id="side-menu" class="side-menu-with-categories">
-        <div class="side-menu-header">
+    <div class="side-menu-header">
-            <SettingsButton
+      <SettingsButton
-                v-if="settings"
+        v-if="settings"
-                v-bind:href="settings.href"
+        v-bind:href="settings.href"
-                v-bind:label="settings.name"
+        v-bind:label="settings.name"
-                v-bind:avatar="settings.avatar"
+        v-bind:avatar="settings.avatar"
-            />
+      />
 
-            <OpenerButton />
+      <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-html="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 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"
+            />
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import trim from 'trim'
 import axios from 'axios'
 import OpenerButton from './OpenerButton'
-import CloserButton from './CloserButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
 import SideMenuBigApp from './SideMenuBigApp'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
-    name: 'SideMenuWithCategories',
+  name: 'SideMenuWithCategories',
-    components: {
+  components: {
-        SettingsButton,
+    SettingsButton,
-        OpenerButton,
+    OpenerButton,
-        CloserButton,
+    Loader,
-        Loader,
+    SideMenuBigApp,
-        SideMenuBigApp,
+  },
-    },
+  data() {
-    data() {
+    return {
-        return {
+      items: [],
-            items: [],
+      activeApp: null,
-            activeApp: null,
+      targetBlank: false,
-            targetBlank: false,
+      targetBlankApps: [],
-            targetBlankApps: [],
+      settings: null,
-            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() {
+      const ncApps = loadState('core', 'apps', {})
+
+      for (let id in ncApps) {
+        if (ncApps[id].active) {
+          this.activeApp = id
+        }
+      }
+    },
+
+    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>

src/admin.js

@@ -26,217 +26,257 @@ let elements = []
 const selector = '#side-menu-message'
 
 const userConfig = (name, value, callbacks) => {
-    const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
+  const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
-    const formData = []
+  const formData = []
 
-    formData.push('name=' + encodeURIComponent(name))
+  formData.push('name=' + encodeURIComponent(name))
-    formData.push('value=' + encodeURIComponent(value))
+  formData.push('value=' + encodeURIComponent(value))
 
-    fetch(url, {
+  fetch(url, {
-        method: 'POST',
+    method: 'POST',
-        headers: {
+    headers: {
-            'Content-Type': 'application/x-www-form-urlencoded',
+      'Content-Type': 'application/x-www-form-urlencoded',
-        },
+    },
-        body: formData.join('&')
+    body: formData.join('&')
-    })
+  })
-    .then(callbacks.success)
+  .then(callbacks.success)
-    .catch(callbacks.error)
+  .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) {
+  if (!element) {
-        return
+    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)
     }
 
-    let value
+    value = JSON.stringify(value)
-    let name
+  } else {
+    name = element.getAttribute('name')
+    value = element.value
+  }
 
-    if (element.hasAttribute('data-checkbox')) {
+  const size = elements.length
-        name = element.getAttribute('data-name')
-        value = []
 
-        const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
+  if (name === 'cache') {
+    ++value
+  }
 
-        for (let input of inputs) {
+  const progress = document.querySelector('#side-menu-save-progress')
-            value.push(input.value)
-        }
 
-        value = JSON.stringify(value)
+  progress.style.width = '40px';
-    } else {
+  progress.style.marginLeft = '5px';
-        name = element.getAttribute('name')
+
-        value = element.value
+  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 + '"'))
     }
+  }
 
-    const size = elements.length
+  if (element.hasAttribute('data-personal')) {
-
+    userConfig(name, value, callbacks)
-    if (name === 'cache') {
+  } else {
-        ++value
+    appConfig(name, value, callbacks)
-    }
+  }
-
-    const callbacks = {
-        success: () => {
-            OC.msg.finishedSuccess(
-                selector,
-                t('side_menu', (key + 1) + '/' + size)
-            )
-
-            if (key < size - 1) {
-                saveSettings(key + 1)
-            } else {
-                OC.msg.finishedSuccess(selector, t('side_menu', 'Saved! Page is reloading...'))
-                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') {
+  if (window.getComputedStyle(element).display === 'none') {
-        display = 'block'
+    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')) {
+  for (let item of document.querySelectorAll('.apps-categories-custom')) {
-        let app = item.getAttribute('data-app')
+    let app = item.getAttribute('data-app')
-        let value = item.value
+    let value = item.value
 
-        if (value) {
+    if (value) {
-            values[app] = 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', () => {
-    if (document.querySelector('#side-menu-categories-custom')) {
+  $('*[data-toggle="tooltip"]').tooltip();
-        const View = Vue.extend(AdminCategoriesCustom)
-        const adminCategoriesCustom = new View({})
 
-        adminCategoriesCustom.$mount('#side-menu-categories-custom')
+  if (document.querySelector('#side-menu-categories-custom')) {
-    }
+    const View = Vue.extend(AdminCategoriesCustom)
+    const adminCategoriesCustom = new View({})
 
-    elements = document.querySelectorAll('.side-menu-setting')
+    adminCategoriesCustom.$mount('#side-menu-categories-custom')
+  }
 
-    document.querySelector('#side-menu-save').addEventListener('click', (event) => {
+  elements = document.querySelectorAll('.side-menu-setting')
-        event.preventDefault()
-        OC.msg.startSaving(selector)
 
-        saveSettings(0)
+  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)
     })
+  }
 
-    const displays = document.querySelectorAll('.side-menu-display')
+  const displays = document.querySelectorAll('.side-menu-display')
 
-    for (let display of displays) {
+  for (let display of displays) {
-        display.addEventListener('click', (event) => {
+    display.addEventListener('click', (event) => {
-            const target = event.target
+      const target = event.target
 
-            for (let d of displays) {
+      for (let d of displays) {
-                d.classList.toggle('is-active', d === display)
+        d.classList.toggle('is-active', d === display)
-            }
+      }
 
-            document.querySelector('#side-menu-always-displayed').value = target.getAttribute('data-alwaysdiplayed')
+      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-big-menu').value = target.getAttribute('data-bigmenu')
-            document.querySelector('#side-menu-side-with-categories').value = target.getAttribute('data-sidewithcategories')
+      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'
     })
+  }
 
-    try {
+  for (let item of document.querySelectorAll('.apps-categories-custom')) {
-        sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
+    item.addEventListener('change', (event) => {
-            let value = []
+      updateAppsCategoriesCustom()
+    })
+  }
 
-            for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+  for (let item of document.querySelectorAll('.side-menu-setting-live')) {
-                console.log(item.getAttribute('data-id'))
+    item.addEventListener('change', (event) => {
-                value.push(item.getAttribute('data-id'))
+      const target = event.target
-            }
+      const name = target.getAttribute('name')
 
-            document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
+      let value = target.value
-        })
+      let id = null
-    } catch (e) {
+
-    }
+      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) {
+  }
 })

src/l10n/fixtures/cs.yaml

@@ -3,8 +3,9 @@
 "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>. 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.'
-"Top menu": "Hlavní nabídka"
+: '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í."
 "Experimental": "Experimentální"
@@ -38,16 +39,13 @@
 "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)."
 "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>."
 "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."
 "Not compatible with touch screens.": "Nekompatibilní s dotykovými obrazovkami."
 "Big menu": "Velká nabídka"
@@ -62,10 +60,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 zapnutá pro uživatele"
+"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>."
+"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"
@@ -78,7 +76,19 @@
 "Dark mode colors": "Barvy tmavého režimu"
 "With categories": "S kategoriemi"
 "Custom categories": "Vlastní kategorie"
-"Customize application categories": "Personnaliser les catégories des applications"
 "Customize application categories": "Přizpůsobte kategorie aplikací"
-"Apps only visible in the top menu": "Aplikace jsou viditelné pouze v horní nabídce "
+"Reset to default": "Vrátit zpět na výchozí hodnoty"
-"Apps visible in the top and side menus": "Aplikace viditelné v horní a boční nabídce"
+"Hidden icon": "Skrytá ikona"
+"Small icon": "Malá ikona"
+"Normal icon": "Normální ikona"
+"Big icon": "Velká ikona"
+"Hidden text": "Skrytý text"
+"Small text": "Malý text"
+"Normal text": "Normální text"
+"Big text": "Velký text"
+"Applications": "Aplikace"
+"Applications kept in the top menu": "Aplikace ponechané v horní nabídce"
+"Applications kept in the top menu but also shown in side menu": "Aplikace ponechané v horní nabídce ale také zobrazené v té boční"
+"These applications must be selected in the previous option.": "Tyto aplikace je třeba vybrat v předchozí volbě."
+"Hide labels on mouse over": "Skrýt popisky při najetím ukazatele myši"
+"Except the hovered app": "Except the hovered app"

src/l10n/fixtures/de.yaml

@@ -3,7 +3,8 @@
 "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."
@@ -38,16 +39,13 @@
 "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)."
 "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."
 "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."
 "Not compatible with touch screens.": "Nicht kompatibel mit Touchscreens."
 "Big menu": "Großes Menü"
@@ -79,5 +77,18 @@
 "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 "
+"Reset to default": "Auf Standard zurücksetzen"
-"Apps visible in the top and side menus": "Apps im oberen und seitlichen Menü sichtbar"
+"Hidden icon": "Verstecktes Symbol"
+"Small icon": "Kleines Symbol"
+"Normal icon": "Normales Symbol"
+"Big icon": "Große Ikone"
+"Hidden text": "Versteckter Text"
+"Small text": "Kleiner Text"
+"Normal text": "Normaler Text"
+"Big text": "Großer Text"
+"Applications": "Anwendungen"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
+"Hide labels on mouse over": "Hide labels on mouse over"
+"Except the hovered app": "Except the hovered app"

src/l10n/fixtures/es.yaml

@@ -0,0 +1,94 @@
+"Custom menu": "Menú personalizado"
+"Enable the custom menu": "Habilitar el menú personalizado"
+"No": "No"
+"Yes": "Sí"
+"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.'
+: 'Usa la combinación de teclas <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> para activar y desactivar el menú lateral. Use <span class="keyboard-key">tab</span> para navegar.'
+"Top menu": "Menu principal"
+"Apps that not must be moved in the side menu": "Aplicaciones que no se deben mover al menú lateral"
+"If there is no selection then the global configuration is applied.": "Si no hay selección, se aplica la configuración global."
+"Experimental": "En pruebas"
+"Save": "Guardar"
+"You like this app and you want to support me?": "¿Te gusta esta aplicación y quieres apoyarme?"
+"Buy me a coffee ☕": "Cómprame un café ☕"
+"Hidden": "Oculto"
+"Small": "Pequeño"
+"Normal": "Normal"
+"Big": "Grande"
+"Hidden icon": "Ocultar Icono"
+"Small icon": "Icono pequeño"
+"Normal icon": "Icono normal"
+"Big icon": "Icono grande"
+"Hidden text": "Texto oculto"
+"Small text": "Texto pequeño"
+"Normal text": "Texto normal"
+"Big text": "Texto grande"
+"Colors": "Colores"
+"Background color": "Color de fondo"
+"Background color of current app": "Color de fondo de la aplicación actual"
+"Text color": "Color del texto"
+"Loader": "Cargador"
+"Icon": "Icono"
+"Same color": "El mismo color"
+"Opposite color": "Color opuesto"
+"Transparent": "Transparente"
+"Opaque": "Opaco"
+"Opener": "Abrir"
+"Default": "Por defecto"
+"Default (dark)": "Por defecto (oscuro)"
+"Hamburger": "Hamburguesa"
+"Hamburger (dark)": "Hamburger (negro)"
+"Hamburger 2": "Hamburguesa 2"
+"Hamburger 2 (dark)": "Hamburger 2 (negro)"
+"Before the logo": "Antes del logotipo"
+"After the logo": "Después del logotipo"
+"Position": "Posición"
+"Show only the opener (hidden logo)": "Mostrar solo abrir (ocultar logotipo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "No mostrar el menú lateral y el abridor si no hay aplicación (por ejemplo: páginas públicas)."
+"Panel": "Panel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Abra el menú cuando el ratón esté sobre el icono (se desactiva automáticamente en las pantallas táctiles)"
+"Display the big menu": "Mostrar el menú grande"
+"Display the logo": "Mostrar el logotipo"
+"Icons and texts": "Iconos y textos"
+"Loader enabled": "Cargador activado"
+"Tips": "Consejos"
+"Always displayed": "Siempre se muestra"
+"This is the automatic behavior when the menu is always displayed.": "Este es el comportamiento automático cuando aún se muestra el menú."
+"Not compatible with touch screens.": "No es compatible con las pantallas táctiles."
+"Big menu": "Menú grande"
+"Live preview": "Previsualización en directo"
+"Open apps in new tab": "Abrir las aplicaciones en una nueva pestaña"
+"Use the global setting": "Utilizar la configuración global"
+"Use my selection": "Utilizar mi selección"
+"Show and hide the list of applications": "Mostrar y ocultar la lista de aplicaciones"
+"Use the avatar instead of the logo": "Utilizar un avatar en lugar de un logotipo"
+"You do not have permission to change the settings.": "No tienes permiso para cambiar la configuración."
+"Force this configuration to users": "Forzar esta configuración a todos los usuarios"
+"Export the configuration": "Exportar la configuración"
+"Purge the cache": "Vaciar la caché"
+"Show the link to settings": "Mostrar un enlace a la configuración"
+"The menu is enabled by default for users": "El menú está activado por defecto para los usuarios"
+"Except when the configuration is forced.": "Excepto cuando la configuración es forzada."
+"Apps that should not be displayed in the menu": "Aplicaciones que no deben aparecer en el menú"
+"This feature is only compatible with the <code>big menu</code> display.": "Esta función sólo es compatible con la pantalla del <code>menú grande</code>."
+"The logo is a link to the default app": "El logotipo es un enlace a la aplicación por defecto"
+"Others": "Otros"
+"Categories": "Categorías"
+"Customize sorting": "Personalizar la clasificación"
+"Order by": "Ordenar por"
+"Name": "Nombre"
+"Customed": "Personalizado"
+"Show and hide the list of categories": "Mostrar y ocultar la lista de categorías"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Estos parámetros se utilizan cuando el tema oscuro o el tema oscuro de Breeze están activados."
+"Dark mode colors": "Colores del modo oscuro"
+"With categories": "Con categorías"
+"Custom categories": "Categorías personalizadas"
+"Customize application categories": "Personalizar las categorías de las aplicaciones"
+"Reset to default": "Restablecer los valores por defecto"
+"Applications": "Aplicaciones"
+"Applications kept in the top menu": "Aplicaciones guardadas en el menú superior"
+"Applications kept in the top menu but also shown in side menu": "Las aplicaciones se mantienen en el menú superior pero también se muestran en el menú lateral"
+"These applications must be selected in the previous option.": "Estas aplicaciones deben ser seleccionadas en las opciones anteriores."
+"Hide labels on mouse over": "Ocultar las etiquetas al pasar el ratón"
+"Except the hovered app": "Except the hovered app"

src/l10n/fixtures/fr.yaml

@@ -3,10 +3,11 @@
 "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"
+"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 ?"
@@ -15,6 +16,14 @@
 "Small": "Petit"
 "Normal": "Normal"
 "Big": "Gros"
+"Hidden icon": "Icône masqué"
+"Small icon": "Petit icône"
+"Normal icon": "Icône normal"
+"Big icon": "Gros icône"
+"Hidden text": "Text masqué"
+"Small text": "Texte petit"
+"Normal text": "Texte normal"
+"Big text": "Gros texte"
 "Colors": "Couleurs"
 "Background color": "Couleur de fond"
 "Background color of current app": "Couleur de fond de l'application en cours"
@@ -40,14 +49,11 @@
 "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)"
 "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 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é."
 "Not compatible with touch screens.": "Incompatible avec les écrans tactiles."
 "Big menu": "Menu large"
@@ -79,5 +85,10 @@
 "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"
+"Reset to default": "Restaurer les valeurs par défaut"
-"Apps visible in the top and side menus": "Applications visibles dans le menus supérieur et latéral"
+"Applications": "Applications"
+"Applications kept in the top menu": "Applications conservées dans le menu supérieur"
+"Applications kept in the top menu but also shown in side menu": "Applications conservées dans le menu supérieur mais également affichées dans le menu latéral"
+"These applications must be selected in the previous option.": "Ces applications doivent également être sélectionnées dans l'option précédente."
+"Hide labels on mouse over": "Masquer le libellé des applications au passage de la souris"
+"Except the hovered app": "À l'exception de l'application survolée"

src/l10n/fixtures/nl.yaml

@@ -0,0 +1,94 @@
+"Custom menu": "Aangepast menu"
+"Enable the custom menu": "Het aangepaste menu inschakelen"
+"No": "Nee"
+"Yes": "Ja"
+"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.'
+: 'Gebruik de snelkoppeling <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> om het zijmenu te openen en te verbergen. Gebruik <span class="keyboard-key">tab</span> om te navigeren.'
+"Top menu": "Bovenste menu"
+"Apps that not must be moved in the side menu": "Apps die niet moeten worden verplaatst in het zijmenu"
+"If there is no selection then the global configuration is applied.": "Als er geen keuze is, wordt de globale configuratie toegepast."
+"Experimental": "Experimenteel"
+"Save": "Opslaan"
+"You like this app and you want to support me?": "Vind je deze app leuk en wil je me steunen?"
+"Buy me a coffee ☕": "Koop een koffie voor me ☕"
+"Hidden": "Verborgen"
+"Small": "Klein"
+"Normal": "Normaal"
+"Big": "Groot"
+"Hidden icon": "Verborgen icoon"
+"Small icon": "Klein icoon"
+"Normal icon": "Normaal icoon"
+"Big icon": "Groot icoon"
+"Hidden text": "Verborgen tekst"
+"Small text": "Kleine tekst"
+"Normal text": "Normale tekst"
+"Big text": "Grote tekst"
+"Colors": "Kleuren"
+"Background color": "Achtergrond kleur"
+"Background color of current app": "Achtergrondkleur van huidige app"
+"Text color": "Tekst kleur"
+"Loader": "Lader"
+"Icon": "Icoon"
+"Same color": "Zelfde kleur"
+"Opposite color": "Tegenovergestelde kleur"
+"Transparent": "Transparant"
+"Opaque": "Ondoorzichtig"
+"Opener": "Opener"
+"Default": "Standaard"
+"Default (dark)": "Standaard (donker)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (donker)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (donker)"
+"Before the logo": "Voor het logo"
+"After the logo": "Na het logo"
+"Position": "Positie"
+"Show only the opener (hidden logo)": "Toon alleen de opener (verborgen logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Geef het zijmenu en de opener niet weer als er geen toepassing is (bijv. openbare pagina's)."
+"Panel": "Paneel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open het menu wanneer de muis over de opener gaat (automatisch uitgeschakeld op aanraakschermen)"
+"Display the big menu": "Toon het grote menu"
+"Display the logo": "Toon het logo"
+"Icons and texts": "Iconen en teksten"
+"Loader enabled": "Lader ingeschakeld"
+"Tips": "Tips"
+"Always displayed": "Altijd weergegeven"
+"This is the automatic behavior when the menu is always displayed.": "Dit is het automatische gedrag wanneer het menu altijd wordt weergegeven."
+"Not compatible with touch screens.": "Niet compatibel met aanraakschermen."
+"Big menu": "Groot menu"
+"Live preview": "Live voorbeeld"
+"Open apps in new tab": "Open apps in nieuwe tab"
+"Use the global setting": "Gebruik de globale instellingen"
+"Use my selection": "Gebruik mijn selectie"
+"Show and hide the list of applications": "De lijst met toepassingen tonen en verbergen"
+"Use the avatar instead of the logo": "Gebruik avatar in plaats van het logo"
+"You do not have permission to change the settings.": "Je hebt geen toestemming om de instellingen te veranderen."
+"Force this configuration to users": "Forceer deze configuratie aan gebruikers"
+"Export the configuration": "Exporteer de configuratie"
+"Purge the cache": "De cache wissen"
+"Show the link to settings": "Toon de link naar de instellingen"
+"The menu is enabled by default for users": "Het menu is standaard ingeschakeld voor gebruikers"
+"Except when the configuration is forced.": "Behalve als de configuratie geforceerd is."
+"Apps that should not be displayed in the menu": "Apps die niet in het menu weergegeven mogen worden"
+"This feature is only compatible with the <code>big menu</code> display.": "Deze functie is alleen compatibel met het <code>grote menu</code> scherm."
+"The logo is a link to the default app": "Het logo is een link naar de standaard app"
+"Others": "Overige"
+"Categories": "Categorieën"
+"Customize sorting": "Sortering aanpassen"
+"Order by": "Sorteer op"
+"Name": "Naam"
+"Customed": "Aangepast"
+"Show and hide the list of categories": "De lijst met categorieën tonen en verbergen"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Deze parameters worden gebruikt wanneer Dark theme of Breeze Dark Theme zijn ingeschakeld."
+"Dark mode colors": "Donkere modus kleuren"
+"With categories": "Met categorieën"
+"Custom categories": "Aangepaste categorieën"
+"Customize application categories": "Toepassingscategorieën aanpassen"
+"Reset to default": "Terugzetten naar standaard"
+"Applications": "Applicaties"
+"Applications kept in the top menu": "Applicaties bewaard in het bovenste menu"
+"Applications kept in the top menu but also shown in side menu": "Applicaties blijven in het topmenu maar worden ook in het zijmenu getoond"
+"These applications must be selected in the previous option.": "Deze toepassingen moeten bij de vorige optie zijn geselecteerd."
+"Hide labels on mouse over": "Hide labels on mouse over"
+"Except the hovered app": "Except the hovered app"

src/l10n/fixtures/ru.yaml

@@ -0,0 +1,94 @@
+"Custom menu": "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.'
+: 'Используйте сочетание клавиш <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>, чтобы открыть или скрыть боковое меню. Используйте <span class="keyboard-key">Tab</span> для навигации.'
+"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": "Гамбургер 2"
+"Hamburger 2 (dark)": "Гамбургер 2 (тёмный)"
+"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": "Показать логотип"
+"Icons and texts": "Иконки и текст"
+"Loader enabled": "Загрузчик включен"
+"Tips": "Советы"
+"Always displayed": "Всегда отображается"
+"This is the automatic behavior 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": "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": "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.": "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.": "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": "Customed"
+"Show and hide the list of categories": "Показать или скрыть список категорий"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Эти настройки используются темами Тёмная и Тёмная Breeze."
+"Dark mode colors": "Цвета тёмной темы"
+"With categories": "С категориями"
+"Custom categories": "Пользовательские категории"
+"Customize application categories": "Изменить категории приложений"
+"Reset to default": "Сбросить к значениям по умолчанию"
+"Applications": "Приложения"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
+"Hide labels on mouse over": "Скрыть название при наведении мыши"
+"Except the hovered app": "Except the hovered app"

src/l10n/fixtures/tpl/base.yaml

@@ -0,0 +1,96 @@
+"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": ""
+"Icons and texts": ""
+"Loader enabled": ""
+"Tips": ""
+"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": ""
+"Reset to default": ""
+"Applications": ""
+"Applications kept in the top menu": ""
+"Applications kept in the top menu but also shown in side menu": ""
+"These applications must be selected in the previous option.": ""
+"Hide labels on mouse over": ""
+"Except the hovered app": ""

src/l10n/fixtures/zh_CN.yaml

@@ -3,7 +3,8 @@
 "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.": "使用快捷键 <span class=\"keyboard-key\">Ctrl<\/span>+<span class=\"keyboard-key\">o<\/span> 打开或隐藏侧边栏菜单。使用<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."
+: "使用快捷键 <span class=\"keyboard-key\">Ctrl</span>+<span class=\"keyboard-key\">o</span> 打开或隐藏侧边栏菜单。使用<span class=\"keyboard-key\">tab</span> 来导航。"
 "Top menu": "顶部菜单"
 "Apps that not must be moved in the side menu": "禁止在侧边栏菜单移动的应用"
 "If there is no selection then the global configuration is applied.": "如不选择，将应用全局设定。"
@@ -40,14 +41,11 @@
 "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": "图标与文字"
 "Loader enabled": "菜单指示器已激活"
 "Tips": "技巧"
 "Always displayed": "一直显示"
-"The logo will be hidden when the menu is always displayed.": "一直显示菜单时logo将被隐藏。"
 "This is the automatic behavior when the menu is always displayed.": "一直显示菜单时的自动动作。"
 "Not compatible with touch screens.": "与触屏不兼容。"
 "Big menu": "大型菜单"
@@ -65,7 +63,7 @@
 "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.": "此功能只和<code>大型菜单<\/code>兼容。"
+"This feature is only compatible with the <code>big menu</code> display.": "此功能只和<code>大型菜单</code>兼容。"
 "The logo is a link to the default app": "logo链接到默认应用"
 "Others": "其他"
 "Categories": "类别"
@@ -79,5 +77,18 @@
 "With categories": "有类别"
 "Custom categories": "自定义类别"
 "Customize application categories": "自定义应用程序类别"
-"Apps only visible in the top menu": "应用程序仅在顶部菜单中可见"
+"Reset to default": "重置为默认设置"
-"Apps visible in the top and side menus": "顶部和侧边菜单中可见的应用程序"
+"Hidden icon": "隐藏图标"
+"Small icon": "小图标"
+"Normal icon": "正常图标"
+"Big icon": "大图标"
+"Hidden text": "隐藏文字"
+"Small text": "小文本"
+"Normal text": "普通文本"
+"Big text": "大文本"
+"Applications": "Applications"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
+"Hide labels on mouse over": "Hide labels on mouse over"
+"Except the hovered app": "Except the hovered app"

src/lib/createElement.js

@@ -0,0 +1,11 @@
+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
+}

templates/css/stylesheet.php

@@ -1,116 +1,128 @@
 :root {
-    <?php foreach ($_['vars'] as $key => $value): ?>
+  <?php foreach ($_['vars'] as $key => $value): ?>
-        <?php if ($key === 'opener'): ?>
+    <?php if ($key === 'opener'): ?>
-            --side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
+      --side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
-        <?php else: ?>
+    <?php else: ?>
-            --side-menu-<?php echo $key ?>: <?php echo $value ?>;
+      --side-menu-<?php echo $key ?>: <?php echo $value ?>;
-        <?php endif; ?>
+    <?php endif; ?>
-    <?php endforeach; ?>
+  <?php endforeach; ?>
 }
 
 <?php if (empty($_['top-menu-apps']) && empty($_['top-side-menu-apps'])): ?>
-    #appmenu {
+  #appmenu {
-        display: none;
+    display: none;
-    }
+  }
 
-    #appmenu + nav {
+  #appmenu + nav {
-        display: none;
+    display: none;
-    }
+  }
 <?php else: ?>
-    .app-hidden {
+  .app-hidden {
-        opacity: 0;
+    opacity: 0;
-    }
+  }
 <?php endif; ?>
 
 <?php if ($_['opener-only']): ?>
-    #nextcloud {
+  #nextcloud {
-        display: none;
+    display: none;
-    }
+  }
 <?php endif; ?>
 
 <?php if (!$_['display-logo']): ?>
-    .side-menu-logo {
+  .side-menu-logo {
-        display: none;
+    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-header {
+    #side-menu .side-menu-opener {
-        height: 50px;
+      <?php if ($_['size-icon'] === 'big'): ?>
+        margin-left: 1px;
+      <?php else: ?>
+        margin-left: 0px;
+      <?php endif; ?>
     }
-
+  <?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 {
+  .side-menu-app-icon {
-        display: none;
+    display: none;
-    }
+  }
 <?php elseif ($_['size-icon'] === 'small'): ?>
-    .side-menu-app-icon svg {
+  .side-menu-app-icon svg {
-        width: 15px;
+    width: 15px;
-        height: 15px;
+    height: 15px;
-    }
+  }
 
-    img.side-menu-app-icon {
+  img.side-menu-app-icon {
-        width: 15px;
+    width: 15px;
-        height: 15px;
+    height: 15px;
-    }
+  }
 <?php elseif ($_['size-icon'] === 'normal'): ?>
-    .side-menu-app-icon svg {
+  .side-menu-app-icon svg {
-        width: 20px;
+    width: 20px;
-        height: 20px;
+    height: 20px;
-    }
+  }
 
-    img.side-menu-app-icon {
+  img.side-menu-app-icon {
-        width: 20px;
+    width: 20px;
-        height: 20px;
+    height: 20px;
-    }
+  }
 <?php elseif ($_['size-icon'] === 'big'): ?>
-    .side-menu-app-icon svg {
+  .side-menu-app-icon svg {
-        width: 23px;
+    width: 23px;
-        height: 23px;
+    height: 23px;
-    }
+  }
 
-    img.side-menu-app-icon {
+  img.side-menu-app-icon {
-        width: 23px;
+    width: 23px;
-        height: 23px;
+    height: 23px;
-    }
+  }
 <?php endif; ?>
 
 <?php if ($_['size-text'] === 'hidden'): ?>
-    .side-menu-app-text {
+  .side-menu-app-text {
-        display: none;
+    display: none;
-    }
+  }
 <?php elseif ($_['size-text'] === 'small'): ?>
-    .side-menu-app-text {
+  .side-menu-app-text {
-        font-size: 12px;
+    font-size: 12px;
-    }
+  }
 <?php elseif ($_['size-text'] === 'big'): ?>
-    .side-menu-app-text {
+  .side-menu-app-text {
-        font-size: 16px;
+    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;
+  }
 <?php endif; ?>

templates/js/_alwaysDisplayed.js

@@ -1,86 +0,0 @@
-const alwaysDisplayed = function() {
-    const elements = querySelectorAll('*')
-    const fixedElements = []
-
-    for (var 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 (var 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)
-}

templates/js/_loaderEnabled.js

@@ -1,14 +0,0 @@
-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)
-})

templates/js/_topMenuApps.js

@@ -1,216 +0,0 @@
-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
-    }
-
-    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 < 3000; i+= 100) {
-    setTimeout(updateTopMenu, i)
-}
-
-let resizeTimeout = null;
-
-window.addEventListener('resize', () => {
-    if (resizeTimeout !== null) {
-        clearTimeout(resizeTimeout)
-    }
-
-    resizeTimeout = setTimeout(updateTopMenu, 100)
-})

templates/js/script.php

@@ -13,202 +13,176 @@ if ($_['always-displayed']) {
 ?>
 
 (function() {
-    const querySelector = function(selector, element) {
+  const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
-        if (element) {
+  const sideMenuOpener = SMcreateElement('button', {'class': 'side-menu-opener'})
-            return element.querySelector(selector)
+  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
+
+  window.targetBlankApps = <?php echo json_encode($_['target-blank-apps']), "\n" ?>
+  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"; ?>
+  window.topMenuAppsMouseOverHiddenLabel = <?php echo json_encode($_['top-menu-mouse-over-hidden-label']), "\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')
         }
-
+      <?php endif; ?>
-        return document.querySelector(selector)
-    }
-
-    const querySelectorAll = function(selector, element) {
-        if (element) {
-            return element.querySelectorAll(selector)
-        }
-
-        return document.querySelectorAll(selector)
-    }
-
-    const createElement = function(tagName, attributes) {
-        const element = document.createElement(tagName)
-
-        if (typeof attributes === 'object') {
-            for (let i in attributes) {
-                element.setAttribute(i, attributes[i])
-            }
-        }
-
-        return element
-    }
-
-    const sideMenuContainer = createElement('div', {id: 'side-menu-container'})
-    const sideMenuOpener = createElement('button', {'class': 'side-menu-opener'})
-    const sideMenu = createElement('div', {id: 'side-menu'})
-
-    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; ?>
-
-    querySelector('body').addEventListener('side-menu.apps', (e) => {
-        const apps = e.detail.apps;
-
-        <?php if ($_['hide-when-no-apps']): ?>
-            const sideMenu = 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')
-                }
-            <?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 = querySelector('#side-menu')
-        const headerMenuOpener = querySelector('#header .side-menu-opener')
-        const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')
-
-        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()
-            }
-        })
-
-        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; ?>
-
-    <?php if ($_['opener-position'] === 'before'): ?>
-        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
     <?php else: ?>
-        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
+      <?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')
+
+    if (!headerMenuOpener) {
+      return
+    }
+
+    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()
+      }
+    }
+
+    <?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; ?>
 
-    <?php if (!empty($_['top-menu-apps']) || !empty($_['top-side-menu-apps'])): ?>
+    headerMenuOpener.addEventListener('click', () => {
-        const topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
+      sideMenu.classList.add('open')
-        const topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>
 
-        <?php require_once __DIR__.'/_topMenuApps.js'; ?>
+      const a = sideMenu.querySelector('.side-menu-app.active a')
-    <?php endif; ?>
 
-    <?php if ($display === 'always-displayed'): ?>
+      if (a !== null) {
-        <?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
+        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): ?>
+    PageLoader()
+  <?php endif; ?>
+
+  if (nextcloud) {
+    <?php if ($_['opener-position'] === 'before'): ?>
+      nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
+    <?php else: ?>
+      nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
     <?php endif; ?>
+  }
 })();

templates/settings/admin-form.php

@@ -39,8 +39,110 @@ $choicesSizes = [
     'Big' => 'big',
 ];
 
+$labelShowHideApps = 'Show and hide the list of applications';
+$labelReset = 'Reset to default';
+$labelDefault = 'Default';
+$labelWithCategories = 'With categories';
+$labelBigMenu = 'Big menu';
+$labelAlwaysDisplayed = 'Always displayed';
+
 ?>
 <div id="side-menu-section">
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Panel')); ?>
+        </h2>
+
+        <?php
+            $displays = [
+                'default' => !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
+                'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
+                'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'],
+                'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'],
+            ];
+        ?>
+
+        <div>
+            <label>
+                <?php p($l->t($labelDefault)); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t($labelDefault)); ?>">
+        </p>
+
+        <div>
+            <label>
+                <?php p($l->t($labelWithCategories)); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="1"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t($labelWithCategories)); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t($labelBigMenu)); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="1"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t($labelBigMenu)); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t($labelAlwaysDisplayed)); ?>
+            </label>
+        </div>
+        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="1"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t($labelAlwaysDisplayed)); ?>">
+        </p>
+
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="always-displayed"
+            id="side-menu-always-displayed"
+            value="<?php echo (int) $_['always-displayed'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="big-menu"
+            id="side-menu-big-menu"
+            value="<?php echo (int) $_['big-menu'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="side-with-categories"
+            id="side-menu-side-with-categories"
+            value="<?php echo (int) $_['side-with-categories'] ?>"
+        >
+    </div>
+
     <div class="section">
         <h2>
             <?php p($l->t('Colors')); ?>
@@ -48,6 +150,13 @@ $choicesSizes = [
             <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label side-menu-setting-label-short">
@@ -67,6 +176,10 @@ $choicesSizes = [
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['background-color-to']); ?>">
 
+                        <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                            'side-menu-background-color' => $_['defaults']['background-color'],
+                            'side-menu-background-color-to' => $_['defaults']['background-color-to'],
+                        ])) ?>"></div>
                     <div>
                         <em>
                             <?php p($l->t('Transparent')); ?>
@@ -102,6 +215,10 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['current-app-background-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-current-app-background-color' => $_['defaults']['current-app-background-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -118,6 +235,10 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['text-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-text-color' => $_['defaults']['text-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -134,6 +255,10 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['loader-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-loader-color' => $_['defaults']['loader-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -188,7 +313,7 @@ $choicesSizes = [
         <div class="side-menu-setting-table">
             <?php
                 $choices = [
-                    'Default' => 'side-menu-opener',
+                    $labelDefault => 'side-menu-opener',
                     'Default (dark)' => 'side-menu-opener-dark',
                     'Hamburger' => 'side-menu-opener-hamburger',
                     'Hamburger (dark)' => 'side-menu-opener-hamburger-dark',
@@ -216,6 +341,13 @@ $choicesSizes = [
             <?php p($l->t('Dark mode colors')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
         <p>
             <?php echo $l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.'); ?>
         </p>
@@ -227,16 +359,23 @@ $choicesSizes = [
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
+                        id="side-menu-dark-mode-background-color"
                         name="dark-mode-background-color"
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
                     <input
+                        id="side-menu-dark-mode-background-color-to"
                         name="dark-mode-background-color-to"
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
 
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-background-color' => $_['defaults']['dark-mode-background-color'],
+                        'side-menu-dark-mode-background-color-to' => $_['defaults']['dark-mode-background-color-to'],
+                    ])) ?>"></div>
+
                     <div>
                         <em>
                             <?php p($l->t('Transparent')); ?>
@@ -266,10 +405,15 @@ $choicesSizes = [
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
+                        id="side-menu-dark-mode-current-app-background-color"
                         name="dark-mode-current-app-background-color"
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-current-app-background-color' => $_['defaults']['dark-mode-current-app-background-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -281,10 +425,15 @@ $choicesSizes = [
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
+                        id="side-menu-dark-mode-text-color"
                         name="dark-mode-text-color"
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-text-color' => $_['defaults']['dark-mode-text-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -296,10 +445,15 @@ $choicesSizes = [
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
+                        id="side-menu-dark-mode-loader-color"
                         name="dark-mode-loader-color"
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-loader-color' => $_['defaults']['dark-mode-loader-color'],
+                    ])) ?>"></div>
                 </div>
             </div>
         </div>
@@ -352,7 +506,7 @@ $choicesSizes = [
         <div class="side-menu-setting-table">
             <?php
                 $choices = [
-                    'Default' => 'side-menu-opener',
+                    $labelDefault => 'side-menu-opener',
                     'Default (dark)' => 'side-menu-opener-dark',
                     'Hamburger' => 'side-menu-opener-hamburger',
                     'Hamburger (dark)' => 'side-menu-opener-hamburger-dark',
@@ -382,6 +536,13 @@ $choicesSizes = [
             <?php p($l->t('Opener')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <?php
@@ -433,107 +594,7 @@ $choicesSizes = [
                     </select>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <div class="section">
-        <h2>
-            <?php p($l->t('Panel')); ?>
-        </h2>
-
-        <?php
-            $displays = [
-                'default' => !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
-                'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
-                'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'],
-                'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'],
-            ];
-        ?>
-
-        <div>
-            <label>
-                <?php p($l->t('Default')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
-        </p>
-
-        <div>
-            <label>
-                <?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' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="1"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?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' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="1"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Always displayed')); ?>
-            </label>
-        </div>
-        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="1"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
-        </p>
-
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="always-displayed"
-            id="side-menu-always-displayed"
-            value="<?php echo (int) $_['always-displayed'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="big-menu"
-            id="side-menu-big-menu"
-            value="<?php echo (int) $_['big-menu'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="side-with-categories"
-            id="side-menu-side-with-categories"
-            value="<?php echo (int) $_['side-with-categories'] ?>"
-        >
-        <br>
-
-
-        <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Open the menu when the mouse is hover the opener (automatically disabled on touch screens)')); ?>
@@ -551,16 +612,18 @@ $choicesSizes = [
                     </select>
                 </div>
             </div>
+        </div>
+    </div>
 
+    <div class="section">
+        <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Display the logo')); ?>
-                    <br>
+
-                    <em>
+                    <div class="badges">
-                        <?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?>
+                        <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
-                        <br>
+                    </div>
-                        <?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?>
-                    </em>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-display-logo" name="display-logo" class="side-menu-setting">
@@ -576,6 +639,10 @@ $choicesSizes = [
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Use the avatar instead of the logo')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-use-avatar" name="use-avatar" class="side-menu-setting">
@@ -591,6 +658,10 @@ $choicesSizes = [
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('The logo is a link to the default app')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-add-logo-link" name="add-logo-link" class="side-menu-setting">
@@ -606,12 +677,17 @@ $choicesSizes = [
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Apps that should not be displayed in the menu')); ?>
-                    <br>
+
-                    <em><?php echo $l->t('This feature is only compatible with the <code>big menu</code> display.'); ?></em>
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+                        <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+                        <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+                        <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#big-menu-hidden-apps" href="#_">
-                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
                     </a>
 
                     <div class="side-menu-setting" data-name="big-menu-hidden-apps" id="big-menu-hidden-apps" data-checkbox style="display: none">
@@ -659,7 +735,7 @@ $choicesSizes = [
                     <select id="side-menu-size-icon" name="size-icon" class="side-menu-setting">
                         <?php foreach ($choicesSizes as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['size-icon']): ?>selected<?php endif; ?>>
-                                <?php echo $l->t($label);  ?> icon
+                                <?php echo $l->t($label.' icon');  ?>
                             </option>
                         <?php endforeach; ?>
                     </select>
@@ -667,7 +743,7 @@ $choicesSizes = [
                     <select id="side-menu-size-text" name="size-text" class="side-menu-setting">
                         <?php foreach ($choicesSizes as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['size-text']): ?>selected<?php endif; ?>>
-                                <?php echo $l->t($label);  ?> text
+                                <?php echo $l->t($label.' text'); ?>
                             </option>
                         <?php endforeach; ?>
                     </select>
@@ -680,7 +756,7 @@ $choicesSizes = [
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
-                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
                     </a>
 
                     <div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-checkbox style="display: none">
@@ -727,14 +803,21 @@ $choicesSizes = [
             <?php p($l->t('Top menu')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
-                    <?php p($l->t('Apps only visible in the top menu')); ?>
+                    <?php p($l->t('Applications kept in the top menu')); ?>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
-                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
                     </a>
 
                     <div class="side-menu-setting" data-name="top-menu-apps" id="top-menu-apps" data-checkbox style="display: none">
@@ -758,16 +841,16 @@ $choicesSizes = [
                     </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')); ?>
+                    <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
+                    <br>
+                    <em><?php p($l->t('These applications must be selected in the previous option.')); ?></em>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
-                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
                     </a>
 
                     <div class="side-menu-setting" data-name="top-side-menu-apps" id="top-side-menu-apps" data-checkbox style="display: none">
@@ -791,6 +874,72 @@ $choicesSizes = [
                     </div>
                 </div>
             </div>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Hide labels on mouse over')); ?>
+                </div>
+                <?php
+                    $choices = array_merge(
+                        $choicesYesNo,
+                        ['Except the hovered app' => '2']
+                    );
+                ?>
+                <div class="side-menu-setting-form">
+                    <select id="side-menu-top-menu-mouse-over-hidden-label" name="top-menu-mouse-over-hidden-label" class="side-menu-setting">
+                        <?php foreach ($choices as $label => $value): ?>
+                            <option value="<?php echo $value ?>" <?php if ($value === $_['top-menu-mouse-over-hidden-label']): ?>selected<?php endif; ?>>
+                                <?php echo $l->t($label);  ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Applications')); ?>
+        </h2>
+
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
+        <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>
 
@@ -800,6 +949,11 @@ $choicesSizes = [
             <?php p($l->t('Categories')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <?php
@@ -823,7 +977,7 @@ $choicesSizes = [
             </div>
 
             <div class="side-menu-setting-row">
-                <div class="side-menu-setting-label">
+                <div class="side-menu-setting-label side-menu-setting-label--top">
                     <?php p($l->t('Custom categories')); ?>
                 </div>
                 <div class="side-menu-setting-form">
@@ -837,11 +991,10 @@ $choicesSizes = [
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Customize application categories')); ?>
-                    <small><span class="warning"><?php p($l->t('Experimental')); ?></span></small>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#apps-categories-custom-list" href="#_">
-                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                        🖱️ <?php p($l->t($labelShowHideApps)); ?>
                     </a>
 
                     <div id="apps-categories-custom-list" style="display: none">
@@ -911,6 +1064,13 @@ $choicesSizes = [
             <?php p($l->t('Tips')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t($labelDefault)); ?></span>
+            <span class="badge badge-2"><?php p($l->t($labelWithCategories)); ?></span>
+            <span class="badge badge-3"><?php p($l->t($labelBigMenu)); ?></span>
+            <span class="badge badge-4"><?php p($l->t($labelAlwaysDisplayed)); ?></span>
+        </div>
+
         <p>
             <em><?php echo $l->t('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.'); ?></em>
         </p>
@@ -957,11 +1117,10 @@ $choicesSizes = [
     <div class="section" id="more">
         <button id="side-menu-save" class="btn btn-info">
             <?php p($l->t('Save')); ?>
+            <progress max="100" value="0" id="side-menu-save-progress"></progress>
         </button>
 
-        <span id="side-menu-message" class="msg"></span>
+        <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.exportConfiguration') ?>" target="_blank" rel="noopener">
-
-        <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.exportConfiguration') ?>" target="_blank">
             <button class="btn btn-primary" >
                 <?php p($l->t('Export the configuration')); ?>
             </button>
@@ -979,7 +1138,7 @@ $choicesSizes = [
             <span for="side-menu-opener">
                 <?php p($l->t('You like this app and you want to support me?')); ?>
 
-                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan">
+                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
                     <button>
                         <?php p($l->t('Buy me a coffee ☕')); ?>
                     </button>

templates/settings/personal-form.php

@@ -25,6 +25,9 @@ $choicesYesNo = [
     'Yes' => '1',
 ];
 
+
+$labelShowHideApps = 'Show and hide the list of applications';
+$labelReset = 'Reset to default';
 ?>
 <div id="side-menu-section">
     <?php if ($_['force']): ?>
@@ -39,10 +42,6 @@ $choicesYesNo = [
         </div>
     <?php else: ?>
         <div class="section">
-            <h2>
-                <?php p($l->t('Menu')); ?>
-            </h2>
-
             <p>
                 <em><?php echo $l->t('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.'); ?></em>
             </p>
@@ -85,7 +84,7 @@ $choicesYesNo = [
 
                         <p>
                             <a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
-                                🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
                             </a>
                         </p>
 
@@ -121,7 +120,7 @@ $choicesYesNo = [
             <div class="side-menu-setting-table">
                 <div class="side-menu-setting-row">
                     <div class="side-menu-setting-label">
-                        <?php p($l->t('Apps only visible in the top menu')); ?>
+                        <?php p($l->t('Applications kept in the top menu')); ?>
                         <p>
                             <em>
                                 <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
@@ -131,7 +130,7 @@ $choicesYesNo = [
                     <div class="side-menu-setting-form">
                         <p>
                             <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
-                                🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
                             </a>
                         </p>
 
@@ -161,9 +160,10 @@ $choicesYesNo = [
             <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')); ?>
+                        <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
                         <p>
                             <em>
+                                <?php p($l->t('These applications must be selected in the previous option.')); ?><br>
                                 <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
                             </em>
                         </p>
@@ -171,7 +171,7 @@ $choicesYesNo = [
                     <div class="side-menu-setting-form">
                         <p>
                             <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
-                                🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
                             </a>
                         </p>
 
@@ -198,11 +198,52 @@ $choicesYesNo = [
                 </div>
             </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" data-personal>
+                    </div>
+                </div>
+            </div>
+        </div>
     <?php endif ?>
 
     <div class="section">
         <?php if (!$_['force']): ?>
-            <button id="side-menu-save" class="btn btn-primary"><?php p($l->t('Save')); ?></button>
+            <button id="side-menu-save" class="btn btn-info">
+                <?php p($l->t('Save')); ?>
+                <progress max="100" value="0" id="side-menu-save-progress"></progress>
+            </button>
 
             <span id="side-menu-message" class="msg"></span>
 
@@ -213,7 +254,7 @@ $choicesYesNo = [
             <span for="side-menu-opener">
                 <?php p($l->t('You like this app and you want to support me?')); ?>
 
-                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan">
+                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
                     <button>
                         <?php p($l->t('Buy me a coffee ☕')); ?>
                     </button>

webpack.js

@@ -3,6 +3,7 @@ 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'),