add background opacity (fix #58)

README.md

@@ -6,7 +6,7 @@ You can also define apps that must be displayed in the top menu. Fully customisa
 
 This application is rather suitable for instances that activate a lot of applications.
 
-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.
 
 * [Installation and upgrade](#installation-and-upgrade)
 * [How to contribute?](#how-to-contribute)

appinfo/info.xml

@@ -11,7 +11,7 @@ This application is rather suitable for instances that activate a lot of applica
 
 Use the shortcut `Ctrl`+`o` to open and to hide the side menu. Use `tab` to navigate.
 
-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.
 
 You can report a bug or request a feature by opening an issue.
 
@@ -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.21.0</version>
+    <version>1.23.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -36,7 +36,7 @@ If you like this application and if you want to support the development:
     </documentation>
     <category>customization</category>
     <website>https://gitnet.fr/deblan/side_menu</website>
-    <discussion>https://matrix.to/#/!GhfQePnOSPYpYEunWM:neutralnetwork.org</discussion>
+    <discussion>https://matrix.to/#/!TFPucDATKODpHNVAtu:neutralnetwork.org?via=neutralnetwork.org</discussion>
     <bugs>https://gitnet.fr/deblan/side_menu/issues</bugs>
     <repository type="git">https://gitnet.fr/deblan/side_menu</repository>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc19_default_menu.png</screenshot>
@@ -46,7 +46,7 @@ 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="20"/>
+        <nextcloud min-version="18" max-version="21"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

css/admin.css

@@ -68,3 +68,54 @@
 .side-menu-toggler {
     cursor: pointer;
 }
+
+.side-menu-setting-list {
+    margin: 10px 4px 4px 0px;
+}
+
+.side-menu-setting-list-item {
+    padding: 5px 10px;
+    border: 1px solid var(--color-border-dark);
+    max-width: 300px;
+    margin: -1px 0 0 0;
+    cursor: pointer;
+}
+
+.side-menu-setting.arrow {
+    color: #ccc;
+    padding-right: 5px;
+}
+
+.side-menu-setting-list-item input {
+    min-height: auto;
+    margin-top: -1px;
+}
+
+
+.side-menu-setting-table {
+    display: table;
+    width: 100%;
+}
+
+.side-menu-setting-row {
+    display: table;
+}
+
+.side-menu-setting-label {
+    display: table-cell;
+    width: 400px;
+    padding-right: 20px;
+}
+
+.side-menu-setting-form {
+    display: table-cell;
+    width: 300px;
+}
+
+.side-menu-setting-label-short {
+    width: 300px;
+}
+
+.side-menu-setting-form-long {
+    width: 400px;
+}

lib/AppInfo/Application.php

@@ -6,6 +6,7 @@ use OC;
 use OC\Security\CSP\ContentSecurityPolicyNonceManager;
 use OC\User\User;
 use OCA\SideMenu\Service\AppRepository;
+use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\App;
 use OCP\IUserSession;
@@ -84,8 +85,12 @@ class Application extends App
             return new AppRepository();
         });
 
+        $container->registerService('CategoryRepository', function (ContainerInterface $c) {
+            return new CategoryRepository();
+        });
+
         $container->registerService('ConfigProxy', function (ContainerInterface $c) {
-            return new ConfigProxy($this->config);
+            return new ConfigProxy();
         });
     }
 

lib/Controller/CssController.php

@@ -65,29 +65,68 @@ class CssController extends Controller
 
     protected function getConfig(): array
     {
-        $backgroundColor = $this->config->getAppValue('background-color', '#333333');
-        $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
         $isForced = $this->config->getAppValueBool('force', '0');
         $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
 
+        $isAccessibilityAppEnabled = $this->config->getAppValueBool('enabled', '0', 'accessibility');
+        $isBreezeDarkAppEnabled = $this->config->getAppValueBool('enabled', '0', 'breezedark');
+        $isBreezeDarkGlobalEnabled = $this->config->getAppValueBool('theme_enabled', '0', 'breezedark');
+
         if ($this->user) {
             $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
 
             if (!empty($userTopMenuApps) && !$isForced) {
                 $topMenuApps = $userTopMenuApps;
             }
+
+            $isDarkThemeUserEnabled = $this->config->getUserValue($this->user, 'theme', '', 'accessibility') === 'dark';
+            $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark');
+
+            $isBreezeDarkUserEnabled = $isBreezeDarkUserEnabled === '1' || ($isBreezeDarkGlobalEnabled && $isBreezeDarkUserEnabled === '');
+        } else {
+            $isDarkThemeUserEnabled = false;
+            $isBreezeDarkUserEnabled = false;
         }
 
+        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
+
+        if ($isDarkMode) {
+            $backgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+            $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $backgroundColor);
+            $currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('dark-mode-loader-color', '#cccccc');
+            $textColor = $this->config->getAppValue('dark-mode-text-color', '#FFFFFF');
+            $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);
+            $currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('loader-color', '#0e75ac');
+            $textColor = $this->config->getAppValue('text-color', '#FFFFFF');
+            $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,
                 'background-color-to' => $backgroundColorTo,
-                'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
+                'current-app-background-color' => $currentAppBackgroundColor,
-                'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
+                'loader-color' => $loaderColor,
-                'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
+                'text-color' => $textColor,
-                'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
+                'opener' => $opener,
-                'icon-invert-filter' => abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%',
+                'icon-invert-filter' => $iconInvertFilter,
-                'icon-opacity' => abs($this->config->getAppValueInt('icon-opacity', '100') / 100),
+                'icon-opacity' => $iconOpacity,
             ],
             'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
             'opener-only' => $this->config->getAppValueBool('opener-only', '0'),

lib/Controller/NavController.php

@@ -21,13 +21,11 @@ namespace OCA\SideMenu\Controller;
 use OC;
 use OC\App\AppStore\Fetcher\CategoryFetcher;
 use OC\URLGenerator;
-use OCA\SideMenu\AppInfo\Application;
 use OCA\SideMenu\Service\AppRepository;
+use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
-use OCP\IConfig;
-use OCP\IL10N;
 use OCP\IRequest;
 use OCP\IUserSession;
 use OCP\L10N\IFactory;
@@ -39,11 +37,6 @@ class NavController extends Controller
      */
     protected $config;
 
-    /**
-     * @var IConfig
-     */
-    protected $iConfig;
-
     /**
      * @var AppRepository
      */
@@ -67,20 +60,17 @@ class NavController extends Controller
     public function __construct(
         string $appName,
         IRequest $request,
-        IConfig $iConfig,
         ConfigProxy $config,
         AppRepository $appRepository,
-        CategoryFetcher $categoryFetcher,
+        CategoryRepository $categoryRepository,
         URLGenerator $router,
-        IL10N $trans,
         IFactory $l10nFactory
     ) {
         parent::__construct($appName, $request);
 
         $this->config = $config;
-        $this->iConfig = $iConfig;
         $this->appRepository = $appRepository;
-        $this->categoryFetcher = $categoryFetcher;
+        $this->categoryRepository = $categoryRepository;
         $this->l10nFactory = $l10nFactory;
         $this->router = $router;
     }
@@ -94,14 +84,7 @@ class NavController extends Controller
      */
     public function items()
     {
-        $apps = $this->appRepository->getVisibleApps();
-        $currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
-        $externalSitesInTopMenu = $this->config->getAppValueBool('external-sites-in-top-menu', '0');
-        $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
         $user = OC::$server[IUserSession::class]->getUser();
-        $isForced = $this->config->getAppValueBool('force', '0');
-        $appsCategories = [];
-        $categoriesAppsCount = [];
         $items = [];
 
         if (!$user) {
@@ -110,34 +93,19 @@ class NavController extends Controller
             ]);
         }
 
-        $categoriesLabels = $this->config->getAppValueArray('cache-categories', '[]');
+        $apps = $this->appRepository->getVisibleApps();
-
+        $categoriesLabels = $this->categoryRepository->getOrderedCategories();
-        if (empty($categoriesLabels)) {
+        $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
-            $categoriesLabels = $this->categoryFetcher->get();
+        $isForced = $this->config->getAppValueBool('force', '0');
-
-            $this->iConfig->setAppValue(Application::APP_ID, 'cache-categories', json_encode($categoriesLabels));
-        }
-
         $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
         $userTopMenuApps = $this->config->getUserValueArray($user, 'top-menu-apps', '[]');
+        $appsCategories = [];
+        $categoriesAppsCount = [];
 
         if (!$isForced && !empty($userTopMenuApps)) {
             $topMenuApps = $userTopMenuApps;
         }
 
-        foreach ($categoriesLabels as $k => $category) {
-            $categoriesLabels[$category['id']] = $category['translations'][$currentLanguage]['name'] ?? $category['translations']['en']['name'];
-
-            unset($categoriesLabels[$k]);
-        }
-
-        $categoriesLabels['external_links'] = $this->l10nFactory->get('external')->t('External sites');
-
-        $items['other'] = [
-            'name' => '',
-            'apps' => [],
-        ];
-
         foreach ($apps as $app) {
             if (in_array($app['id'], $topMenuApps)) {
                 continue;
@@ -158,6 +126,7 @@ class NavController extends Controller
                 if (!isset($items[$category])) {
                     $items[$category] = [
                         'name' => $categoriesLabels[$category] ?? $category,
+                        'categoryId' => $category,
                         'apps' => [],
                     ];
                 }
@@ -216,8 +185,17 @@ class NavController extends Controller
             }
         }
 
-        usort($items, function ($a, $b) {
+        usort($items, function ($a, $b) use ($categoriesLabels) {
-            return ($a['name'] < $b['name']) ? -1 : 1;
+            foreach ($categoriesLabels as $key => $value) {
+                if ($a['categoryId'] === $key) {
+                    return -1;
+                }
+                if ($b['categoryId'] === $key) {
+                    return 1;
+                }
+            }
+
+            return 0;
         });
 
         return new JSONResponse([

lib/Controller/PersonalSettingController.php

@@ -18,13 +18,13 @@
 
 namespace OCA\SideMenu\Controller;
 
+use OCA\SideMenu\AppInfo\Application;
+use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\Response;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IUserSession;
-use OCA\SideMenu\AppInfo\Application;
-use OCA\SideMenu\Service\ConfigProxy;
 
 class PersonalSettingController extends Controller
 {

lib/Service/CategoryRepository.php

@@ -0,0 +1,99 @@
+<?php
+
+namespace OCA\SideMenu\Service;
+
+use OC\App\AppStore\Fetcher\CategoryFetcher;
+use OCA\SideMenu\AppInfo\Application;
+use OCP\IConfig;
+use OCP\L10N\IFactory;
+
+/**
+ * class CategoryRepository.
+ *
+ * @author Simon Vieille <simon@deblan.fr>
+ */
+class CategoryRepository
+{
+    /**
+     * @var CategoryFetcher
+     */
+    protected $categoryFetcher;
+
+    /**
+     * @var IFactory
+     */
+    protected $l10nFactory;
+
+    /**
+     * @var ConfigProxy
+     */
+    protected $config;
+
+    /**
+     * @var IConfig
+     */
+    protected $iConfig;
+
+    public function __construct(
+        CategoryFetcher $categoryFetcher,
+        ConfigProxy $config,
+        IConfig $iConfig,
+        IFactory $l10nFactory
+    ) {
+        $this->categoryFetcher = $categoryFetcher;
+        $this->l10nFactory = $l10nFactory;
+        $this->config = $config;
+        $this->iConfig = $iConfig;
+    }
+
+    /**
+     * Retrieves categories.
+     *
+     * @return array
+     */
+    public function getOrderedCategories()
+    {
+        $currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
+        $type = $this->config->getAppValue('categories-order-type', 'default');
+        $order = $this->config->getAppValueArray('categories-order', '[]');
+
+        $categoriesLabels = $this->config->getAppValueArray('cache-categories', '[]');
+
+        if (empty($categoriesLabels)) {
+            $categoriesLabels = $this->categoryFetcher->get();
+
+            $this->iConfig->setAppValue(Application::APP_ID, 'cache-categories', json_encode($categoriesLabels));
+        }
+
+        foreach ($categoriesLabels as $k => $category) {
+            $categoriesLabels[$category['id']] = $category['translations'][$currentLanguage]['name'] ?? $category['translations']['en']['name'];
+
+            unset($categoriesLabels[$k]);
+        }
+
+        $categoriesLabels['external_links'] = $this->l10nFactory->get('external')->t('External sites');
+        $categoriesLabels['other'] = '';
+
+        asort($categoriesLabels);
+
+        if ('custom' === $type) {
+            $ordered = [];
+
+            foreach ($order as $id) {
+                if (isset($categoriesLabels[$id])) {
+                    $ordered[$id] = $categoriesLabels[$id];
+                }
+            }
+
+            foreach ($categoriesLabels as $id => $value) {
+                if (!isset($ordered[$id])) {
+                    $ordered[$id] = $value;
+                }
+            }
+
+            $categoriesLabels = $ordered;
+        }
+
+        return $categoriesLabels;
+    }
+}

lib/Service/ConfigProxy.php

@@ -23,43 +23,47 @@ class ConfigProxy
         $this->config = $config;
     }
 
-    public function getAppValue(string $name, string $default): string
+    public function getAppValue(string $name, string $default, $appId = null): string
     {
-        return (string) $this->config->getAppValue(Application::APP_ID, $name, $default);
+        return (string) $this->config->getAppValue($appId ?? Application::APP_ID, $name, $default);
     }
 
-    public function getUserValue(User $user, string $name, string $default): string
+    public function getUserValue(User $user, string $name, string $default, $appId = null): string
     {
-        return (string) $this->config->getUserValue($user->getUid(), Application::APP_ID, $name, $default);
+        return (string) $this->config->getUserValue($user->getUid(), $appId ?? Application::APP_ID, $name, $default);
     }
 
-    public function getAppValueBool(string $name, string $default): bool
+    public function getAppValueBool(string $name, string $default, $appId = null): bool
     {
-        return (bool) $this->getAppValue($name, $default);
+        return (bool) $this->getAppValue($name, $default, $appId);
     }
 
-    public function getAppValueArray(string $name, string $default): array
+    public function getAppValueArray(string $name, string $default, $appId = null): array
     {
-        return (array) json_decode($this->getAppValue($name, $default), true);
+        return (array) json_decode($this->getAppValue($name, $default, $appId), true);
     }
 
-    public function getAppValueInt(string $name, string $default): int
+    public function getAppValueInt(string $name, string $default, $appId = null): int
     {
-        return (int) $this->getAppValue($name, $default);
+        return (int) $this->getAppValue($name, $default, $appId);
     }
 
-    public function getUserValueBool(User $user, string $name, string $default): bool
+    public function getUserValueBool(User $user, string $name, string $default, $appId = null): bool
     {
-        return (bool) $this->getUserValue($user, $name, $default);
+        return (bool) str_replace(
+            ['yes', 'no'],
+            ['1', '0'],
+            $this->getUserValue($user, $name, $default, $appId)
+        );
     }
 
-    public function getUserValueArray(User $user, string $name, string $default): array
+    public function getUserValueArray(User $user, string $name, string $default, $appId = null): array
     {
-        return (array) json_decode($this->getUserValue($user, $name, $default), true);
+        return (array) json_decode($this->getUserValue($user, $name, $default, $appId), true);
     }
 
-    public function getUserValueInt(User $user, string $name, string $default): int
+    public function getUserValueInt(User $user, string $name, string $default, $appId = null): int
     {
-        return (int) $this->getUserValue($user, $name, $default);
+        return (int) $this->getUserValue($user, $name, $default, $appId);
     }
 }

lib/Settings/Admin.php

@@ -20,6 +20,7 @@ namespace OCA\SideMenu\Settings;
 
 use OCA\SideMenu\AppInfo\Application;
 use OCA\SideMenu\Service\AppRepository;
+use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IL10N;
@@ -48,12 +49,23 @@ class Admin implements ISettings
      */
     private $appRepository;
 
-    public function __construct(IL10N $l, ILogger $logger, ConfigProxy $config, AppRepository $appRepository)
+    /**
-    {
+     * @var CategoryRepository
+     */
+    private $categoryRepository;
+
+    public function __construct(
+        IL10N $l,
+        ILogger $logger,
+        ConfigProxy $config,
+        AppRepository $appRepository,
+        CategoryRepository $categoryRepository
+    ) {
         $this->l = $l;
         $this->logger = $logger;
         $this->config = $config;
         $this->appRepository = $appRepository;
+        $this->categoryRepository = $categoryRepository;
     }
 
     /**
@@ -64,17 +76,30 @@ class Admin implements ISettings
         $backgroundColor = $this->config->getAppValue('background-color', '#333333');
         $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
 
+        $darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+        $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkModeBackgroundColor);
+
         $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'),
             'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
-            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
             'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
-            'cache' => $this->config->getAppValue('cache', '0'),
+            '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'),
+            'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
+            'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'),
+            'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'),
             'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
+            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
+            'cache' => $this->config->getAppValue('cache', '0'),
             'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
             'big-menu' => $this->config->getAppValue('big-menu', '0'),
             'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
@@ -92,7 +117,10 @@ class Admin implements ISettings
             'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
             'top-menu-apps' => $this->config->getAppValueArray('top-menu-apps', '[]'),
             'default-enabled' => $this->config->getAppValue('default-enabled', '1'),
+            'categories-order-type' => $this->config->getAppValue('categories-order-type', 'default'),
+            'categories-order' => $this->config->getAppValueArray('categories-order', '[]'),
             'apps' => $this->appRepository->getVisibleApps(),
+            'categories' => $this->categoryRepository->getOrderedCategories(),
         ];
 
         return new TemplateResponse(Application::APP_ID, 'settings/admin-form', $parameters, '');

lib/Settings/AdminSection.php

@@ -18,10 +18,10 @@
 
 namespace OCA\SideMenu\Settings;
 
+use OCA\SideMenu\AppInfo\Application;
 use OCP\IL10N;
 use OCP\IURLGenerator;
 use OCP\Settings\IIconSection;
-use OCA\SideMenu\AppInfo\Application;
 
 class AdminSection implements IIconSection
 {
@@ -35,10 +35,6 @@ class AdminSection implements IIconSection
      */
     private $url;
 
-    /**
-     * @param IURLGenerator $url
-     * @param IL10N $l
-     */
     public function __construct(IURLGenerator $url, IL10N $l)
     {
         $this->url = $url;
@@ -47,7 +43,7 @@ class AdminSection implements IIconSection
 
     /**
      * returns the ID of the section. It is supposed to be a lower case string,
-     * e.g. 'ldap'
+     * e.g. 'ldap'.
      *
      * @returns string
      */

lib/Settings/PersonalSection.php

@@ -18,10 +18,10 @@
 
 namespace OCA\SideMenu\Settings;
 
+use OCA\SideMenu\AppInfo\Application;
 use OCP\IL10N;
 use OCP\IURLGenerator;
 use OCP\Settings\IIconSection;
-use OCA\SideMenu\AppInfo\Application;
 
 class PersonalSection implements IIconSection
 {
@@ -35,10 +35,6 @@ class PersonalSection implements IIconSection
      */
     private $url;
 
-    /**
-     * @param IURLGenerator $url
-     * @param IL10N $l
-     */
     public function __construct(IURLGenerator $url, IL10N $l)
     {
         $this->url = $url;
@@ -47,7 +43,7 @@ class PersonalSection implements IIconSection
 
     /**
      * returns the ID of the section. It is supposed to be a lower case string,
-     * e.g. 'ldap'
+     * e.g. 'ldap'.
      *
      * @returns string
      */

src/SideMenuBig.vue

@@ -43,7 +43,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                             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"
+                            v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
                         />
                     </ul>
                 </div>

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)
     })
 
@@ -129,4 +145,20 @@ jQuery(document).ready(() => {
 
         elementToggler(element)
     })
+
+    jQuery("#categories-list .side-menu-setting-list").sortable({
+		forcePlaceholderSize: true,
+		placeholder: 'placeholder',
+		stop: function (event, ui) {
+            let value = []
+
+            jQuery('#categories-list .side-menu-setting-list-item').each(function() {
+                value.push(jQuery(this).attr('data-id'))
+            });
+
+            value = JSON.stringify(value)
+
+            jQuery('input[name="categories-order"]').val(value)
+		}
+	});
 });

src/l10n/fixtures/de.yaml

@@ -67,3 +67,12 @@
 "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 der Anzeige <code> Großes Menü </ code>."
 "The logo is a link to the default app": "Das Logo ist ein Link zur Standard-App"
+"Others": "Andere"
+"Categories": "Kategorien"
+"Customize sorting": "Sortierung anpassen"
+"Order by": "Sortieren nach"
+"Name": "Name"
+"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

@@ -67,3 +67,12 @@
 "Apps that should not be displayed in the menu": "Applications qui ne doivent pas être affichées dans le menu"
 "This feature is only compatible with the <code>big menu</code> display.": "Compatible avec l'affichage <code>Menu large</code>."
 "The logo is a link to the default app": "Le logo est un lien vers l'application par défaut"
+"Others": "Autres"
+"Categories": "Catégories"
+"Customize sorting": "Personnaliser le tri"
+"Order by": "Trier par"
+"Name": "Nom"
+"Customed": "Personnalisé"
+"Show and hide the list of categories": "Afficher et masquer la liste des catégories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
+"Dark mode colors": "Couleurs du mode sombre"

templates/settings/admin-form.php

@@ -48,12 +48,12 @@ $choicesSizes = [
             <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
         </h2>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-background-color">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
                     <?php p($l->t('Background color')); ?>
-            </label>
                 </div>
-        <div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
                         id="side-menu-background-color"
                         name="background-color"
@@ -66,14 +66,36 @@ $choicesSizes = [
                         type="color"
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['background-color-to']); ?>">
-        </div>
 
                     <div>
-            <label for="side-menu-current-app-background-color">
+                        <em>
-                <?php p($l->t('Background color of current app')); ?>
+                            <?php p($l->t('Transparent')); ?>
-            </label>
+                        </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>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color of current app')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
                         id="side-menu-current-app-background-color"
                         name="current-app-background-color"
@@ -81,13 +103,15 @@ $choicesSizes = [
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['current-app-background-color']); ?>">
                 </div>
-
-        <div>
-            <label for="side-menu-text-color">
-                <?php p($l->t('Text color')); ?>
-            </label>
             </div>
-        <div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Text color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
                         id="side-menu-text-color"
                         name="text-color"
@@ -95,13 +119,15 @@ $choicesSizes = [
                         class="side-menu-setting side-menu-setting-live"
                         value="<?php print_unescaped($_['text-color']); ?>">
                 </div>
-
-        <div>
-            <label for="side-menu-text-color">
-                <?php p($l->t('Loader')); ?>
-            </label>
             </div>
-        <div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Loader')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <input
                         id="side-menu-loader-color"
                         name="loader-color"
@@ -109,13 +135,15 @@ $choicesSizes = [
                         class="side-menu-setting"
                         value="<?php print_unescaped($_['loader-color']); ?>">
                 </div>
-
+            </div>
-        <div>
-            <label for="side-menu-icon-invert-filter">
-                <?php p($l->t('Icon')); ?>
-            </label>
         </div>
 
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <div>
                         <em>
                             <?php p($l->t('Same color')); ?>
@@ -154,12 +182,10 @@ $choicesSizes = [
                         </em>
                     </div>
                 </div>
+            </div>
+        </div>
 
-    <div class="section">
+        <div class="side-menu-setting-table">
-        <h2>
-            <?php p($l->t('Opener')); ?>
-        </h2>
-
             <?php
                 $choices = [
                     'Default' => 'side-menu-opener',
@@ -170,16 +196,11 @@ $choicesSizes = [
                     'Hamburger 2 (dark)' => 'side-menu-opener-hamburger-2-dark',
                 ];
             ?>
-
+            <div class="side-menu-setting-row">
-        <div>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            <label for="side-menu-opener">
                     <?php p($l->t('Icon')); ?>
-
-                <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
-            </label>
                 </div>
-
+                <div class="side-menu-setting-form side-menu-setting-form-long">
-        <div>
                     <select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
                         <?php foreach ($choices as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
@@ -188,21 +209,191 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
+            </div>
+        </div>
 
+        <h2>
+            <?php p($l->t('Dark mode colors')); ?>
+        </h2>
+
+        <p>
+            <?php p($l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.')); ?>
+        </p>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
+                    <input
+                        name="dark-mode-background-color-to"
+                        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>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color of current app')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-current-app-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Text color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-text-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Loader')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-loader-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <div>
+                        <em>
+                            <?php p($l->t('Same color')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-invert-filter"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-invert-filter'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opposite color')); ?>
+                        </em>
+                    </div>
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-opacity"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <?php
+                $choices = [
+                    'Default' => 'side-menu-opener',
+                    'Default (dark)' => 'side-menu-opener-dark',
+                    'Hamburger' => 'side-menu-opener-hamburger',
+                    'Hamburger (dark)' => 'side-menu-opener-hamburger-dark',
+                    'Hamburger 2' => 'side-menu-opener-hamburger-2',
+                    'Hamburger 2 (dark)' => 'side-menu-opener-hamburger-2-dark',
+                ];
+            ?>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <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);  ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Opener')); ?>
+        </h2>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
                 <?php
                     $choices = [
                         'Before the logo' => 'before',
                         'After the logo' => 'after',
                     ];
                 ?>
-
+                <div class="side-menu-setting-label">
-        <div>
-            <label for="side-menu-opener-position">
                     <?php p($l->t('Position')); ?>
-            </label>
                 </div>
-
+                <div class="side-menu-setting-form">
-        <div>
                     <select id="side-menu-opener-position" name="opener-position" class="side-menu-setting">
                         <?php foreach ($choices as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['opener-position']): ?>selected<?php endif; ?>>
@@ -211,14 +402,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-opener-only">
-                <?php p($l->t('Show only the opener (hidden logo)')); ?>
-            </label>
             </div>
 
-        <div>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Show only the opener (hidden logo)')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <select id="side-menu-opener-only" name="opener-only" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['opener-only']): ?>selected<?php endif; ?>>
@@ -227,14 +417,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-hide-when-no-apps">
-                <?php p($l->t('Do not display the side menu and the opener if there is no application (eg: public pages).')); ?>
-            </label>
             </div>
 
-        <div>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Do not display the side menu and the opener if there is no application (eg: public pages).')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <select id="side-menu-hide-when-no-apps" name="hide-when-no-apps" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['hide-when-no-apps']): ?>selected<?php endif; ?>>
@@ -244,6 +433,8 @@ $choicesSizes = [
                     </select>
                 </div>
             </div>
+        </div>
+    </div>
 
     <div class="section">
         <h2>
@@ -310,15 +501,16 @@ $choicesSizes = [
 
         <br>
 
-        <div>
+
-            <label for="side-menu-opener">
+        <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)')); ?>
-            </label>
+
+                    <br>
+                    <em><?php p($l->t('This is the automatic behavior when the menu is always displayed.')); ?></em>
                 </div>
-
+                <div class="side-menu-setting-form">
-        <p><em><?php p($l->t('This is the automatic behavior when the menu is always displayed.')); ?></em></p>
-
-        <div>
                     <select id="side-menu-opener-hover" name="opener-hover" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['opener-hover']): ?>selected<?php endif; ?>>
@@ -327,17 +519,19 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Display the logo')); ?>
-            </label>
             </div>
 
-        <p><em><?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?></em></p>
+            <div class="side-menu-setting-row">
-        <p><em><?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?></em></p>
+                <div class="side-menu-setting-label">
-
+                    <?php p($l->t('Display the logo')); ?>
-        <div>
+                    <br>
+                    <em>
+                        <?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?>
+                        <br>
+                        <?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">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['display-logo']): ?>selected<?php endif; ?>>
@@ -346,10 +540,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
+            </div>
 
-        <p><em><?php p($l->t('Use the avatar instead of the logo')); ?></em></p>
+            <div class="side-menu-setting-row">
-
+                <div class="side-menu-setting-label">
-        <div>
+                    <?php p($l->t('Use the avatar instead of the logo')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <select id="side-menu-use-avatar" name="use-avatar" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['use-avatar']): ?>selected<?php endif; ?>>
@@ -358,10 +555,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
+            </div>
 
-        <p><em><?php p($l->t('The logo is a link to the default app')); ?></em></p>
+            <div class="side-menu-setting-row">
-
+                <div class="side-menu-setting-label">
-        <div>
+                    <?php p($l->t('The logo is a link to the default app')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <select id="side-menu-add-logo-link" name="add-logo-link" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['add-logo-link']): ?>selected<?php endif; ?>>
@@ -370,24 +570,23 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-top-menu-apps">
-                <?php p($l->t('Apps that should not be displayed in the menu')); ?>
-            </label>
             </div>
 
-        <p><em><?php echo $l->t('This feature is only compatible with the <code>big menu</code> display.'); ?></em></p>
+            <div class="side-menu-setting-row">
-
+                <div class="side-menu-setting-label">
-        <p>
+                    <?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>
+                <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')); ?>
                     </a>
-        </p>
 
                     <div class="side-menu-setting" data-name="big-menu-hidden-apps" id="big-menu-hidden-apps" data-checkbox style="display: none">
+                        <ul class="side-menu-setting-list">
                             <?php foreach ($_['apps'] as $app): ?>
-                <div>
+                                <li class="side-menu-setting-list-item">
                                     <input
                                         type="checkbox"
                                         name="big-menu-hidden-apps[]"
@@ -399,19 +598,18 @@ $choicesSizes = [
                                     <label for="big-menu-hidden-app-<?php echo $app['id'] ?>">
                                         <?php echo p($l->t($app['name'])); ?>
                                     </label>
-                </div>
+                                </li>
                             <?php endforeach; ?>
+                        </ul>
+                    </div>
+                </div>
             </div>
 
-        <br>
+            <div class="side-menu-setting-row">
-
+                <div class="side-menu-setting-label">
-        <div>
-            <label for="side-menu-show-settings">
                     <?php p($l->t('Show the link to settings')); ?>
-            </label>
                 </div>
-
+                <div class="side-menu-setting-form">
-        <div>
                     <select id="side-menu-show-settings" name="show-settings" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['show-settings']): ?>selected<?php endif; ?>>
@@ -420,14 +618,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label>
-                <?php p($l->t('Icons and texts')); ?>
-            </label>
             </div>
 
-        <div>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Icons and texts')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <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; ?>>
@@ -444,22 +641,21 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-target-blank">
-                <?php p($l->t('Open apps in new tab')); ?>
-            </label>
             </div>
 
-        <p>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Open apps in new tab')); ?>
+                </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')); ?>
                     </a>
-        </p>
 
                     <div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-checkbox style="display: none">
+                        <ul class="side-menu-setting-list">
                             <?php foreach ($_['apps'] as $app): ?>
-                <div>
+                                <li class="side-menu-setting-list-item">
                                     <input
                                         type="checkbox"
                                         name="target-blank-apps[]"
@@ -471,19 +667,18 @@ $choicesSizes = [
                                     <label for="target-blank-app-<?php echo $app['id'] ?>">
                                         <?php echo p($l->t($app['name'])); ?>
                                     </label>
-                </div>
+                                </li>
                             <?php endforeach; ?>
+                        </ul>
+                    </div>
+                </div>
             </div>
 
-        <br>
+            <div class="side-menu-setting-row">
-
+                <div class="side-menu-setting-label">
-        <div>
-            <label for="side-menu-loader-enabled">
                     <?php p($l->t('Loader enabled')); ?>
-            </label>
                 </div>
-
+                <div class="side-menu-setting-form">
-        <div>
                     <select id="side-menu-loader-enabled" name="loader-enabled" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['loader-enabled']): ?>selected<?php endif; ?>>
@@ -493,26 +688,28 @@ $choicesSizes = [
                     </select>
                 </div>
             </div>
+        </div>
+    </div>
 
     <div class="section">
         <h2>
             <?php p($l->t('Top menu')); ?>
         </h2>
-        <div>
-            <label for="side-menu-top-menu-apps">
-                <?php p($l->t('Apps that not must be moved in the side menu')); ?>
-            </label>
-        </div>
 
-        <p>
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Apps that not must be moved in the side 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')); ?>
                     </a>
-        </p>
 
                     <div class="side-menu-setting" data-name="top-menu-apps" id="top-menu-apps" data-checkbox style="display: none">
+                        <ul class="side-menu-setting-list">
                             <?php foreach ($_['apps'] as $app): ?>
-                <div>
+                                <li class="side-menu-setting-list-item">
                                     <input
                                         type="checkbox"
                                         name="top-menu-apps[]"
@@ -524,8 +721,69 @@ $choicesSizes = [
                                     <label for="top-menu-app-<?php echo $app['id'] ?>">
                                         <?php echo p($l->t($app['name'])); ?>
                                     </label>
-                </div>
+                                </li>
                             <?php endforeach; ?>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Categories')); ?>
+        </h2>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <?php
+                    $choices = [
+                        'Name' => 'default',
+                        'Customed' => 'custom',
+                    ];
+                ?>
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Order by')); ?>
+                </div>
+                <div class="side-menu-setting-form">
+                    <select id="side-menu-categories-order-type" name="categories-order-type" class="side-menu-setting">
+                        <?php foreach ($choices as $label => $value): ?>
+                            <option value="<?php echo $value ?>" <?php if ($value === $_['categories-order-type']): ?>selected<?php endif; ?>>
+                                <?php echo $l->t($label);  ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+
+            <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="#categories-list" href="#_">
+                        🖱️ <?php p($l->t('Show and hide the list of categories')); ?>
+                    </a>
+
+                    <div class="side-menu-setting" data-name="categories" id="categories-list" style="display: none">
+                        <ul class="side-menu-setting-list">
+                            <?php foreach ($_['categories'] as $key => $label): ?>
+                                <li data-id="<?php echo $key; ?>" class="side-menu-setting-list-item">
+                                    <span class="arrow">
+                                        ⇅
+                                    </span>
+
+                                    <?php echo $label ? $l->t($label) : $l->t('Others'); ?>
+                                </li>
+                            <?php endforeach; ?>
+                        </ul>
+                    </div>
+
+                    <input type="hidden" value='<?php echo json_encode(array_keys($_['categories'])) ?>' name="categories-order" class="side-menu-setting">
+                </div>
+            </div>
         </div>
     </div>
 
@@ -540,13 +798,14 @@ $choicesSizes = [
     </div>
 
     <div class="section">
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-default-enabled">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
                     <?php p($l->t('The menu is enabled by default for users')); ?>
-            </label>
+                    <br>
-
+                    <em><?php p($l->t('Except when the configuration is forced.')); ?></em>
-            <p><em><?php p($l->t('Except when the configuration is forced.')); ?></em></p>
+                </div>
-
+                <div class="side-menu-setting-form">
                     <select id="side-menu-default-enabled" name="default-enabled" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['default-enabled']): ?>selected<?php endif; ?>>
@@ -555,14 +814,13 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
-
-        <div>
-            <label for="side-menu-opener-only">
-                <?php p($l->t('Force this configuration to users')); ?>
-            </label>
             </div>
 
-        <div>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label">
+                    <?php p($l->t('Force this configuration to users')); ?>
+                </div>
+                <div class="side-menu-setting-form">
                     <select id="side-menu-force" name="force" class="side-menu-setting">
                         <?php foreach ($choicesYesNo as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['force']): ?>selected<?php endif; ?>>
@@ -571,17 +829,19 @@ $choicesSizes = [
                         <?php endforeach; ?>
                     </select>
                 </div>
+            </div>
+        </div>
 
         <input type="hidden" id="side-menu-cache" name="cache" value="<?php print_unescaped($_['cache']); ?>" class="side-menu-setting">
+    </div>
 
+    <div class="section" id="more">
         <button id="side-menu-save" class="btn btn-info">
             <?php p($l->t('Save')); ?>
         </button>
 
         <span id="side-menu-message" class="msg"></span>
-    </div>
 
-    <div class="section" id="more">
         <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.exportConfiguration') ?>" target="_blank">
             <button class="btn btn-primary" >
                 <?php p($l->t('Export the configuration')); ?>