Merge pull request 'ci: rollback tag check' (#346) from develop into master

Reviewed-on: #346

.gitea/issue_template/QUESTION_TEMPLATE.yml

@@ -0,0 +1,30 @@
+name: New question
+about: Use this template when you don't know how to do something
+title: "[Question] "
+labels:
+  - question
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill information.
+
+  - 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: question
+    attributes:
+      label: Question
+    validations:
+      required: true

.gitea/issue_template/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Documentation
+    url: https://deblan.gitnet.page/side_menu_doc/
+    about: Official documentation web site
+  - name: Ask a question in our Matrix room
+    about: If you prefer a chat-like conversation or in need for quick help, this might be an alternative to opening an issue.
+    url: https://matrix.to/#/#custommenu:neutralnetwork.org

.woodpecker.yml

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

.woodpecker/.build.yml

@@ -0,0 +1,28 @@
+variables:
+  volumes: &volumes
+    - /data/${CI_REPO}:/builds
+
+when:
+  event: [tag, push, pull_request, manual]
+  branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
+
+steps:
+  "Install dependencies":
+    image: node:16
+    pull: true
+    commands:
+      - npm i
+
+  "Build JS":
+    image: node:16
+    commands:
+      - npm run build
+
+  "Build translations":
+    image: deblan/php:8.3
+    commands:
+      - php bin/generate_l10n.php
+
+  "Build cache":
+    image: gitnet.fr/deblan/woodpecker-cache
+    volumes: *volumes

.woodpecker/.publish.yml

@@ -0,0 +1,61 @@
+variables:
+  volumes: &volumes
+    - /data/${CI_REPO}:/builds
+    - /var/www/html/artifacts:/var/www/html/artifacts
+
+depends_on:
+  - build
+
+when:
+  event: [tag]
+
+steps:
+  "Verify tag and app version":
+    image: alpine
+    commands:
+      - TAG=${CI_COMMIT_TAG/v//}
+      - grep "<version>$TAG</version>" appinfo/info.xml
+
+  "Create signature":
+    image: nextcloud:25
+    secrets: [app_certificate, app_public_certificate]
+    volumes: *volumes
+    environment:
+      SQLITE_DATABASE: /var/www/data/data.db
+      NEXTCLOUD_ADMIN_USER: admin
+      NEXTCLOUD_ADMIN_PASSWORD: admin
+    commands:
+      - cd "/builds/$CI_COMMIT_SHA"
+      - 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/
+
+  "Create package":
+    image: deblan/php:8.3
+    volumes: *volumes
+    secrets: [app_certificate]
+    commands:
+      - cd "/builds/$CI_COMMIT_SHA"
+      - 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
+
+  "Push release":
+    image: plugins/gitea-release
+    volumes: *volumes
+    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//}/*

.woodpecker/.security.yml

@@ -0,0 +1,17 @@
+variables:
+  volumes: &volumes
+    - /data/${CI_REPO}:/builds
+
+depends_on:
+  - build
+
+skip_clone: true
+
+steps:
+  "Check dependencies":
+    image: gitnet.fr/deblan/osv-detector:v0.10
+    volumes: *volumes
+    commands:
+      - cd "/builds/$CI_COMMIT_SHA"
+      - osv-detector package-lock.json
+    failure: ignore

CHANGELOG.md

@@ -1,5 +1,57 @@
 ## [Unreleased]
 
+## 3.12.0
+### Added
+* add compatibility with NC29
+
+## 3.11.8
+### Fixed
+* move the logo inside #nextcloud element (fix #278 #239) [NC26]
+
+## 3.11.7
+### Added
+* update translations
+* update ci steps names
+### Fixed
+* add accessibility to open and close buttons (#311)
+* fully apply Nextcloud AppMenu.vue updated (#326)
+* add missing label on the 'save' button in personal settings (fix #318)
+### Changed
+* upgrade axios
+* upgrade css-loader
+
+## 3.11.6
+### Fixed
+* add --background-invert-if-bright in top menu (fix #326)
+
+## 3.11.5
+### Fixed
+* add missing label on buttons for accessiblity (fix #311)
+
+## 3.11.4
+### Fixed
+* add label on buttons for accessiblity (fix #311)
+
+## 3.11.3
+### Fixed
+* fix menu icon in decks, collectives and other apps (#302)
+
+## 3.11.2
+### Fixed
+* add default translations for Slovak - fix #298
+
+## 3.11.1
+### Added
+* add Portuguese (Brazil) translations - Thanks to igorfreire
+### Fixed
+* add width to .side-menu-categories for side menu with categories display - fix #294
+
+## 3.11.0
+### Added
+* add a search component in menus - fix #282
+### Fixed
+* remove the label of the link to personal settings - fix #283
+
 ## 3.10.3
 ### Fixed
 * change the way to load nextcloud components (NcActionLink/NcActions) - fix #274

appinfo/info.xml

@@ -32,7 +32,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.10.3</version>
+    <version>3.11.8</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -54,7 +54,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_big_menu.png</screenshot>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png</screenshot>
     <dependencies>
-        <nextcloud min-version="25" max-version="28"/>
+        <nextcloud min-version="25" max-version="29"/>
         <php min-version="7.4"/>
     </dependencies>
     <settings>

css/sideMenu.css

@@ -47,7 +47,7 @@
   margin-top: 2px;
   float: right;
   line-height: 34px;
-  height: 28px;
+  height: 42px;
   display: none;
 }
 
@@ -83,6 +83,12 @@
   padding-left: 12px !important;
   margin-left: 5px !important;
   margin-left: 3px !important;
+  overflow: hidden;
+}
+
+.side-menu-opener span {
+  position: relative;
+  left: 50px;
 }
 
 .side-menu-opener:active, .side-menu-opener:focus {
@@ -155,7 +161,7 @@
 }
 
 #side-menu.hide-opener .side-menu-logo {
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 #side-menu-loader {
@@ -201,7 +207,6 @@
   max-height: calc(100vh - 55px);
   overflow: auto;
   position: relative;
-  top: 5px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -223,7 +228,7 @@
 }
 
 .side-menu-loader svg {
-  width: 38px;
+  width: 45px;
   margin: auto;
   stroke: var(--side-menu-text-color, #fff);
 }
@@ -289,7 +294,7 @@
 }
 
 .side-menu-always-displayed .app-navigation--close {
-  transform: translateX(calc(-100% + 50px)) !important;
+  transform: translateX(calc(-100% + 50px));
 }
 
 #side-menu.side-menu-with-categories {
@@ -300,6 +305,7 @@
 .side-menu-with-categories .side-menu-categories {
   display: block;
   padding: 0;
+  width: 100%;
 }
 
 .side-menu-with-categories .side-menu-category {
@@ -318,12 +324,35 @@
   visibility: visible;
 }
 
+.side-menu-search {
+  float: right;
+}
+
+.side-menu-search input {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  color: var(--side-menu-text-color);
+}
+
+.side-menu-search input::placeholder {
+  color: var(--side-menu-text-color);
+}
+
+.side-menu-always-displayed .side-menu-search {
+  display: none;
+}
+
 @media screen and (max-width: 1024px) {
   #side-menu.side-menu-big {
     max-width: 290px;
     height: 100vh;
   }
 
+  #side-menu.hide-opener.side-menu-big .side-menu-search {
+    float: none;
+  }
+
   .side-menu-categories {
     display: block;
     padding: 0;

package.json

@@ -11,7 +11,7 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
-		"axios": "^0.24.0",
+		"axios": "^1.6.7",
 		"trim": "^1.0.1",
 		"vue": "^2.6.11"
 	},
@@ -33,7 +33,7 @@
 		"@nextcloud/vue": "^7.12.1",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
-		"css-loader": "^3.4.2",
+		"css-loader": "^6.10.0",
 		"eslint": "^8.0.0",
 		"eslint-config-standard": "^17.0.0",
 		"eslint-import-resolver-webpack": "^0.12.1",

renovate.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}

src/AppMenu.vue

@@ -21,7 +21,10 @@
   -->
 
 <template>
-  <nav class="app-menu show">
+  <nav
+    class="app-menu show"
+    :aria-label="t('core', 'Applications menu')"
+  >
     <ul
       class="app-menu-main"
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
@@ -165,6 +168,7 @@ $header-icon-size: 20px;
   flex-shrink: 1;
   flex-wrap: wrap;
 }
+
 .app-menu-main {
   display: flex;
   flex-wrap: nowrap;
@@ -174,7 +178,6 @@ $header-icon-size: 20px;
     height: 50px;
     position: relative;
     display: flex;
-    opacity: .7;
 
     &.app-menu-entry__active {
       opacity: 1;
@@ -214,7 +217,8 @@ $header-icon-size: 20px;
       width: $header-icon-size;
       height: $header-icon-size;
       padding: calc((100% - $header-icon-size) / 2);
-      filter: var(--primary-invert-if-bright);
+      box-sizing: content-box;
+      filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
     }
 
     .app-menu-entry--label {
@@ -223,8 +227,8 @@ $header-icon-size: 20px;
       font-size: 12px;
       color: var(--color-primary-text);
       text-align: center;
-      bottom: -5px;
       left: 50%;
+      top: 45%;
       display: block;
       min-width: 100%;
       transform: translateX(-50%);
@@ -232,6 +236,7 @@ $header-icon-size: 20px;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
+      letter-spacing: -0.5px;
     }
 
     &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
@@ -239,11 +244,11 @@ $header-icon-size: 20px;
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
-        font-weight: bold;
-        font-size: 14px;
+        font-weight: bolder;
         bottom: 0;
-        width: auto;
-        overflow: visible;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
   }
@@ -260,8 +265,10 @@ $header-icon-size: 20px;
   &: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 {
+    opacity: 1;
+
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -277,7 +284,7 @@ $header-icon-size: 20px;
   &.app-menu-main__show-hovered .app-menu-entry:hover,
   &.app-menu-main__show-hovered .app-menu-entry:focus {
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -292,38 +299,42 @@ $header-icon-size: 20px;
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-  color: var(--color-primary-text);
   opacity: .7;
   margin: 3px;
+  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-  &:hover {
-    opacity: 1;
-    background-color: transparent !important;
+  &:not([aria-expanded="true"]) {
+    color: var(--color-primary-element-text);
+
+    &: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);
-  }
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
 }
 
 .app-menu-popover-entry {
   .app-icon {
     position: relative;
     height: 44px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
 
     &.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);
     }
   }
 }
@@ -332,7 +343,7 @@ $header-icon-size: 20px;
   content: "";
   width: 8px;
   height: 8px;
-  background-color: var(--color-primary-text);
+  background-color: var(--color-primary-element-text);
   border-radius: 50%;
   position: absolute;
   display: block;

src/AppSearch.vue

@@ -0,0 +1,32 @@
+<!--
+@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>
+  <div class="side-menu-search">
+    <input type="text" :value="value" :placeholder="t('side_menu', 'Search')" @input="$emit('input', $event.target.value)">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppSearch',
+  props: {
+    value: {
+      required: true
+    },
+  },
+}
+</script>

src/CloserButton.vue

@@ -15,11 +15,18 @@ 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" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
 export default {
   name: 'CloserButton',
+  data() {
+    return {
+      label: t('side_menu', 'Close the menu'),
+    }
+  }
 }
 </script>

src/OpenerButton.vue

@@ -15,11 +15,18 @@ 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" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
 export default {
   name: 'OpenerButton',
+  data() {
+    return {
+      label: t('side_menu', 'Toggle the menu'),
+    }
+  }
 }
 </script>

src/SettingsButton.vue

@@ -17,7 +17,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="side-menu-settings">
     <a v-bind:href="href">
+      <!--
       {{ label }}
+      -->
 
       <span class="avatardiv avatardiv-shown">
         <img v-bind:src="avatar" :alt="label">

src/SideMenu.vue

@@ -22,15 +22,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:href="settings.href"
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar" />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
-
       <Logo
         v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
         v-bind:image="logo"
         v-bind:link="logoLink"
       />
-
       <Logo
         v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
         v-bind:image="avatar"
@@ -41,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <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-if="!hiddenApps.includes(app.id) && searchMatch(app.name)"
         v-bind:classes="{'side-menu-app': true, 'active': app.active}"
         v-bind:key="key"
         v-bind:icon="app.icon"
@@ -58,6 +56,7 @@ import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import SideMenuApp from './SideMenuApp'
+import AppSearch from './AppSearch'
 import Logo from './Logo'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -68,6 +67,7 @@ export default {
     OpenerButton,
     SideMenuApp,
     Logo,
+    AppSearch,
   },
   data() {
     return {
@@ -81,6 +81,7 @@ export default {
       settings: null,
       openerHover: false,
       alwaysDisplayed: false,
+      search: '',
     }
   },
   methods: {
@@ -125,6 +126,28 @@ export default {
 
     retrieveConfig() {
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     axios

src/SideMenuBig.vue

@@ -18,14 +18,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div id="side-menu" class="side-menu-big">
     <div class="side-menu-header">
       <CloserButton />
-
       <SettingsButton
         v-if="settings"
         v-bind:href="settings.href"
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar"
       />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
     </div>
 
@@ -33,12 +32,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <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">
+        <div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" 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-if="searchMatch(app.name)"
               v-bind:key="appId"
               v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
               v-bind:icon="app.icon"
@@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
 import CloserButton from './CloserButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
+import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -70,6 +71,7 @@ export default {
     CloserButton,
     Loader,
     SideMenuBigApp,
+    AppSearch,
   },
   data() {
     return {
@@ -78,6 +80,7 @@ export default {
       targetBlank: false,
       targetBlankApps: [],
       settings: null,
+      search: '',
     }
   },
   methods: {
@@ -120,6 +123,28 @@ export default {
           this.settings = config['settings']
         })
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     this.retrieveConfig()

src/SideMenuWithCategories.vue

@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar"
       />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
     </div>
 
@@ -31,12 +31,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <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">
+        <div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" 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-if="searchMatch(app.name)"
               v-bind:key="appId"
               v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
               v-bind:icon="app.icon"
@@ -56,6 +57,7 @@ import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
+import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -66,6 +68,7 @@ export default {
     OpenerButton,
     Loader,
     SideMenuBigApp,
+    AppSearch,
   },
   data() {
     return {
@@ -74,6 +77,7 @@ export default {
       targetBlank: false,
       targetBlankApps: [],
       settings: null,
+      search: '',
     }
   },
   methods: {
@@ -116,6 +120,28 @@ export default {
           this.settings = config['settings']
         })
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     this.retrieveConfig()

src/l10n/fixtures/cs.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/de.yaml

@@ -6,11 +6,11 @@
 ? '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"
+"Apps that not must be moved in the side menu": "Apps, die nicht ins Seitenmenü verschoben werden sollen"
 "If there is no selection then the global configuration is applied.": "Wenn keine Auswahl vorhanden ist, wird die globale Konfiguration angewendet."
 "Experimental": "Experimentell"
 "Save": "Speichern"
-"You like this app and you want to support me?": "Du magst diese Anwendung und möchtest mich unterstützen?"
+"You like this app and you want to support me?": "Du magst diese App und möchtest mich unterstützen?"
 "Buy me a coffee ☕": "Gib mir einen Kaffee aus ☕"
 "Hidden": "Ausblenden"
 "Small": "Klein"
@@ -18,9 +18,9 @@
 "Big": "Groß"
 "Colors": "Farben"
 "Background color": "Hintergrundfarbe"
-"Background color of current app": "Hintergrundfarbe der aktuellen Anwendung"
+"Background color of current app": "Hintergrundfarbe der aktuellen App"
 "Text color": "Textfarbe"
-"Loader": "Ladestandanzeige"
+"Loader": "Fortschrittsbalken"
 "Icon": "Symbol"
 "Same color": "Selbe Farbe"
 "Opposite color": "Gegenfarbe"
@@ -37,32 +37,32 @@
 "After the logo": "Nach dem Logo"
 "Position": "Position"
 "Show only the opener (hidden logo)": "Nur das Menü-Symbol anzeigen (Logo wird ausgeblendet)"
-"Do not display the side menu and the opener if there is no application (eg: public pages).": "Zeige das Seitenmenü und das Menü-Symbol nicht an, wenn keine Anwendung vorhanden ist (z.B. bei öffentlichen Seiten)."
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Zeige das Seitenmenü und das Menü-Symbol nicht an, wenn keine App 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)"
 "Display the big menu": "Großes Menü anzeigen"
 "Display the logo": "Logo anzeigen"
 "Icons and texts": "Symbole und Texte"
-"Loader enabled": "Ladestandanzeige aktiviert"
+"Loader enabled": "Fortschrittsbalken anzeigen"
 "Tips": "Tipps"
 "Always displayed": "Immer anzeigen"
 "This is the automatic behavior when the menu is always displayed.": "Dies ist das automatische Verhalten, wenn das Menü immer angezeigt wird."
 "Not compatible with touch screens.": "Nicht kompatibel mit Touchscreens."
 "Big menu": "Großes Menü"
 "Live preview": "Live-Vorschau"
-"Open apps in new tab": "Öffne Anwendungen in einem neuen Tab"
+"Open apps in new tab": "Öffne Apps in einem neuen Tab"
 "Use the global setting": "Verwende die globale Einstellung"
 "Use my selection": "Verwende meine Auswahl"
-"Show and hide the list of applications": "Ein- und Ausblenden der Anwendungsliste"
+"Show and hide the list of applications": "Ein- und Ausblenden der Appliste"
 "Use the avatar instead of the logo": "Avatar anstelle des Logos anzeigen"
-"You do not have permission to change the settings.": "Du hast keine Berechtigung, die Einstellungen dieser Anwendung zu ändern."
+"You do not have permission to change the settings.": "Du hast keine Berechtigung, die Einstellungen dieser App zu ändern."
 "Force this configuration to users": "Konfiguration für alle Benutzer erzwingen"
 "Export the configuration": "Konfiguration exportieren"
 "Purge the cache": "Cache leeren"
 "Show the link to settings": "Link zu den Einstellungen anzeigen"
 "The menu is enabled by default for users": "Das Menü ist standardmäßig für alle Benutzer aktiviert"
 "Except when the configuration is forced.": "Gilt nicht, wenn die Konfiguration erzwungen wird."
-"Apps that should not be displayed in the menu": "Anwendungen, die nicht im Menü angezeigt werden sollen"
+"Apps that should not be displayed in the menu": "Apps, die nicht im Menü angezeigt werden sollen"
 "This feature is only compatible with the <code>big menu</code> display.": "Kompatibel mit dem <code>großen Menü</code>."
 "The logo is a link to the default app": "Das Logo ist ein Link zur Standard-App"
 "Others": "Andere"
@@ -76,19 +76,21 @@
 "Dark mode colors": "Farben für den dunklen Modus"
 "With categories": "Mit Kategorien"
 "Custom categories": "Benutzerdefinierte Kategorien"
-"Customize application categories": "Anwendungskategorien anpassen"
+"Customize application categories": "App-Kategorien anpassen"
 "Reset to default": "Auf Standard zurücksetzen"
 "Hidden icon": "Verstecktes Symbol"
 "Small icon": "Kleines Symbol"
 "Normal icon": "Normales Symbol"
-"Big icon": "Große Ikone"
+"Big icon": "Großes Icon"
 "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"
+"Applications": "Apps"
+"Applications kept in the top menu": "Apps in der oberen Navigationsleiste"
+"Applications kept in the top menu but also shown in side menu": "Apps in der oberen Navigationsleiste, die auch im Seitenmenü angezeigt werden sollen"
+"These applications must be selected in the previous option.": "Diese Apps müssen auch in der vorherigen Einstellung ausgewählt werden."
+"Hide labels on mouse over": "Labels ausblenden, wenn sich die Maus darüber befindet (Hover)"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/es.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/fr.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Rechercher"
+"Toggle the menu": "Basculer le menu"

src/l10n/fixtures/gl.yaml

@@ -0,0 +1,96 @@
+"Custom menu": "Custom menu"
+"Enable the custom menu": "Enable the custom menu"
+"No": "No"
+"Yes": "Yes"
+"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.'
+: '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": "Top menu"
+"Apps that not must be moved in the side menu": "Apps that not must be moved in the side menu"
+"If there is no selection then the global configuration is applied.": "If there is no selection then the global configuration is applied."
+"Experimental": "Experimental"
+"Save": "Save"
+"You like this app and you want to support me?": "You like this app and you want to support me?"
+"Buy me a coffee ☕": "Buy me a coffee ☕"
+"Hidden": "Hidden"
+"Small": "Small"
+"Normal": "Normal"
+"Big": "Big"
+"Hidden icon": "Hidden icon"
+"Small icon": "Small icon"
+"Normal icon": "Normal icon"
+"Big icon": "Big icon"
+"Hidden text": "Hidden text"
+"Small text": "Small text"
+"Normal text": "Normal text"
+"Big text": "Big text"
+"Colors": "Colors"
+"Background color": "Background color"
+"Background color of current app": "Background color of current app"
+"Text color": "Text color"
+"Loader": "Loader"
+"Icon": "Icon"
+"Same color": "Same color"
+"Opposite color": "Opposite color"
+"Transparent": "Transparent"
+"Opaque": "Opaque"
+"Opener": "Opener"
+"Default": "Default"
+"Default (dark)": "Default (dark)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (dark)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (dark)"
+"Before the logo": "Before the logo"
+"After the logo": "After the logo"
+"Position": "Position"
+"Show only the opener (hidden logo)": "Show only the opener (hidden logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Do not display the side menu and the opener if there is no application (eg: public pages)."
+"Panel": "Panel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
+"Display the big menu": "Display the big menu"
+"Display the logo": "Display the logo"
+"Icons and texts": "Icons and texts"
+"Loader enabled": "Loader enabled"
+"Tips": "Tips"
+"Always displayed": "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.": "Not compatible with touch screens."
+"Big menu": "Big menu"
+"Live preview": "Live preview"
+"Open apps in new tab": "Open apps in new tab"
+"Use the global setting": "Use the global setting"
+"Use my selection": "Use my selection"
+"Show and hide the list of applications": "Show and hide the list of applications"
+"Use the avatar instead of the logo": "Use the avatar instead of the logo"
+"You do not have permission to change the settings.": "You do not have permission to change the settings."
+"Force this configuration to users": "Force this configuration to users"
+"Export the configuration": "Export the configuration"
+"Purge the cache": "Purge the cache"
+"Show the link to settings": "Show the link to settings"
+"The menu is enabled by default for users": "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": "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": "The logo is a link to the default app"
+"Others": "Others"
+"Categories": "Categories"
+"Customize sorting": "Customize sorting"
+"Order by": "Order by"
+"Name": "Name"
+"Customed": "Customed"
+"Show and hide the list of categories": "Show and hide the list of categories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "This parameters are used when Dark theme or Breeze Dark Theme are enabled."
+"Dark mode colors": "Dark mode colors"
+"With categories": "With categories"
+"Custom categories": "Custom categories"
+"Customize application categories": "Customize application categories"
+"Reset to default": "Reset to default"
+"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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/nl.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/pt_BR.yaml

@@ -0,0 +1,94 @@
+"Custom menu": "Menu personalizado"
+"Enable the custom menu": "Habilitar o menu personalizado"
+"No": "Não"
+"Yes": "Sim"
+"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.'
+: 'Use o atalho <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> para exibir e para esconder o menu lateral. Use <span class="keyboard-key">tab</span> para navegar.'
+"Top menu": "Menu superior"
+"Apps that not must be moved in the side menu": "Apps que não devem ser movidos para o menu lateral"
+"If there is no selection then the global configuration is applied.": "Se não houver seleção, a configuração global será aplicada."
+"Experimental": "Experimental"
+"Save": "Salvar"
+"You like this app and you want to support me?": "Você gosta deste aplicativo e quer me apoiar?"
+"Buy me a coffee ☕": "Me pague um café ☕"
+"Hidden": "Oculto"
+"Small": "Pequeno"
+"Normal": "Normal"
+"Big": "Grande"
+"Hidden icon": "Ícone oculto"
+"Small icon": "Ícone pequeno"
+"Normal icon": "Ícone normal"
+"Big icon": "Ícone grance"
+"Hidden text": "Texto oculto"
+"Small text": "Texto pequeno"
+"Normal text": "Texto normal"
+"Big text": "Texto grande"
+"Colors": "Cores"
+"Background color": "Cor de fundo"
+"Background color of current app": "Cor de fundo do app atual"
+"Text color": "Cor do texto"
+"Loader": "Progresso"
+"Icon": "Ícone"
+"Same color": "Mesma cor"
+"Opposite color": "Cor oposta"
+"Transparent": "Transparente"
+"Opaque": "Opaco"
+"Opener": "Abrir"
+"Default": "Padrão"
+"Default (dark)": "Padrão (escuro)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (escuro)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (escuro)"
+"Before the logo": "Antes da logo"
+"After the logo": "Depois da logo"
+"Position": "Posição"
+"Show only the opener (hidden logo)": "Mostrar apenas o Abrir (ocultar logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Não mostrar o menu lateral e o Abrir se não houver aplicação (p.ex. páginas públicas)."
+"Panel": "Painel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Abrir o menu quando o mouse passar sobre o Abrir (desativado automaticamente em telas de toque)"
+"Display the big menu": "Mostrar o menu grande"
+"Display the logo": "Mostrar a logo"
+"Icons and texts": "Ícones e textos"
+"Loader enabled": "Progresso ativado"
+"Tips": "Dicas"
+"Always displayed": "Sempre visível"
+"This is the automatic behavior when the menu is always displayed.": "Este é o comportamento automático quando o menu está sempre visível."
+"Not compatible with touch screens.": "Não compatível com telas de toque."
+"Big menu": "Menu grande"
+"Live preview": "Visualização ao vivo"
+"Open apps in new tab": "Abrir apps em nova aba"
+"Use the global setting": "Usar configurações globais"
+"Use my selection": "Usar minha seleção"
+"Show and hide the list of applications": "Mostrar e ocultar a lista de aplicativos"
+"Use the avatar instead of the logo": "Use o avatar ao invés da logo"
+"You do not have permission to change the settings.": "Você não tem permissão para alterar as configurações."
+"Force this configuration to users": "Forçar esta configuração para os usuários"
+"Export the configuration": "Exportar a configuração"
+"Purge the cache": "Limpar o cache"
+"Show the link to settings": "Mostrar o link para configurações"
+"The menu is enabled by default for users": "O menu é habilitado por padrão para os usuários"
+"Except when the configuration is forced.": "Exceto quando a configuração é forçada."
+"Apps that should not be displayed in the menu": "Apps que não devem ser mostrados no menu"
+"This feature is only compatible with the <code>big menu</code> display.": "Este recurso só é compatível com a exibição do <code>menu grande</code>."
+"The logo is a link to the default app": "A logo é um link para o app padrão"
+"Others": "Outros"
+"Categories": "Categorias"
+"Customize sorting": "Personalizar classificação"
+"Order by": "Ordenar por"
+"Name": "Nome"
+"Customed": "Personalizado"
+"Show and hide the list of categories": "Mostrar e esconder a lista de categorias"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Estes parâmetros são usados quando o tema escuro ou o tema Dark Breeze está ativo."
+"Dark mode colors": "Cores do modo escuro"
+"With categories": "Com categorias"
+"Custom categories": "Categorias personalizadas"
+"Customize application categories": "Personalizar categorias de apps"
+"Reset to default": "Restaurar padrão"
+"Applications": "Aplicativos"
+"Applications kept in the top menu": "Aplicativos mantidos no menu superior"
+"Applications kept in the top menu but also shown in side menu": "Aplicativos mantidos no menu superior, mas também mostrados no menu lateral"
+"These applications must be selected in the previous option.": "Estes aplicativos devem ser selecionados na opção anterior."
+"Hide labels on mouse over": "Ocultar descrição ao passar o mouse"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/ru.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/sk.yaml

@@ -0,0 +1,94 @@
+"Custom menu": "Custom menu"
+"Enable the custom menu": "Enable the custom menu"
+"No": "No"
+"Yes": "Yes"
+"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.'
+: '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": "Top menu"
+"Apps that not must be moved in the side menu": "Apps that not must be moved in the side menu"
+"If there is no selection then the global configuration is applied.": "If there is no selection then the global configuration is applied."
+"Experimental": "Experimental"
+"Save": "Save"
+"You like this app and you want to support me?": "You like this app and you want to support me?"
+"Buy me a coffee ☕": "Buy me a coffee ☕"
+"Hidden": "Hidden"
+"Small": "Small"
+"Normal": "Normal"
+"Big": "Big"
+"Hidden icon": "Hidden icon"
+"Small icon": "Small icon"
+"Normal icon": "Normal icon"
+"Big icon": "Big icon"
+"Hidden text": "Hidden text"
+"Small text": "Small text"
+"Normal text": "Normal text"
+"Big text": "Big text"
+"Colors": "Colors"
+"Background color": "Background color"
+"Background color of current app": "Background color of current app"
+"Text color": "Text color"
+"Loader": "Loader"
+"Icon": "Icon"
+"Same color": "Same color"
+"Opposite color": "Opposite color"
+"Transparent": "Transparent"
+"Opaque": "Opaque"
+"Opener": "Opener"
+"Default": "Default"
+"Default (dark)": "Default (dark)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (dark)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (dark)"
+"Before the logo": "Before the logo"
+"After the logo": "After the logo"
+"Position": "Position"
+"Show only the opener (hidden logo)": "Show only the opener (hidden logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Do not display the side menu and the opener if there is no application (eg: public pages)."
+"Panel": "Panel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
+"Display the big menu": "Display the big menu"
+"Display the logo": "Display the logo"
+"Icons and texts": "Icons and texts"
+"Loader enabled": "Loader enabled"
+"Tips": "Tips"
+"Always displayed": "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.": "Not compatible with touch screens."
+"Big menu": "Big menu"
+"Live preview": "Live preview"
+"Open apps in new tab": "Open apps in new tab"
+"Use the global setting": "Use the global setting"
+"Use my selection": "Use my selection"
+"Show and hide the list of applications": "Show and hide the list of applications"
+"Use the avatar instead of the logo": "Use the avatar instead of the logo"
+"You do not have permission to change the settings.": "You do not have permission to change the settings."
+"Force this configuration to users": "Force this configuration to users"
+"Export the configuration": "Export the configuration"
+"Purge the cache": "Purge the cache"
+"Show the link to settings": "Show the link to settings"
+"The menu is enabled by default for users": "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": "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": "The logo is a link to the default app"
+"Others": "Others"
+"Categories": "Categories"
+"Customize sorting": "Customize sorting"
+"Order by": "Order by"
+"Name": "Name"
+"Customed": "Customed"
+"Show and hide the list of categories": "Show and hide the list of categories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "This parameters are used when Dark theme or Breeze Dark Theme are enabled."
+"Dark mode colors": "Dark mode colors"
+"With categories": "With categories"
+"Custom categories": "Custom categories"
+"Customize application categories": "Customize application categories"
+"Reset to default": "Reset to default"
+"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"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/tpl/base.yaml

@@ -1,96 +1,100 @@
-"Custom menu": ""
-"Enable the custom menu": ""
-"No": ""
-"Yes": ""
-"Menu": ""
+"Custom menu": "Custom menu"
+"Enable the custom menu": "Enable the custom menu"
+"No": "No"
+"Yes": "Yes"
+"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.'
-: ''
-"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": ""
+: '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": "Top menu"
+"Apps that not must be moved in the side menu": "Apps that not must be moved in the side menu"
+"If there is no selection then the global configuration is applied.": "If there is no selection then the global configuration is applied."
+"Experimental": "Experimental"
+"Save": "Save"
+"You like this app and you want to support me?": "You like this app and you want to support me?"
+"Buy me a coffee ☕": "Buy me a coffee ☕"
+"Hidden": "Hidden"
+"Small": "Small"
+"Normal": "Normal"
+"Big": "Big"
+"Hidden icon": "Hidden icon"
+"Small icon": "Small icon"
+"Normal icon": "Normal icon"
+"Big icon": "Big icon"
+"Hidden text": "Hidden text"
+"Small text": "Small text"
+"Normal text": "Normal text"
+"Big text": "Big text"
+"Colors": "Colors"
+"Background color": "Background color"
+"Background color of current app": "Background color of current app"
+"Text color": "Text color"
+"Loader": "Loader"
+"Icon": "Icon"
+"Same color": "Same color"
+"Opposite color": "Opposite color"
+"Transparent": "Transparent"
+"Opaque": "Opaque"
+"Opener": "Opener"
+"Default": "Default"
+"Default (dark)": "Default (dark)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (dark)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (dark)"
+"Before the logo": "Before the logo"
+"After the logo": "After the logo"
+"Position": "Position"
+"Show only the opener (hidden logo)": "Show only the opener (hidden logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Do not display the side menu and the opener if there is no application (eg: public pages)."
+"Panel": "Panel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
+"Display the big menu": "Display the big menu"
+"Display the logo": "Display the logo"
+"Icons and texts": "Icons and texts"
+"Loader enabled": "Loader enabled"
+"Tips": "Tips"
+"Always displayed": "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.": "Not compatible with touch screens."
+"Big menu": "Big menu"
+"Live preview": "Live preview"
+"Open apps in new tab": "Open apps in new tab"
+"Use the global setting": "Use the global setting"
+"Use my selection": "Use my selection"
+"Show and hide the list of applications": "Show and hide the list of applications"
+"Use the avatar instead of the logo": "Use the avatar instead of the logo"
+"You do not have permission to change the settings.": "You do not have permission to change the settings."
+"Force this configuration to users": "Force this configuration to users"
+"Export the configuration": "Export the configuration"
+"Purge the cache": "Purge the cache"
+"Show the link to settings": "Show the link to settings"
+"The menu is enabled by default for users": "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": "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": "The logo is a link to the default app"
+"Others": "Others"
+"Categories": "Categories"
+"Customize sorting": "Customize sorting"
+"Order by": "Order by"
+"Name": "Name"
+"Customed": "Customed"
+"Show and hide the list of categories": "Show and hide the list of categories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "This parameters are used when Dark theme or Breeze Dark Theme are enabled."
+"Dark mode colors": "Dark mode colors"
+"With categories": "With categories"
+"Custom categories": "Custom categories"
+"Customize application categories": "Customize application categories"
+"Reset to default": "Reset to default"
+"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"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/zh_CN.yaml

@@ -92,3 +92,5 @@
 "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"
+"Search": "Search"
+"Toggle menu": "Toggle menu"

src/lib/createElement.js

@@ -3,7 +3,13 @@ module.exports = (tagName, attributes) => {
 
   if (typeof attributes === 'object') {
     for (let i in attributes) {
-      element.setAttribute(i, attributes[i])
+      if (i === 'text') {
+        element.textContent = attributes[i]
+      } else if (i === 'html') {
+        element.innerHTML = attributes[i]
+      } else {
+        element.setAttribute(i, attributes[i])
+      }
     }
   }
 

templates/css/stylesheet.php

@@ -42,10 +42,14 @@
     top: 49px;
   }
 
-  #side-menu.hide-opener .side-menu-header {
+  #side-menu.hide-opener .side-menu-header .side-menu-opener.side-menu-closer {
     visibility: hidden;
   }
 
+  #side-menu.hide-opener.side-menu-with-categories .side-menu-search {
+    float: none;
+  }
+
   <?php if ($_['size-text'] === 'hidden'): ?>
     #side-menu, .side-menu-apps-list {
       <?php if ($_['size-icon'] === 'big'): ?>

templates/js/script.php

@@ -14,12 +14,17 @@ if ($_['always-displayed']) {
 
 (function() {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
-  const sideMenuOpener = SMcreateElement('button', {'class': 'side-menu-opener'})
+  const sideMenuOpener = SMcreateElement('button', {
+    'class': 'side-menu-opener',
+    'arial-label': t('side_menu', 'Toggle the menu'),
+    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
+  })
   const sideMenu = SMcreateElement('div', {id: 'side-menu'})
 
   const body = document.querySelector('body')
   const html = document.querySelector('html')
   const nextcloud = document.querySelector('#nextcloud')
+  const logo = document.querySelector('.header-left .logo')
 
   const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
 
@@ -35,6 +40,15 @@ if ($_['always-displayed']) {
     sideMenu.setAttribute('data-sidewithcategories', '1')
   <?php endif; ?>
 
+  const sideMenuFocus = () => {
+    let a = document.querySelector('#side-menu .side-menu-app.active a')
+      || document.querySelector('#side-menu .side-menu-app a')
+
+    if (a) {
+      a.focus()
+    }
+  }
+
   document.querySelector('body').addEventListener('side-menu.apps', (e) => {
     const apps = e.detail.apps;
 
@@ -77,22 +91,6 @@ if ($_['always-displayed']) {
       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')
@@ -124,14 +122,8 @@ if ($_['always-displayed']) {
 
     headerMenuOpener.addEventListener('click', () => {
       sideMenu.classList.add('open')
-
-      const a = sideMenu.querySelector('.side-menu-app.active a')
-
-      if (a !== null) {
-        a.focus()
-      }
-
       headerMenuOpener.blur()
+      sideMenuFocus()
     })
 
     for (let opener of sideMenuOpener) {
@@ -179,6 +171,10 @@ if ($_['always-displayed']) {
   <?php endif; ?>
 
   if (nextcloud) {
+    if (logo && logo.parentNode !== nextcloud) {
+      nextcloud.appendChild(logo)
+    }
+
     <?php if ($_['opener-position'] === 'before'): ?>
       nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
     <?php else: ?>

templates/settings/admin-form.php

@@ -1115,19 +1115,19 @@ $labelAlwaysDisplayed = 'Always displayed';
     </div>
 
     <div class="section" id="more">
-        <button id="side-menu-save" class="btn btn-info">
+        <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
             <?php p($l->t('Save')); ?>
             <progress max="100" value="0" id="side-menu-save-progress"></progress>
         </button>
 
         <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.exportConfiguration') ?>" target="_blank" rel="noopener">
-            <button class="btn btn-primary" >
+            <button class="btn btn-primary" arial-label="<?php p($l->t('Export the configuration')); ?>">
                 <?php p($l->t('Export the configuration')); ?>
             </button>
         </a>
 
         <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.removeCache') ?>">
-            <button class="btn btn-primary" >
+            <button class="btn btn-primary" arial-label="<?php p($l->t('Purge the cache')); ?>">
                 <?php p($l->t('Purge the cache')); ?> (<?php echo $cacheSize ?> Kb)
             </button>
         </a>
@@ -1139,7 +1139,7 @@ $labelAlwaysDisplayed = 'Always displayed';
                 <?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" rel="noopener">
-                    <button>
+                    <button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
                         <?php p($l->t('Buy me a coffee ☕')); ?>
                     </button>
                 </a>

templates/settings/personal-form.php

@@ -240,7 +240,7 @@ $labelReset = 'Reset to default';
 
     <div class="section">
         <?php if (!$_['force']): ?>
-            <button id="side-menu-save" class="btn btn-info">
+            <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
                 <?php p($l->t('Save')); ?>
                 <progress max="100" value="0" id="side-menu-save-progress"></progress>
             </button>
@@ -255,7 +255,7 @@ $labelReset = 'Reset to default';
                 <?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" rel="noopener">
-                    <button>
+                    <button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
                         <?php p($l->t('Buy me a coffee ☕')); ?>
                     </button>
                 </a>