From 2cd126e68a78bf7e15c7e3d5fce2ace85445b62d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabri=C3=A9l=20Ardean?= <gabriel.ardean@yetopen.com>
Date: Thu, 6 Jul 2023 14:53:02 +0200
Subject: [PATCH 1/2] Added an option for the menu to add multiple additional
 URIs

---
 src/views/dynamic-menu/index.php  |   6 +
 src/views/dynamic-menu/index2.php | 461 +++++++++-----------------
 src/views/dynamic-menu/index3.php | 529 ++++++++++++++++++++----------
 src/views/dynamic-menu/index4.php | 211 ++++++++++++
 src/widgets/DynamicMenuWidget.php |  27 +-
 5 files changed, 725 insertions(+), 509 deletions(-)
 create mode 100755 src/views/dynamic-menu/index4.php

diff --git a/src/views/dynamic-menu/index.php b/src/views/dynamic-menu/index.php
index fd6c4c1..83b7524 100755
--- a/src/views/dynamic-menu/index.php
+++ b/src/views/dynamic-menu/index.php
@@ -98,6 +98,12 @@
                             <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="href" class="col-sm-2 control-label">Additional URI</label>
+                        <div class="col-sm-10">
+                            <textarea type="text" class="form-control item-menu" id="additional_href" name="additional_href" placeholder="Additional URI"></textarea>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label for="target" class="col-sm-2 control-label">Target</label>
                         <div class="col-sm-10">
diff --git a/src/views/dynamic-menu/index2.php b/src/views/dynamic-menu/index2.php
index 9471e16..fd6c4c1 100755
--- a/src/views/dynamic-menu/index2.php
+++ b/src/views/dynamic-menu/index2.php
@@ -1,183 +1,83 @@
 <?php
-/**
- * Created by PhpStorm.
- * User: tudor
- */
+/* @var $this yii\web\View */
+
+use yii\helpers\Html;
+use yii\helpers\Url;
+use yii\helpers\ArrayHelper;
+use kartik\select2\Select2;
+use yii\web\JsExpression;
+use yii\bootstrap\Modal;
+use yii\bootstrap\ActiveForm;
+use backend\modules\yii2rbac\RbacHelper;
+
+//use \backend\modules\rbac\helpers\RbacHelper;
 
 $this->title = 'Dynamic Menu Creator';
 $this->params['breadcrumbs'][] = ['label' => 'Dynamic Menu', 'url' => ['index']];
 $this->params['breadcrumbs'][] = 'Creator';
+
 esempla\dynamicmenu\DynamicMenuAsset::register(Yii::$app->view);
-//get system roles
-$roles = Yii::$app->authManager->getRoles();
-?>
-<div id="page-heading">
-    <h1>System Sidebar Builder</h1>
-    <div class="options">
-        <div class="btn-toolbar">
-            <button id="btnAddMenu" class="btn btn-default" ><i class="fa fa-plus-circle"></i><span class="hidden-sm"> Create New  </span></button>
-        </div>
-    </div>
-</div>
-<div class="row" id="panelRoles" style="display: none;">
-    <div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-body" id="rolep">
-                <div class="tab-container tab-danger">
-                    <ul class="nav nav-tabs">
-                        <li class="active"><a href="#forroles" data-toggle="tab">Select For Role</a></li>
-                        <li class=""><a href="#forusers" data-toggle="tab">Select For User</a></li>
-                    </ul>
-                    <div class="tab-content">
-                        <div class="tab-pane active" id="forroles">
-                            <div class="row">
-                                <div class="col-md-12">
-                                    <div class="form-group">
-                                        <div class="form-group">
-                                            <label class="col-md-3 control-label"
-                                                   style="color: #ff5c27;"><?php echo Yii::t('mess', 'Role in System '); ?></label>
-                                            <div class="col-md-6">
-                                                <?php //echo CHtml::dropDownList('DocRole[dp_role_name]', 'dp_role_name', $roles, array('empty' => Yii::t('mess', '--- Selectati Role ---'), 'class' => 'col-md-12', 'style' => 'height:35px;')); //,'options' => array(18=>array('selected'=>true)) ?>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+yii2mod\alert\AlertAsset::register(Yii::$app->view);
 
-                        </div>
-                        <div class="tab-pane" id="forusers">
-                            Acest compartiment este in dezvoltare ..
-                        </div>
-                    </div>
-                </div>
+$roles = Yii::$app->authManager->getRoles();
 
-            </div>
-        </div>
+/**
+ * Create an array of role names from role objects.
+ */
+$rolesOptions = array_map(function ($role) {
+    return $role->name;
+}, $roles);
 
 
+?>
+<div class="row">
+    <div class="col-md-3">
+        <?php
+        Modal::begin([
+            'options' => [
+                'id' => 'role-modal',
+                'tabindex' => false // important for Select2 to work properly
+            ],
+            'header' => '<h4 style="margin:0; padding:0">Select Role </h4>',
+            'toggleButton' => ['label' => 'Create New Menu', 'class' => 'btn btn-success', 'style' => 'margin-bottom:5px;'],
+        ]);
+        echo Select2::widget([
+            'name' => 'role_menu',
+            'data' => $rolesOptions,
+            'options' => ['placeholder' => 'Select a role ...'],
+            'pluginOptions' => [
+                'allowClear' => true
+            ],
+            'pluginEvents' => [
+                "change" => "function() { console.log('onchange');
+                    $('#roleName').empty();
+                    $('#roleNameHead').empty();
+                    $('#roleName').html($(this).find(':selected').val());
+                    $('#roleNameHead').html('NEW MENU FOR ROLE : '+$(this).find(':selected').val()).show();
+                    $('#myEditor').empty();
+                    $('#labelLoadedID').empty();
+                    $('#labelLoadedID').html('Loaded ID: NEW');
+                    $('#panelMenus a[href=\"#menuView\"]').tab('show');
+                    $('#role-modal').modal('hide');
+                   }",
+                "select2:selecting" => "function() { console.log('selecting');
+                   }",
+            ]
+        ]);
+        Modal::end();
+
+        ?>
     </div>
-    <div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-body" >
-                <h3>Create New Sidebar Menu Visible For Role</h3>
-                <h3 style="text-align: center; color: red;font-weight: bolder;" id="roleName"></h3>
-            </div>
-        </div>
+    <div class="col-md-9">
+        <h1 id="roleNameHead" class="text-red"></h1>
+        <span id="roleName" style="display: none;"></span>
     </div>
 </div>
-<div class="row">
-    <div class="col-md-6">
-        <div class="tab-container tab-danger" id="panelMenus">
-            <ul class="nav nav-tabs">
-                <li class="active"><a href="#menusByRoles" data-toggle="tab"><i class="fa fa-list"></i> Generated Menus</a></li>
-                <li class=""><a href="#menuView" data-toggle="tab"><i class="fa fa-eye"></i> View Menu</a></li>
-            </ul>
-            <div class="tab-content">
-                <div class="tab-pane active" id="menusByRoles">
-                    <!--                    <div class="row">-->
-                    <!--                        -->
-                    <!--                    </div>-->
-                    <div class="table-responsive" style="overflow-y: scroll;overflow-x:hidden;  height:315px;">
-                        <table class="table" style="margin-bottom: 0px;">
-                            <thead>
-                            <tr>
-                                <th class="">ID</th>
-                                <th class="">Role</th>
-                                <th class="">Status</th>
-                                <th class="">Version</th>
-                                <th class="">Action</th>
-                            </tr>
-                            </thead>
-                            <tbody class="selects" >
-                            <?php
-                            $models = false;
-                            if($models){
-                                foreach ($models as $item_m){
-                                    ?>
-                                    <tr class="tritem" data-id="<?php echo $item_m->id;?>">
-                                        <td><?php echo $item_m->id;?></td>
-                                        <td><?php echo $item_m->role;?></td>
-                                        <td ><?php echo ($item_m->status==1)?'Active':'Not Active';?></td>
-                                        <td><span class="label label-success"><?php echo $item_m->row_version;?></span></td>
-                                        <td>
-
-                                            <button id="" class="btn btn-sm btn-primary btnItemLoadData" data-menu="<?php echo $item_m->id;?>" data-role="<?php echo $item_m->role;?>" data-version="<?php echo $item_m->row_version;?>"> Load Data</button>
-                                            <button id="" class="btn btn-sm btn-danger btnItemDetete" data-menu="<?php echo $item_m->id;?>"><i class="fa fa-trash"></i> </button>
-                                        </td>
-                                    </tr>
-                                    <?php
-                                }
-                            }
-
-                            ?>
-                            </tbody>
-                            <tfoot>
-                            <!--<tr class="active">
-                                <td colspan="4" class="text-left">
-                                    <label for="action" style="margin-bottom:0">Action </label>
-                                    <select name="action">
-                                        <option value="Edit">Edit</option>
-                                        <option value="Aprove">Aprove</option>
-                                        <option value="Move">Move</option>
-                                        <option value="Delete">Delete</option>
-                                    </select>
-                                </td>
-                            </tr>-->
-                            </tfoot>
-                        </table>
-                    </div>
-                </div>
-                <div class="tab-pane" id="menuView">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <div class="panel panel-default">
-                                <div class="panel-heading clearfix"><h5 class="pull-left">Menu</h5>
-                                    <div class="pull-right">
-                                        <span class="label label-success" id="labelLoadedID">
-
-                                        </span>
-                                        <span class="label label-success" id="labelLoadedROLE">
-
-                                        </span>
-                                        <span class="label label-success" id="labelLoadedVERSION">
-
-                                        </span>
-                                        <!--<button id="btnReload" type="button" class="btn btn-default">
-                                            <i class="glyphicon glyphicon-triangle-right"></i> Load Data</button>-->
-                                    </div>
-                                </div>
-                                <div class="panel-body" id="cont">
-                                    <ul id="myEditor" class="sortableLists list-group">
-                                    </ul>
-                                </div>
-                                <div class="panel-footer">
-                                    <button id="btnOut" type="button" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-eye-open"></i>View Output</button>
-                                </div>
-                            </div>
 
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+<div class="row">
     <div class="col-md-6">
         <div class="panel panel-primary">
-            <div class="panel-heading">Edit item
-                    <span class="pull-right">
-<!--                        <input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Internal" data-off="External" data-onstyle="success" data-width="100" >-->
-                    </span>
-            </div>
-<?php
-$this->registerJs( <<< EOT_JS_CODE
-
-$(function() {
-                                $('#toggle-event').change(function() {
-                                    $('#href').vall('Toggle: ' + $(this).prop('checked'))
-                                })
-                            })
-EOT_JS_CODE
-);?>
+            <div class="panel-heading">Edit item</div>
             <div class="panel-body">
                 <form id="frmEdit" class="form-horizontal">
                     <div class="form-group">
@@ -214,6 +114,12 @@
                             <input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="visible_condition" class="col-sm-2 control-label">Visibility condition</label>
+                        <div class="col-sm-10">
+                            <input type="text" name="visible_condition" class="form-control item-menu" id="visible_condition" placeholder="Visible condition">
+                        </div>
+                    </div>
                 </form>
             </div>
             <div class="panel-footer">
@@ -221,156 +127,93 @@
                 <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
             </div>
         </div>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-12">
         <div class="form-group">
             <button id="btnClear" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-trash"></i> Clear</button>
-            <button id="btnSave" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save Data</button>
+            <button id="btnSave" type="button" class="btn btn-success" data-url="<?= Url::toRoute("/menu/dynamic-menu/create") ?>" data-loading-text="Saving..."><i class="glyphicon glyphicon-ok"></i> Save</button>
         </div>
         <div class="form-group">
             <textarea id="out" class="form-control" cols="50" rows="10"></textarea>
         </div>
     </div>
-</div>
-
-
-<hr>
-<!--<script src='/js/jquery-menu-editor.js'></script>
-<script src='/js/iconset/iconset-fontawesome-4.2.0.min.js'></script>
-<script src='/js/bootstrap-iconpicker.js'></script>-->
-<script>
-
-</script>
-<?php
-$this->registerJs( <<< EOT_JS_CODE
-
-$(document).ready(function () {
-        var strjson = '[{"href":"http://home.com","icon":"fa fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fa fa-bar-chart-o","text":"Opcion2"},{"icon":"fa fa-cloud-upload","text":"Opcion3"},{"icon":"fa fa-crop","text":"Opcion4"},{"icon":"fa fa-flask","text":"Opcion5"},{"icon":"fa fa-map-marker","text":"Opcion6"},{"icon":"fa fa-search","text":"Opcion7","children":[{"icon":"fa fa-plug","text":"Opcion7-1","children":[{"icon":"fa fa-filter","text":"Opcion7-1-1"}]}]}]';
-        var iconPickerOpt = {cols: 5, searchText: "Cauta icon...", labelHeader: '{0} de {1} Pags.', footer: false};
-        var options = {
-            hintCss: {'border': '1px dashed #13981D'},
-            placeholderCss: {'background-color': 'gray'},
-            opener: {
-                as: 'html',
-                close: '<i class="fa fa-minus"></i>',
-                open: '<i class="fa fa-plus"></i>',
-                openerCss: {'margin-right': '10px'},
-                openerClass: 'btn btn-success btn-xs'
-            }
-        };
-        var editor = new MenuEditor('myEditor', {listOptions: options, iconPicker: iconPickerOpt, labelEdit: 'Edit'});
-        editor.setForm($('#frmEdit'));
-        editor.setUpdateButton($('#btnUpdate'));
-
-        $('#btnReload').on('click', function () {
-            editor.setData(strjson);
-        });
-        $('#btnOut').on('click', function () {
-            var str = editor.getString();
-            $("#out").text(str);
-        });
-        $('#btnClear').on('click', function () {
-            $("#out").empty();
-        });
-        $("#btnUpdate").click(function(){
-            editor.update();
-        });
-        $('#btnAdd').click(function(){
-            editor.add();
-        });
-        $("#DocRole_dp_role_name").on("change", function(e) {
-            e.preventDefault();
-            $('#roleName').empty();
-            $('#roleName').html($(this).find(':selected').val());
-
-            $('#myEditor').empty();
-            $('#labelLoadedID').empty();
-            $('#labelLoadedID').html('<b>Loaded ID: NEW</b>');
-            $('#panelMenus a[href="#menuView"]').tab('show');
-        });
-        $('#btnAddMenu').click(function(e){
-            e.preventDefault();
-            $('#panelRoles').show();
-            $(this).addClass('btn-success');
-        });
-
-        $('#btnSave').on("click",function (e) {
-            e.preventDefault();
-            var dataMenu = $("#out").val();
-            var roleName = $("#roleName").text();
-            //var id = $("#roleName").text();
-            console.log(dataMenu);
-            console.log(roleName);
-            if(dataMenu !=='' && roleName !==''){
-                $.ajax({
-                    data: {role:roleName,data:dataMenu},
-                    url: '',
-                    dataType: 'json',
-                    type: 'POST',
-                    success:function(data) {
-                        console.log(data);
-                        //callback(data);
-                    },
-                    error:function(data) {
-                        console.log(data);
-                        //callback_error(data);
-                    }
-                });
-            }else
-                alert('Click View Output Button');
-        });
-        $(document).on("click",".btnItemLoadData",function (e) {
-            var id = $(this).attr('data-menu');
-            var role = $(this).attr('data-role');
-            var version = $(this).attr('data-version');
-            $("#roleName").empty();
-            $("#roleName").text(role);
-            $.ajax({
-                data: {menuid:id},
-                url: '',
-                dataType: 'json',
-                type: 'POST',
-                success:function(data) {
-                    editor.setData(data.menu);
-                    $('#labelLoadedID').empty();
-                    $('#labelLoadedROLE').empty();
-                    $('#labelLoadedVERSION').empty();
-                    $('#labelLoadedID').html('<b>Loaded ID:'+id+'</b>');
-                    $('#labelLoadedROLE').html('<b>ROLE:'+role+'</b>');
-                    $('#labelLoadedVERSION').html('<b>V.'+version+'</b>');
-                    $('#panelMenus a[href="#menuView"]').tab('show');
-                    console.log(data);
-                    //callback(data);
-                },
-                error:function(data) {
-                    console.log(data);
-                    //callback_error(data);
-                }
-            });
-        });
-        $(document).on("click",".btnItemDetete",function (e) {
-            var id = $(this).attr('data-menu');
-            $.ajax({
-                data: {menuid:id},
-                url: '',
-                dataType: 'json',
-                type: 'POST',
-                success:function(data) {
-
-                    console.log(data);
-                    //callback(data);
-                },
-                error:function(data) {
-                    console.log(data);
-                    //callback_error(data);
-                }
-            });
-        });
-
-
+    <div class="col-md-6">
+        <div class="box">
+            <div class="box-body">
+                <div class="tab-container tab-danger" id="panelMenus">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a href="#menusByRoles" data-toggle="tab"><i class="fa fa-list"></i>List Generated Menus</a></li>
+                        <li class=""><a href="#menuView" data-toggle="tab"><i class="fa fa-eye"></i> View Menu</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="menusByRoles">
+                            <div class="table-responsive" style="overflow-y: scroll;overflow-x:hidden;  height:315px;">
+                                <table class="table" style="margin-bottom: 0px;">
+                                    <thead>
+                                        <tr>
+                                            <th class="">ID</th>
+                                            <th class="">Role</th>
+                                            <th class="">Status</th>
+                                            <th class="">Version</th>
+                                            <th class="">Action</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="selects">
+                                        <?php
+                                        //$models = false;
+                                        if ($menus) {
+                                            foreach ($menus as $item_m) {
+                                        ?>
+                                                <tr class="tritem" data-id="<?php echo $item_m->id; ?>">
+                                                    <td><?php echo $item_m->id; ?></td>
+                                                    <td><?php echo $item_m->role; ?></td>
+                                                    <td>
+                                                        <?php if ($item_m->status == 1) : ?>
+                                                            <span class="label label-success">Active</span>
+                                                        <?php else : ?>
+                                                            <span class="label label-warning">Disabled</span>
+                                                        <?php endif; ?>
+                                                    </td>
+                                                    <td><span class="label label-success"><?php echo $item_m->row_version; ?></span></td>
+                                                    <td>
+
+                                                        <button id="" class="btn btn-sm btn-primary btnItemLoadData" data-url="<?= Url::toRoute("/menu/dynamic-menu/read") ?>" data-menu="<?php echo $item_m->id; ?>" data-role="<?php echo $item_m->role; ?>" data-version="<?php echo $item_m->row_version; ?>"> Load Data</button>
+                                                        <button id="" class="btn btn-sm btn-danger btnItemDelete" data-url="<?= Url::toRoute("/menu/dynamic-menu/delete") ?>" data-menu="<?php echo $item_m->id; ?>"><i class="fa fa-trash"></i> </button>
+                                                    </td>
+                                                </tr>
+                                        <?php
+                                            }
+                                        }
+
+                                        ?>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="menuView">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <div class="panel panel-default">
+                                        <div class="panel-heading clearfix">
+                                            <h5 class="pull-left">Menu</h5>
+                                            <div class="pull-right">
+                                                <span class="label label-success" id="labelLoadedID"></span>
+                                                <span class="label label-success" id="labelLoadedROLE"></span>
+                                                <span class="label label-success" id="labelLoadedVERSION"></span>
+                                                <button id="btnOut" type="button" class="btn btn-primary">
+                                                    <i class="glyphicon glyphicon-triangle-right"></i> View Output</button>
+                                            </div>
+                                        </div>
+                                        <div class="panel-body" id="cont">
+                                            <ul id="myEditor" class="sortableLists list-group">
+                                            </ul>
+                                        </div>
+                                    </div>
 
-    });
-EOT_JS_CODE
-);?>
\ No newline at end of file
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/views/dynamic-menu/index3.php b/src/views/dynamic-menu/index3.php
index 0a93fe5..9471e16 100755
--- a/src/views/dynamic-menu/index3.php
+++ b/src/views/dynamic-menu/index3.php
@@ -1,211 +1,376 @@
 <?php
-/* @var $this yii\web\View */
-
-use yii\helpers\Html;
-use yii\helpers\ArrayHelper;
-use kartik\select2\Select2;
-use yii\web\JsExpression;
-use yii\bootstrap\Modal;
-use yii\bootstrap\ActiveForm;
-use backend\modules\yii2rbac\RbacHelper;
-
-//use \backend\modules\rbac\helpers\RbacHelper;
+/**
+ * Created by PhpStorm.
+ * User: tudor
+ */
 
 $this->title = 'Dynamic Menu Creator';
 $this->params['breadcrumbs'][] = ['label' => 'Dynamic Menu', 'url' => ['index']];
 $this->params['breadcrumbs'][] = 'Creator';
-
 esempla\dynamicmenu\DynamicMenuAsset::register(Yii::$app->view);
-yii2mod\alert\AlertAsset::register(Yii::$app->view);
-
+//get system roles
 $roles = Yii::$app->authManager->getRoles();
-
-/**
- * Create an array of role names from role objects.
- */
-$rolesOptions = array_map(function($role){
-    return $role->name;
-}, $roles);
-
-
 ?>
-    <div class="row">
-        <div class="col-md-3">
-           <?php
-           Modal::begin([
-               'options' => [
-                   'id' => 'role-modal',
-                   'tabindex' => false // important for Select2 to work properly
-               ],
-               'header' => '<h4 style="margin:0; padding:0">Select Role </h4>',
-               'toggleButton' => ['label' => 'Create New Menu', 'class' => 'btn btn-success','style' => 'margin-bottom:5px;'],
-           ]);
-           echo Select2::widget([
-               'name' => 'role_menu',
-               'data' => $rolesOptions,
-               'options' => ['placeholder' => 'Select a role ...'],
-               'pluginOptions' => [
-                   'allowClear' => true
-               ],
-               'pluginEvents' => [
-                   "change" => "function() { console.log('onchange');
-                    $('#roleName').empty();
-                    $('#roleNameHead').empty();
-                    $('#roleName').html($(this).find(':selected').val());
-                    $('#roleNameHead').html('NEW MENU FOR ROLE : '+$(this).find(':selected').val()).show();
-                    $('#myEditor').empty();
-                    $('#labelLoadedID').empty();
-                    $('#labelLoadedID').html('Loaded ID: NEW');
-                    $('#panelMenus a[href=\"#menuView\"]').tab('show');
-                    $('#role-modal').modal('hide');
-                   }",
-                   "select2:selecting" => "function() { console.log('selecting');
-                   }",
-               ]
-           ]);
-           Modal::end();
-
-           ?>
+<div id="page-heading">
+    <h1>System Sidebar Builder</h1>
+    <div class="options">
+        <div class="btn-toolbar">
+            <button id="btnAddMenu" class="btn btn-default" ><i class="fa fa-plus-circle"></i><span class="hidden-sm"> Create New  </span></button>
         </div>
-         <div class="col-md-9">
-             <h1 id="roleNameHead" class="text-red"></h1>
-             <span id="roleName" style="display: none;"></span>
-         </div>
     </div>
-
-    <div class="row">
-        <div class="col-md-6">
-            <div class="panel panel-primary">
-                <div class="panel-heading">Edit item</div>
-                <div class="panel-body">
-                    <form id="frmEdit" class="form-horizontal">
-                        <div class="form-group">
-                            <label for="text" class="col-sm-2 control-label">Text</label>
-                            <div class="col-sm-10">
-                                <div class="input-group">
-                                    <input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
-                                    <div class="input-group-btn">
-                                        <button type="button" id="myEditor_icon" class="btn btn-default" data-iconset="fontawesome"></button>
+</div>
+<div class="row" id="panelRoles" style="display: none;">
+    <div class="col-md-6">
+        <div class="panel panel-default">
+            <div class="panel-body" id="rolep">
+                <div class="tab-container tab-danger">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a href="#forroles" data-toggle="tab">Select For Role</a></li>
+                        <li class=""><a href="#forusers" data-toggle="tab">Select For User</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="forroles">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <div class="form-group">
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label"
+                                                   style="color: #ff5c27;"><?php echo Yii::t('mess', 'Role in System '); ?></label>
+                                            <div class="col-md-6">
+                                                <?php //echo CHtml::dropDownList('DocRole[dp_role_name]', 'dp_role_name', $roles, array('empty' => Yii::t('mess', '--- Selectati Role ---'), 'class' => 'col-md-12', 'style' => 'height:35px;')); //,'options' => array(18=>array('selected'=>true)) ?>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <input type="hidden" name="icon" class="item-menu">
                                 </div>
                             </div>
+
                         </div>
-                        <div class="form-group">
-                            <label for="href" class="col-sm-2 control-label">URL</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
-                            </div>
+                        <div class="tab-pane" id="forusers">
+                            Acest compartiment este in dezvoltare ..
                         </div>
-                        <div class="form-group">
-                            <label for="target" class="col-sm-2 control-label">Target</label>
-                            <div class="col-sm-10">
-                                <select name="target" id="target" class="form-control item-menu">
-                                    <option value="_self">Self</option>
-                                    <option value="_blank">Blank</option>
-                                    <option value="_top">Top</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="title" class="col-sm-2 control-label">Tooltip</label>
-                            <div class="col-sm-10">
-                                <input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="panel-footer">
-                    <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> Update</button>
-                    <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
+                    </div>
                 </div>
+
             </div>
-            <div class="form-group">
-                <button id="btnClear" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-trash"></i> Clear</button>
-                <button id="btnSave" type="button" class="btn btn-success" data-loading-text="Saving..."><i class="glyphicon glyphicon-ok"></i> Save</button>
-            </div>
-            <div class="form-group">
-                <textarea id="out" class="form-control" cols="50" rows="10"></textarea>
+        </div>
+
+
+    </div>
+    <div class="col-md-6">
+        <div class="panel panel-default">
+            <div class="panel-body" >
+                <h3>Create New Sidebar Menu Visible For Role</h3>
+                <h3 style="text-align: center; color: red;font-weight: bolder;" id="roleName"></h3>
             </div>
         </div>
-        <div class="col-md-6">
-            <div class="box">
-                <div class="box-body">
-                    <div class="tab-container tab-danger" id="panelMenus">
-                        <ul class="nav nav-tabs">
-                            <li class="active"><a href="#menusByRoles" data-toggle="tab"><i class="fa fa-list"></i>List Generated Menus</a></li>
-                            <li class=""><a href="#menuView" data-toggle="tab"><i class="fa fa-eye"></i> View Menu</a></li>
-                        </ul>
-                        <div class="tab-content">
-                            <div class="tab-pane active" id="menusByRoles">
-                                <div class="table-responsive" style="overflow-y: scroll;overflow-x:hidden;  height:315px;">
-                                    <table class="table" style="margin-bottom: 0px;">
-                                        <thead>
-                                        <tr>
-                                            <th class="">ID</th>
-                                            <th class="">Role</th>
-                                            <th class="">Status</th>
-                                            <th class="">Version</th>
-                                            <th class="">Action</th>
-                                        </tr>
-                                        </thead>
-                                        <tbody class="selects" >
-                                        <?php
-                                        //$models = false;
-                                        if($menus){
-                                            foreach ($menus as $item_m){
-                                                ?>
-                                                <tr class="tritem" data-id="<?php echo $item_m->id;?>">
-                                                    <td><?php echo $item_m->id;?></td>
-                                                    <td><?php echo $item_m->role;?></td>
-                                                    <td >
-                                                        <?php if ($item_m->status == 1 ): ?>
-                                                            <span class="label label-success">Active</span>
-                                                        <?php else: ?>
-                                                            <span class="label label-warning">Disabled</span>
-                                                        <?php endif;?>
-                                                    </td>
-                                                    <td><span class="label label-success"><?php echo $item_m->row_version;?></span></td>
-                                                    <td>
-
-                                                        <button id="" class="btn btn-sm btn-primary btnItemLoadData" data-menu="<?php echo $item_m->id;?>" data-role="<?php echo $item_m->role;?>" data-version="<?php echo $item_m->row_version;?>"> Load Data</button>
-                                                        <button id="" class="btn btn-sm btn-danger btnItemDelete" data-menu="<?php echo $item_m->id;?>"><i class="fa fa-trash"></i> </button>
-                                                    </td>
-                                                </tr>
-                                                <?php
-                                            }
-                                        }
-
-                                        ?>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <div class="tab-pane" id="menuView">
-                                <div class="row">
-                                    <div class="col-md-12">
-                                        <div class="panel panel-default">
-                                            <div class="panel-heading clearfix"><h5 class="pull-left">Menu</h5>
-                                                <div class="pull-right">
-                                                    <span class="label label-success" id="labelLoadedID"></span>
-                                                    <span class="label label-success" id="labelLoadedROLE"></span>
-                                                    <span class="label label-success" id="labelLoadedVERSION"></span>
-                                                    <button id="btnOut" type="button" class="btn btn-primary">
-                                                        <i class="glyphicon glyphicon-triangle-right"></i> View Output</button>
-                                                </div>
-                                            </div>
-                                            <div class="panel-body" id="cont">
-                                                <ul id="myEditor" class="sortableLists list-group">
-                                                </ul>
-                                            </div>
-                                        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-6">
+        <div class="tab-container tab-danger" id="panelMenus">
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#menusByRoles" data-toggle="tab"><i class="fa fa-list"></i> Generated Menus</a></li>
+                <li class=""><a href="#menuView" data-toggle="tab"><i class="fa fa-eye"></i> View Menu</a></li>
+            </ul>
+            <div class="tab-content">
+                <div class="tab-pane active" id="menusByRoles">
+                    <!--                    <div class="row">-->
+                    <!--                        -->
+                    <!--                    </div>-->
+                    <div class="table-responsive" style="overflow-y: scroll;overflow-x:hidden;  height:315px;">
+                        <table class="table" style="margin-bottom: 0px;">
+                            <thead>
+                            <tr>
+                                <th class="">ID</th>
+                                <th class="">Role</th>
+                                <th class="">Status</th>
+                                <th class="">Version</th>
+                                <th class="">Action</th>
+                            </tr>
+                            </thead>
+                            <tbody class="selects" >
+                            <?php
+                            $models = false;
+                            if($models){
+                                foreach ($models as $item_m){
+                                    ?>
+                                    <tr class="tritem" data-id="<?php echo $item_m->id;?>">
+                                        <td><?php echo $item_m->id;?></td>
+                                        <td><?php echo $item_m->role;?></td>
+                                        <td ><?php echo ($item_m->status==1)?'Active':'Not Active';?></td>
+                                        <td><span class="label label-success"><?php echo $item_m->row_version;?></span></td>
+                                        <td>
+
+                                            <button id="" class="btn btn-sm btn-primary btnItemLoadData" data-menu="<?php echo $item_m->id;?>" data-role="<?php echo $item_m->role;?>" data-version="<?php echo $item_m->row_version;?>"> Load Data</button>
+                                            <button id="" class="btn btn-sm btn-danger btnItemDetete" data-menu="<?php echo $item_m->id;?>"><i class="fa fa-trash"></i> </button>
+                                        </td>
+                                    </tr>
+                                    <?php
+                                }
+                            }
+
+                            ?>
+                            </tbody>
+                            <tfoot>
+                            <!--<tr class="active">
+                                <td colspan="4" class="text-left">
+                                    <label for="action" style="margin-bottom:0">Action </label>
+                                    <select name="action">
+                                        <option value="Edit">Edit</option>
+                                        <option value="Aprove">Aprove</option>
+                                        <option value="Move">Move</option>
+                                        <option value="Delete">Delete</option>
+                                    </select>
+                                </td>
+                            </tr>-->
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+                <div class="tab-pane" id="menuView">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="panel panel-default">
+                                <div class="panel-heading clearfix"><h5 class="pull-left">Menu</h5>
+                                    <div class="pull-right">
+                                        <span class="label label-success" id="labelLoadedID">
 
+                                        </span>
+                                        <span class="label label-success" id="labelLoadedROLE">
+
+                                        </span>
+                                        <span class="label label-success" id="labelLoadedVERSION">
+
+                                        </span>
+                                        <!--<button id="btnReload" type="button" class="btn btn-default">
+                                            <i class="glyphicon glyphicon-triangle-right"></i> Load Data</button>-->
                                     </div>
                                 </div>
+                                <div class="panel-body" id="cont">
+                                    <ul id="myEditor" class="sortableLists list-group">
+                                    </ul>
+                                </div>
+                                <div class="panel-footer">
+                                    <button id="btnOut" type="button" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-eye-open"></i>View Output</button>
+                                </div>
                             </div>
+
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="col-md-6">
+        <div class="panel panel-primary">
+            <div class="panel-heading">Edit item
+                    <span class="pull-right">
+<!--                        <input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Internal" data-off="External" data-onstyle="success" data-width="100" >-->
+                    </span>
+            </div>
+<?php
+$this->registerJs( <<< EOT_JS_CODE
+
+$(function() {
+                                $('#toggle-event').change(function() {
+                                    $('#href').vall('Toggle: ' + $(this).prop('checked'))
+                                })
+                            })
+EOT_JS_CODE
+);?>
+            <div class="panel-body">
+                <form id="frmEdit" class="form-horizontal">
+                    <div class="form-group">
+                        <label for="text" class="col-sm-2 control-label">Text</label>
+                        <div class="col-sm-10">
+                            <div class="input-group">
+                                <input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
+                                <div class="input-group-btn">
+                                    <button type="button" id="myEditor_icon" class="btn btn-default" data-iconset="fontawesome"></button>
+                                </div>
+                                <input type="hidden" name="icon" class="item-menu">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="href" class="col-sm-2 control-label">URL</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="target" class="col-sm-2 control-label">Target</label>
+                        <div class="col-sm-10">
+                            <select name="target" id="target" class="form-control item-menu">
+                                <option value="_self">Self</option>
+                                <option value="_blank">Blank</option>
+                                <option value="_top">Top</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="title" class="col-sm-2 control-label">Tooltip</label>
+                        <div class="col-sm-10">
+                            <input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="panel-footer">
+                <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> Update</button>
+                <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-12">
+        <div class="form-group">
+            <button id="btnClear" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-trash"></i> Clear</button>
+            <button id="btnSave" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save Data</button>
+        </div>
+        <div class="form-group">
+            <textarea id="out" class="form-control" cols="50" rows="10"></textarea>
+        </div>
+    </div>
+</div>
+
+
+<hr>
+<!--<script src='/js/jquery-menu-editor.js'></script>
+<script src='/js/iconset/iconset-fontawesome-4.2.0.min.js'></script>
+<script src='/js/bootstrap-iconpicker.js'></script>-->
+<script>
+
+</script>
+<?php
+$this->registerJs( <<< EOT_JS_CODE
+
+$(document).ready(function () {
+        var strjson = '[{"href":"http://home.com","icon":"fa fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fa fa-bar-chart-o","text":"Opcion2"},{"icon":"fa fa-cloud-upload","text":"Opcion3"},{"icon":"fa fa-crop","text":"Opcion4"},{"icon":"fa fa-flask","text":"Opcion5"},{"icon":"fa fa-map-marker","text":"Opcion6"},{"icon":"fa fa-search","text":"Opcion7","children":[{"icon":"fa fa-plug","text":"Opcion7-1","children":[{"icon":"fa fa-filter","text":"Opcion7-1-1"}]}]}]';
+        var iconPickerOpt = {cols: 5, searchText: "Cauta icon...", labelHeader: '{0} de {1} Pags.', footer: false};
+        var options = {
+            hintCss: {'border': '1px dashed #13981D'},
+            placeholderCss: {'background-color': 'gray'},
+            opener: {
+                as: 'html',
+                close: '<i class="fa fa-minus"></i>',
+                open: '<i class="fa fa-plus"></i>',
+                openerCss: {'margin-right': '10px'},
+                openerClass: 'btn btn-success btn-xs'
+            }
+        };
+        var editor = new MenuEditor('myEditor', {listOptions: options, iconPicker: iconPickerOpt, labelEdit: 'Edit'});
+        editor.setForm($('#frmEdit'));
+        editor.setUpdateButton($('#btnUpdate'));
+
+        $('#btnReload').on('click', function () {
+            editor.setData(strjson);
+        });
+        $('#btnOut').on('click', function () {
+            var str = editor.getString();
+            $("#out").text(str);
+        });
+        $('#btnClear').on('click', function () {
+            $("#out").empty();
+        });
+        $("#btnUpdate").click(function(){
+            editor.update();
+        });
+        $('#btnAdd').click(function(){
+            editor.add();
+        });
+        $("#DocRole_dp_role_name").on("change", function(e) {
+            e.preventDefault();
+            $('#roleName').empty();
+            $('#roleName').html($(this).find(':selected').val());
+
+            $('#myEditor').empty();
+            $('#labelLoadedID').empty();
+            $('#labelLoadedID').html('<b>Loaded ID: NEW</b>');
+            $('#panelMenus a[href="#menuView"]').tab('show');
+        });
+        $('#btnAddMenu').click(function(e){
+            e.preventDefault();
+            $('#panelRoles').show();
+            $(this).addClass('btn-success');
+        });
+
+        $('#btnSave').on("click",function (e) {
+            e.preventDefault();
+            var dataMenu = $("#out").val();
+            var roleName = $("#roleName").text();
+            //var id = $("#roleName").text();
+            console.log(dataMenu);
+            console.log(roleName);
+            if(dataMenu !=='' && roleName !==''){
+                $.ajax({
+                    data: {role:roleName,data:dataMenu},
+                    url: '',
+                    dataType: 'json',
+                    type: 'POST',
+                    success:function(data) {
+                        console.log(data);
+                        //callback(data);
+                    },
+                    error:function(data) {
+                        console.log(data);
+                        //callback_error(data);
+                    }
+                });
+            }else
+                alert('Click View Output Button');
+        });
+        $(document).on("click",".btnItemLoadData",function (e) {
+            var id = $(this).attr('data-menu');
+            var role = $(this).attr('data-role');
+            var version = $(this).attr('data-version');
+            $("#roleName").empty();
+            $("#roleName").text(role);
+            $.ajax({
+                data: {menuid:id},
+                url: '',
+                dataType: 'json',
+                type: 'POST',
+                success:function(data) {
+                    editor.setData(data.menu);
+                    $('#labelLoadedID').empty();
+                    $('#labelLoadedROLE').empty();
+                    $('#labelLoadedVERSION').empty();
+                    $('#labelLoadedID').html('<b>Loaded ID:'+id+'</b>');
+                    $('#labelLoadedROLE').html('<b>ROLE:'+role+'</b>');
+                    $('#labelLoadedVERSION').html('<b>V.'+version+'</b>');
+                    $('#panelMenus a[href="#menuView"]').tab('show');
+                    console.log(data);
+                    //callback(data);
+                },
+                error:function(data) {
+                    console.log(data);
+                    //callback_error(data);
+                }
+            });
+        });
+        $(document).on("click",".btnItemDetete",function (e) {
+            var id = $(this).attr('data-menu');
+            $.ajax({
+                data: {menuid:id},
+                url: '',
+                dataType: 'json',
+                type: 'POST',
+                success:function(data) {
+
+                    console.log(data);
+                    //callback(data);
+                },
+                error:function(data) {
+                    console.log(data);
+                    //callback_error(data);
+                }
+            });
+        });
+
+
+
+    });
+EOT_JS_CODE
+);?>
\ No newline at end of file
diff --git a/src/views/dynamic-menu/index4.php b/src/views/dynamic-menu/index4.php
new file mode 100755
index 0000000..0a93fe5
--- /dev/null
+++ b/src/views/dynamic-menu/index4.php
@@ -0,0 +1,211 @@
+<?php
+/* @var $this yii\web\View */
+
+use yii\helpers\Html;
+use yii\helpers\ArrayHelper;
+use kartik\select2\Select2;
+use yii\web\JsExpression;
+use yii\bootstrap\Modal;
+use yii\bootstrap\ActiveForm;
+use backend\modules\yii2rbac\RbacHelper;
+
+//use \backend\modules\rbac\helpers\RbacHelper;
+
+$this->title = 'Dynamic Menu Creator';
+$this->params['breadcrumbs'][] = ['label' => 'Dynamic Menu', 'url' => ['index']];
+$this->params['breadcrumbs'][] = 'Creator';
+
+esempla\dynamicmenu\DynamicMenuAsset::register(Yii::$app->view);
+yii2mod\alert\AlertAsset::register(Yii::$app->view);
+
+$roles = Yii::$app->authManager->getRoles();
+
+/**
+ * Create an array of role names from role objects.
+ */
+$rolesOptions = array_map(function($role){
+    return $role->name;
+}, $roles);
+
+
+?>
+    <div class="row">
+        <div class="col-md-3">
+           <?php
+           Modal::begin([
+               'options' => [
+                   'id' => 'role-modal',
+                   'tabindex' => false // important for Select2 to work properly
+               ],
+               'header' => '<h4 style="margin:0; padding:0">Select Role </h4>',
+               'toggleButton' => ['label' => 'Create New Menu', 'class' => 'btn btn-success','style' => 'margin-bottom:5px;'],
+           ]);
+           echo Select2::widget([
+               'name' => 'role_menu',
+               'data' => $rolesOptions,
+               'options' => ['placeholder' => 'Select a role ...'],
+               'pluginOptions' => [
+                   'allowClear' => true
+               ],
+               'pluginEvents' => [
+                   "change" => "function() { console.log('onchange');
+                    $('#roleName').empty();
+                    $('#roleNameHead').empty();
+                    $('#roleName').html($(this).find(':selected').val());
+                    $('#roleNameHead').html('NEW MENU FOR ROLE : '+$(this).find(':selected').val()).show();
+                    $('#myEditor').empty();
+                    $('#labelLoadedID').empty();
+                    $('#labelLoadedID').html('Loaded ID: NEW');
+                    $('#panelMenus a[href=\"#menuView\"]').tab('show');
+                    $('#role-modal').modal('hide');
+                   }",
+                   "select2:selecting" => "function() { console.log('selecting');
+                   }",
+               ]
+           ]);
+           Modal::end();
+
+           ?>
+        </div>
+         <div class="col-md-9">
+             <h1 id="roleNameHead" class="text-red"></h1>
+             <span id="roleName" style="display: none;"></span>
+         </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="panel panel-primary">
+                <div class="panel-heading">Edit item</div>
+                <div class="panel-body">
+                    <form id="frmEdit" class="form-horizontal">
+                        <div class="form-group">
+                            <label for="text" class="col-sm-2 control-label">Text</label>
+                            <div class="col-sm-10">
+                                <div class="input-group">
+                                    <input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
+                                    <div class="input-group-btn">
+                                        <button type="button" id="myEditor_icon" class="btn btn-default" data-iconset="fontawesome"></button>
+                                    </div>
+                                    <input type="hidden" name="icon" class="item-menu">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="href" class="col-sm-2 control-label">URL</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="target" class="col-sm-2 control-label">Target</label>
+                            <div class="col-sm-10">
+                                <select name="target" id="target" class="form-control item-menu">
+                                    <option value="_self">Self</option>
+                                    <option value="_blank">Blank</option>
+                                    <option value="_top">Top</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="title" class="col-sm-2 control-label">Tooltip</label>
+                            <div class="col-sm-10">
+                                <input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="panel-footer">
+                    <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> Update</button>
+                    <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
+                </div>
+            </div>
+            <div class="form-group">
+                <button id="btnClear" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-trash"></i> Clear</button>
+                <button id="btnSave" type="button" class="btn btn-success" data-loading-text="Saving..."><i class="glyphicon glyphicon-ok"></i> Save</button>
+            </div>
+            <div class="form-group">
+                <textarea id="out" class="form-control" cols="50" rows="10"></textarea>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="box">
+                <div class="box-body">
+                    <div class="tab-container tab-danger" id="panelMenus">
+                        <ul class="nav nav-tabs">
+                            <li class="active"><a href="#menusByRoles" data-toggle="tab"><i class="fa fa-list"></i>List Generated Menus</a></li>
+                            <li class=""><a href="#menuView" data-toggle="tab"><i class="fa fa-eye"></i> View Menu</a></li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="menusByRoles">
+                                <div class="table-responsive" style="overflow-y: scroll;overflow-x:hidden;  height:315px;">
+                                    <table class="table" style="margin-bottom: 0px;">
+                                        <thead>
+                                        <tr>
+                                            <th class="">ID</th>
+                                            <th class="">Role</th>
+                                            <th class="">Status</th>
+                                            <th class="">Version</th>
+                                            <th class="">Action</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody class="selects" >
+                                        <?php
+                                        //$models = false;
+                                        if($menus){
+                                            foreach ($menus as $item_m){
+                                                ?>
+                                                <tr class="tritem" data-id="<?php echo $item_m->id;?>">
+                                                    <td><?php echo $item_m->id;?></td>
+                                                    <td><?php echo $item_m->role;?></td>
+                                                    <td >
+                                                        <?php if ($item_m->status == 1 ): ?>
+                                                            <span class="label label-success">Active</span>
+                                                        <?php else: ?>
+                                                            <span class="label label-warning">Disabled</span>
+                                                        <?php endif;?>
+                                                    </td>
+                                                    <td><span class="label label-success"><?php echo $item_m->row_version;?></span></td>
+                                                    <td>
+
+                                                        <button id="" class="btn btn-sm btn-primary btnItemLoadData" data-menu="<?php echo $item_m->id;?>" data-role="<?php echo $item_m->role;?>" data-version="<?php echo $item_m->row_version;?>"> Load Data</button>
+                                                        <button id="" class="btn btn-sm btn-danger btnItemDelete" data-menu="<?php echo $item_m->id;?>"><i class="fa fa-trash"></i> </button>
+                                                    </td>
+                                                </tr>
+                                                <?php
+                                            }
+                                        }
+
+                                        ?>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            <div class="tab-pane" id="menuView">
+                                <div class="row">
+                                    <div class="col-md-12">
+                                        <div class="panel panel-default">
+                                            <div class="panel-heading clearfix"><h5 class="pull-left">Menu</h5>
+                                                <div class="pull-right">
+                                                    <span class="label label-success" id="labelLoadedID"></span>
+                                                    <span class="label label-success" id="labelLoadedROLE"></span>
+                                                    <span class="label label-success" id="labelLoadedVERSION"></span>
+                                                    <button id="btnOut" type="button" class="btn btn-primary">
+                                                        <i class="glyphicon glyphicon-triangle-right"></i> View Output</button>
+                                                </div>
+                                            </div>
+                                            <div class="panel-body" id="cont">
+                                                <ul id="myEditor" class="sortableLists list-group">
+                                                </ul>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
diff --git a/src/widgets/DynamicMenuWidget.php b/src/widgets/DynamicMenuWidget.php
index 1762ab9..6d3e04f 100644
--- a/src/widgets/DynamicMenuWidget.php
+++ b/src/widgets/DynamicMenuWidget.php
@@ -287,24 +287,15 @@ protected function normalizeItems($items, &$active)
      */
     protected function isItemActive($item)
     {
-        if (isset($item['href']) && is_array($item['href']) && isset($item['href'][0])) {
-            $route = $item['href'][0];
-            if ($route[0] !== '/' && Yii::$app->controller) {
-                $route = ltrim(Yii::$app->controller->module->getUniqueId() . '/' . $route, '/');
-            }
-            $route = ltrim($route, '/');
-            if ($route != $this->route && $route !== $this->noDefaultRoute && $route !== $this->noDefaultAction) {
-                return false;
-            }
-            unset($item['href']['#']);
-            if (count($item['href']) > 1) {
-                foreach (array_splice($item['href'], 1) as $name => $value) {
-                    if ($value !== null && (!isset($this->params[$name]) || $this->params[$name] != $value)) {
-                        return false;
-                    }
-                }
-            }
-            return true;
+        if (!isset($item['href'])) return false;
+
+        $href = Url::to($item['href']);
+        if($href == Url::current()) return true;
+
+        if(!isset($item['additional_href'])) return false;
+        $addHref = explode("\n", $item['additional_href']);
+        foreach($addHref as $ref){
+            if($ref == Url::current()) return true;
         }
         return false;
     }

From 92806a1e52fc03184b5ce6d7ff7538d9ad8a62d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabri=C3=A9l=20Ardean?=
 <91618515+elementallos@users.noreply.github.com>
Date: Thu, 6 Jul 2023 15:35:08 +0200
Subject: [PATCH 2/2] Updated README

Added documentation for the new feature (additional URI), used by the menu options. These are used for assigning different pages to the same menu option, so when they are clicked, they will stay as `class="active"`
---
 README.md | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b5b27b5..1ded44a 100755
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Rendering is based on `dmstr/yii2-adminlte-asset` menu widget.
 
 The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
 
-> Note: Check the [composer.json](https://packagist.org/packages/esempla/yii2-rbac) for this extension's requirements and dependencies.
+>__Note__ Check the [composer.json](https://packagist.org/packages/esempla/yii2-rbac) for this extension's requirements and dependencies.
 Read this [web tip /wiki](https://packagist.org/packages/esempla/yii2-rbac) on setting the `minimum-stability` settings for your application's composer.json.
 
 Either run
@@ -66,7 +66,31 @@ a string or an array of strings.
 
 ## Menus management
 
-To access Dynamic Menu management, go to app route `/menu/dynamic-menu`
+>__Note__ To access Dynamic Menu management, go to app route `/menu/dynamic-menu`.
+> In that page there is a dedicated setup for configuring the sidebar menu. 
+
+These are the options you will see (Edit item):
+* text | the label text of the menu option
+* URL | the url that the menu option will redirect the page to
+* additional URI | see description below
+* target | HTML, specifies where will the URL be shown (check HTML docs)
+* tooltip
+* visibility condition | specified role (or roles) that can see the menu option
+
+#### DESCRIPTION
+If you want to add more than one URI (let's say that in your action you rendere a different view based on a specific action, eg: based on the current date, role of the user, permissions, etc...),
+you can do that, by adding more than one URL, using the additional URI text area.
+_When adding multiple URI, it's important to note that there is no separator to distinguish them._
+So the only rule used to distinguish them is by adding a different URI in a new line (don't add literally a `\n`!)
+> For example:
+> ```
+>                 ┌──────────────────────────────┐
+> additional URI: │ /controller/action           │
+>                 │ /default                     │
+>                 └──────────────────────────────┘
+> ```
+> __Note__
+> Remember **NOT** to put the `''` or the `""` for the URI and the URL!
 
 ### Item fields