Как добавить множественный шаблон подменю Yii2 в один Menu :: widget?

Question

Я создаю веб-приложение, основанное на теме панели инструментов yii2 и learn-plus, реализовано складное меню навигации на боковой панели с идентификатором, который действует как целевая ссылка (#menu_id) для меню, которое открывается при нажатии на родительскую ссылку, Теперь я пытаюсь добавить Yii2 Menu :: widget с Multiple submenuTemplate, чтобы я мог разместить эти идентификаторы, так как каждое подменю должно иметь свой собственный идентификатор.

Я создал меню, и оно прекрасно работает с одним складнымВ меню возникает проблема, когда я добавляю более одной складной части меню.

<?php
use yii\widgets\Menu;
use yii\helpers\Html;


/**
 * Created by PhpStorm.
 * User: Mr Daud Mabena
 * Date: 01/05/19
 * Time: 01:34 PM
 */

echo Menu::widget([
    'activeCssClass' => "active",
    'activateParents' => true,
    'encodeLabels' => false,
    'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",
    'options' => ['class' => 'sidebar-menu'],
    'items' => [
        [
            'label' => 'Security Dashboard',
            'url' => ['/security/'],
            'options' => ['class' => 'sidebar-menu-item'],
            'template' => "<a class='sidebar-menu-button' href='{url}'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>
                {label}
            </a>",
        ],
        [
            'id' => 'components_menu',
            'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>
                List of Users
                <span class='ml-auto sidebar-menu-toggle-icon'></span>
            </a>",
            'items' => [
                [
                    'label' => 'Staffs',
                    'url' => ['/security/users/staffs'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Applicant',
                    'url' => ['/security/users/applicants'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Students',
                    'url' => ['/security/users/students'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
            ]
        ],
        [
            "label" => "Add New Staff",
            "url" => ["/security/users/create"],
            "template" => "<a class='sidebar-menu-button' href='{url}'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
        ],
        [
            "label" => "Logout",
            "url" => ["/admission/applicants/reports"],
            "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
        ],
    ],
]);

Мне нужно иметь несколько

'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",

с другим идентификатором, первая из них - setup_menu wishдобавить другой идентификатор, такой как access_levels и т. д.

Answer 1

Переместите submenuTemplate внутри родительского элемента, где вы хотите, чтобы появилось подменю, в настоящее время вы используете один шаблон для всех подменю, тогда как вам нужно использовать отдельный шаблон для каждого подменю и назначить разные * 1002.* s для всех подменю и href для родительского элемента.

Например, см. Изображение ниже, где у вас есть многоуровневые складные подменю в разделе List of Users 2 уровня сворачиваемых и другие в уровне Add New Staff 1.

Вы можете использовать следующий код, я скопировал элементы в существующее подменю, чтобы вы могли изменить его соответствующим образом, но идея есть.Я использовал формат setup_menu_1, чтобы назначить 3 различных идентификатора меню, изменить их тоже

echo Menu::widget(
    [
        'activeCssClass' => "active",
        'activateParents' => true,
        'encodeLabels' => false,
        'options' => ['class' => 'sidebar-menu'],
        'items' => [
            [
                'label' => 'Security Dashboard',
                'url' => ['/security/'],
                'options' => ['class' => 'sidebar-menu-item'],
                'template' => "<a class='sidebar-menu-button' href='{url}'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>{label}</a>",
            ],
            [
                'id' => 'components_menu',
                'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_1'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>List of Users<span class='ml-auto sidebar-menu-toggle-icon'></span></a>",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_1'>\n{items}\n</ul>\n",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_3'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                        'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_3'>\n{items}\n</ul>\n",
                        'items' => [
                            [
                                'label' => 'Staffs',
                                'url' => ['/security/users/staffs'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Applicant',
                                'url' => ['/security/users/applicants'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Students',
                                'url' => ['/security/users/students'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                        ]
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Some Other Menu",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_2'>\n{items}\n</ul>\n",
                "template" => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_2'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'url' => ['/security/users/staffs'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Logout",
                "url" => ["/admission/applicants/reports"],
                "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
            ],
        ],
    ]
);