Merge branch 'develop'

CHANGELOG.md

@@ -0,0 +1,255 @@
+## v1.25.1
+### Added
+- add PHP version as dependency
+- add chinese translation
+### Fixed
+- fix CHANGELOG
+
+## v1.25.0
+### Added
+- add compatibility with Nextcloud 22
+- add CHANGELOG.md (fix #59)
+- update app icon
+
+## v1.24.0
+### Added
+- add option to define the background opacity (fix #53)
+- add missing translations
+
+## v1.23.1
+### Fixed
+- fix but wih dark mode opener option
+
+## v1.23.0
+### Added
+- add support of dark Theme and Breeze Dark
+- add support of Nextcloud 21
+
+## v1.22.2
+### Fixed
+- fix regression: apps does not open in new tab (fix #55)
+
+## v1.22.1
+### Fixed
+- fix regression: apps does not open in new tab
+
+## v1.22.0
+### Added
+- Add option to sort categories (fix #53)
+- Update admin UI
+
+## v1.21.0
+### Added
+- [FEATURE] Logo in the menu links to main page of installation (#51)
+
+## v1.20.1
+### Fixed
+- Fix translations
+
+## v1.20.0
+### Added
+- [FEATURE] Ability to remove apps from the Big Menu (#49)
+
+## v1.19.1
+### Fixed
+- fix #47: setting for list/grid view in files app flashes and dissapears
+
+## v1.19.0
+### Added
+- add option: the menu is enabled by default for users (fix #46)
+
+## v1.18.0
+### Added
+- add option to show link to settings (fix #44)
+- refactor menus using several components
+
+## v1.17.0
+### Added
+- compliance with the app checker
+- add an action to export the configuration
+- add an action to purge the cache
+
+## v1.16.3
+### Fixed
+- fix links that must be opened in new window (https://help.nextcloud.com/t/external-petit-probleme-concernant-lapplication-external-sites-ou-sites-externes/94884/11)
+
+## v1.16.2
+### Fixed
+- fix issue with personal settings when global settings are forced
+
+## v1.16.1
+### Fixed
+- fix #42: add cache to manage failures to access apps.nextcloud.com
+- fix #41: side menu was hover apps list
+
+## v1.16.0
+### Added
+- add an option to force settings to users (fix #38)
+
+## v1.15.0
+### Changed
+- New name
+### Fixed
+- Fix #36: always displayed is not expanding
+
+## v1.14.0
+### Added
+- add an api accessed by components
+- add a config proxy in controllers
+### Fixed
+- fix translations
+
+## v1.13.0
+### Added
+- add an option to display the avatar instead of the logo (fix #34)
+
+## v1.12.3
+### Added
+- add a delay before moving elements (fix #33)
+
+## v1.12.2
+### Fixed
+- fix #30: `Always displayed` menu can not be close using touchscreens
+
+## v1.12.1
+### Fixed
+- fix typo
+- fix translations
+
+## v1.12.0
+### Fixed
+- fix #30: administrators and users can select what apps must be opened in new tab
+- fix typo
+
+## v1.11.0
+### Added
+- add the option for opening apps in new tab (fix #29)
+### Fixed
+- fix issue with the header of the always displayed menu
+
+## v1.10.0
+### Added
+- add images to select the display of the menu
+- add live preview
+- update translations
+- update app info
+
+## v1.9.3
+### Fixed
+- fix regression with logo display
+
+## v1.9.2
+### Added
+- add the option “always displayed” which fixes the position of the menu to the left and always displays the application icons (fix #21, fix #2)
+
+## v1.8.6
+### Added
+- add translations: `fr` and `de`
+- improve and publish the `Makefile`
+- update documentation
+
+## v1.8.5
+### Fixed
+- fix #28: menu items invisible after 1.8.4
+
+## v1.8.4
+### Fixed
+- fix #27: disable side menu on public pages - broken in 1.8.3
+
+## v1.8.3
+### Fixed
+- fix alphabetic order of apps (#26)
+
+## v1.8.2
+### Added
+- add icon for closing the big menu (fix #25)
+### Fixed
+- fix hidden icons in the top menu (fix #23)
+- fix missing apps (fix #24)
+
+## v1.8.1
+### Fixed
+- fix issue with links
+- fix missing l10n files
+
+## v1.8.0
+### Added
+- add a `big menu` display (fix #22)
+- add the possibility to choose what apps are displayed in the top menu (fix #22)
+- add icon color filter
+- add icon opacity filter
+
+## v1.8.0-rc2
+
+## v1.7.0
+### Added
+- add a loader when the page is unloading
+- add compatibility with Nextcloud 19
+
+## v1.6.3
+### Fixed
+- fix #20: add a shortcut to open and to hide the menu
+
+## v1.6.2
+### Fixed
+- fix #19: add a cache to limit flashes
+
+## v1.6.1
+### Fixed
+- fix #19: add a hack to show external sites in the top menu with navigation
+
+## v1.6.0
+### Added
+- Add a page of personal settings
+- Add an option to disable the side menu as user
+- Refactoring of javascripts
+
+## v1.5.0
+### Added
+- add option to force light icons instead of dark icons
+### Fixed
+- fix #19: add option to keep external sites in the top menu
+- fix #16 #17: add dark icons and handle the svg filters
+
+## v1.4.1
+### Added
+- Rendering  harmonization with browsers
+### Fixed
+- FIX #15: make menu start after icon
+
+## v1.4.0
+### Fixed
+- Fix #12: add an option to hide the opener and the panel when there is no application
+
+## v1.3.4
+### Fixed
+- FIX #14: add option to show only the opener
+- FIX #13: add alternate hamburger icon
+- FIX #11: remove error in the console
+
+## v1.3.3
+### Added
+- Add a second background color to create a background gradiant
+- Update documentation
+### Fixed
+- FIX #10: add options to select the size of the icons and the text, or hide them
+
+## v1.3.2
+### Fixed
+- FIX #9: opener icon not visible with multiple apps_paths
+
+## v1.3.1
+### Fixed
+- FIX #3: Add an opition the choose the position of the opener (after or before the logo)
+- FIX #8: Remove extension of dynamic asset's routes (js, css)
+
+## v1.3.0
+### Added
+- `main.js` is replaced by a controller and a template
+### Fixed
+-  FIX #2: add option to open the menu by hovering over opener
+
+## v1.2.4
+### Fixed
+- FIX #7: Opener icon not visible in Safari
+

Makefile

@@ -13,7 +13,7 @@ release: npm-build translations
 
 	test -d releases/$$VERSION && rm -fr releases/$$VERSION
 	mkdir -p releases/$$VERSION/side_menu
-	cp -r README.md appinfo css lib img l10n js src templates screenshots releases/$$VERSION/side_menu
+	cp -r README.md CHANGELOG.md appinfo css lib img l10n js src templates screenshots releases/$$VERSION/side_menu
 	cd releases/$$VERSION
 	zip -r side_menu_v$$VERSION.zip side_menu
 	tar cvzf side_menu_v$$VERSION.tar.gz side_menu

appinfo/info.xml

@@ -26,7 +26,7 @@ If you like this application and if you want to support the development:
 * [Donate with liberapay](https://liberapay.com/deblan)
 * [Leave a comment](https://apps.nextcloud.com/apps/side_menu#comments)
 ]]></description>
-    <version>1.23.0</version>
+    <version>1.25.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -46,7 +46,8 @@ If you like this application and if you want to support the development:
     <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>
     <dependencies>
-        <nextcloud min-version="18" max-version="21"/>
+        <nextcloud min-version="18" max-version="22"/>
+        <php min-version="7.3"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

img/icon.svg

@@ -1,113 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="145.889" height="145.889" viewBox="0 0 38.6 38.6"><g transform="translate(-59.172 -91.92)" stroke="#000" fill="none"><path d="M66.595 111.162h9.997M66.595 103.805h11.4m-11.4 14.714h11.4" stroke-width="3.165"/><rect width="34.535" height="34.535" x="61.205" y="93.952" overflow="visible" rx="5.481" ry="5.481" style="marker:none" color="#000" stroke-width="4.065" stroke-linecap="round" paint-order="fill markers stroke"/></g></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="37.099998mm"
-   height="37.099998mm"
-   viewBox="0 0 37.099998 37.099998"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   sodipodi:docname="icon.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="242.1839"
-     inkscape:cy="32.026866"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1918"
-     inkscape:window-height="1027"
-     inkscape:window-x="1920"
-     inkscape:window-y="21"
-     inkscape:window-maximized="0"
-     inkscape:snap-nodes="false" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-59.922223,-92.669069)">
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1a1a1a;stroke-width:1.46500015;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-2-7"
-       width="34.535"
-       height="34.535"
-       x="61.204723"
-       y="93.951569"
-       rx="5.4806547"
-       ry="5.4806547" />
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:#ececec;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.46500015;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-7"
-       width="20.357224"
-       height="33.40107"
-       x="61.677193"
-       y="94.518532"
-       rx="0"
-       ry="0" />
-    <path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 66.59458,111.16177 h 9.997359"
-       id="path873-5"
-       inkscape:connector-curvature="0" />
-    <g
-       id="g1018"
-       transform="translate(2.6458333)"
-       style="stroke:#333333;stroke-opacity:1">
-      <g
-         id="g1013"
-         style="stroke:#333333;stroke-opacity:1">
-        <path
-           style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           d="M 63.948747,103.80467 H 75.349244"
-           id="path873"
-           inkscape:connector-curvature="0" />
-        <path
-           style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           d="M 63.948747,118.51887 H 75.349244"
-           id="path873-5-3"
-           inkscape:connector-curvature="0" />
-      </g>
-    </g>
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:2.56500006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-2"
-       width="34.535"
-       height="34.535"
-       x="61.204723"
-       y="93.951569"
-       rx="5.4806547"
-       ry="5.4806547" />
-  </g>
-</svg>

lib/Controller/CssController.php

@@ -99,6 +99,8 @@ class CssController extends Controller
             $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);
         } else {
             $backgroundColor = $this->config->getAppValue('background-color', '#333333');
             $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
@@ -108,8 +110,13 @@ class CssController extends Controller
             $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);
         }
 
+        $backgroundColor .= $backgroundOpacity;
+        $backgroundColorTo .= $backgroundOpacity;
+
         return [
             'vars' => [
                 'background-color' => $backgroundColor,

lib/Settings/Admin.php

@@ -82,6 +82,7 @@ class Admin implements ISettings
         $parameters = [
             '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', '#444444'),
             'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
             'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
@@ -89,6 +90,7 @@ class Admin implements ISettings
             'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
             '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-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'),
             'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', '#cccccc'),
             'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),

src/admin.js

@@ -110,6 +110,12 @@ jQuery(document).ready(() => {
         var name = target.attr('name')
         var value = target.val()
 
+        if ('background-color-opacity' === name) {
+            return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
+        } else if ('dark-mode-background-color-opacity' === name) {
+            return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
+        }
+
         if (name === 'opener') {
             var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
 
@@ -120,6 +126,16 @@ jQuery(document).ready(() => {
             value/=100;
         }
 
+        if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        }
+
         document.documentElement.style.setProperty('--side-menu-' + name, value)
     })
 

src/l10n/fixtures/de.yaml

@@ -75,3 +75,4 @@
 "Customed": "Kundenspezifisch"
 "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
 "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Parameter werden verwendet, wenn Dark Theme oder Breeze Dark Theme aktiviert sind."
+"Dark mode colors": "Dunkle Modusfarben"

src/l10n/fixtures/fr.yaml

@@ -75,3 +75,4 @@
 "Customed": "Personnalisé"
 "Show and hide the list of categories": "Afficher et masquer la liste des catégories"
 "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
+"Dark mode colors": "Couleurs du mode sombre"

src/l10n/fixtures/zh_CN.yaml

@@ -0,0 +1,78 @@
+"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": "大型"
+"Colors": "颜色"
+"Background color": "背景颜色"
+"Background color of current app": "当前应用的背景色"
+"Text color": "文字颜色"
+"Loader": "菜单指示器"
+"Icon": "图标"
+"Same color": "相同颜色"
+"Opposite color": "相反颜色"
+"Transparent": "透明"
+"Opaque": "不透明"
+"Opener": "容器"
+"Default": "默认"
+"Default (dark)": "默认(深色)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (深色)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (深色)"
+"Before the logo": "在logo前"
+"After the logo": "在logo后"
+"Position": "位置"
+"Show only the opener (hidden logo)": "只显示容器 (隐藏logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "N如果没有应用，不显示侧边栏菜单和容器 (例如 : 公共页面)。"
+"Panel": "面板"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)"
+"Display the big menu": "显示大型菜单"
+"The big 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": "大型菜单"
+"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": "使用头像代替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.": "此功能只和<code>大型菜单<\/code>兼容。"
+"The logo is a link to the default app": "logo链接到默认应用"
+"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": "暗黑模式颜色"

templates/settings/admin-form.php

@@ -66,7 +66,27 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-background-color-opacity"
+                            name="background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
                 </div>
+
             </div>
         </div>
 
@@ -216,6 +236,25 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-dark-mode-background-color-opacity"
+                            name="dark-mode-background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['dark-mode-background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
                 </div>
             </div>
         </div>
@@ -326,7 +365,7 @@ $choicesSizes = [
                     <?php p($l->t('Icon')); ?>
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
-                    <select name="dark-opener" class="side-menu-setting">
+                    <select name="dark-mode-opener" class="side-menu-setting">
                         <?php foreach ($choices as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['dark-mode-opener']): ?>selected<?php endif; ?>>
                                 <?php echo $l->t($label);  ?>