Страница 1 из 1

Настройка основного меню

Добавлено: 03 сен 2024, 13:34
A.S.1VANOV
Появилась потребность в настройке меню. К сожалению, стандартными настройками нельзя поменять полностью порядок, а также скрыть и(или) добавить разрывы, поэтому я решил создать пользовательский код.

Настройка
  1. Заходим в "Настройки" => "Пользовательский HTML".
  2. Вставляем в поле "Добавьте код в конце тега <head>" следующий код:

    Код: Выделить всё

    <style>
    .razriv {
       margin-bottom: 20px !important;
       padding-bottom: 10px !important;
    }
    .hidden-item {
       display: none !important;
    }
    </style>
    
  3. Вставляем в поле "Добавьте код перед тегом </body>" следующий код:

    Код: Выделить всё

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const menuItems = document.querySelectorAll('.page-sidebar-menu > li');
            
            const menuOrder = [
                'Главная',
                'Ваше название поле',
                'Ваше название поле',
                'Ваше название поле',
                'Отчеты',
                'Календарь',
                'Калькулятор дней',
                'Инфо страницы',
                'История изменений',
                'Настройки',
                'Структура приложения',
                'Дополнение',
                'Публичные формы',
                'Автоматизация действий',
                'Интеграция с почтой',
                'Лицензия',
                'Инструменты',
                'Документация',
                'Пользователи',
                'О программе'
            ];
    
            const razriv = [
                'История изменений',        // Добавляем разрыв после "История изменений"
            ];
    
            const hiddenItems = [
                'Инфо страницы',    // Скрываем пункт "Инфо страницы"
                'Отчеты',           // Скрываем пункт "Отчеты"
                'Календарь',        // Скрываем пункт "Календарь"            
                'О программе'       // Скрываем пункт "О программе"
            ];
            
            menuItems.forEach((item, index) => {
                const titleElement = item.querySelector('.title');
                const titleText = titleElement ? titleElement.innerText.trim() : '';
    
                if (menuOrder.includes(titleText)) {
                    item.setAttribute('data-order', menuOrder.indexOf(titleText) + 1);
                }
    
                // Добавляем класс разрыва, если пункт входит в список razriv
                if (razriv.includes(titleText)) {
                    item.classList.add('razriv');
                }
    
                // Скрываем пункт меню, если он входит в список hiddenItems
                if (hiddenItems.includes(titleText)) {
                    item.classList.add('hidden-item');
                }
            });
    
            const sortedItems = Array.from(menuItems).sort((a, b) => {
                return (a.getAttribute('data-order') || 99) - (b.getAttribute('data-order') || 99);
            });
    
            const menuContainer = document.querySelector('.page-sidebar-menu');
            menuContainer.innerHTML = '';
            sortedItems.forEach(item => {
                menuContainer.appendChild(item);
            });
        });
    </script>
Сортировка
В 'Ваше название поле' указываете название вашего поля. Обратите внимание, что название должно точно совпадать с названием пункта в меню, иначе сортировка не сработает. Меняя порядок элементов в массиве, вы можете легко изменить порядок отображения пунктов в меню.

Разрыв
В const razriv указываете названия полей, после которых нужно добавить разрыв. Можно сделать несколько разрывов.

Спрятать поле
В const hiddenItems указываете названия полей, которые нужно скрыть. Можно скрыть несколько полей.

Пример
2024-09-03_13-30-53.png

Re: Настройка основного меню

Добавлено: 11 сен 2024, 11:10
syrorybin
В заметки.
Спасибо.