#9663 menu redesing 3

pandora_console/general/new_main_menu.php

@@ -77,7 +77,7 @@ echo '</ul><div class="div_border_line"><div id="tab_line_1" class="border_line"
 echo '<div id="div_display">';
 require 'operation/menu.php';
 echo '</div>';
-echo '<div id="div_management" style="display: none;">';
+echo '<div id="div_management">';
 require 'godmode/menu.php';
 echo '</div>';
 
@@ -108,34 +108,45 @@ echo '</div>';
             $('#div_management').css('display', 'block');
         })
 
+        const id_selected = '<?php echo $menu1_selected; ?>';
+        if (id_selected != '') {
+            $(`ul#subicon_${id_selected}`).show();
+            // Arrow.
+            $(`#icon_${id_selected}`).children().first().children().last().removeClass('arrow_menu_down');
+            $(`#icon_${id_selected}`).children().first().children().last().addClass('arrow_menu_up');
+            // Span.
+            $(`#icon_${id_selected}`).children().first().children().eq(1).addClass('span_selected');
+        }
+
         var click_display = "<?php echo $config['click_display']; ?>";
 
         $('.title_menu_classic').click(function() {
-            if (typeof(table_hover) != 'undefined') {
+            const table_hover = $(this).parent();
-                $("ul#sub" + table_hover[0].id).hide();
+            const id = table_hover[0].id;
+            const classes = $(`#${id}`).attr('class');
+
+            if (classes.includes('selected') === true) {
+                $(`#${id}`).removeClass('selected');
+                $(`ul#sub${id}`).hide();
                 // Arrow.
                 table_hover.children().first().children().last().removeClass('arrow_menu_up');
                 table_hover.children().first().children().last().addClass('arrow_menu_down');
                 // Span.
                 table_hover.children().first().children().eq(1).removeClass('span_selected');
-                if (table_hover[0].id == $(this).parent()[0].id) {
+            } else {
-                    table_hover = undefined;
+                $(`#${id}`).addClass('selected');
-                    return;
+                $(`ul#sub${id}`).show();
-                }
+                // Arrow.
+                $(this).children().last().removeClass('arrow_menu_down');
+                $(this).children().last().addClass('arrow_menu_up');
+                // Span.
+                $(this).children().eq(1).addClass('span_selected');
             }
-
-            table_hover = $(this).parent();
-            handsIn = 1;
-            $("ul#sub" + table_hover[0].id).show();
-            // Arrow.
-            $(this).children().last().removeClass('arrow_menu_down');
-            $(this).children().last().addClass('arrow_menu_up');
-            // Span.
-            $(this).children().eq(1).addClass('span_selected');
         });
 
         $('.has_submenu').click(function() {
             if (typeof(table_hover2) != 'undefined') {
+                $(`#${table_hover2[0].id}`).css("background-color", "");
                 $("#sub" + table_hover2[0].id).hide();
                 // Arrow.
                 table_hover2.children().first().children().last().removeClass('arrow_menu_up');
@@ -150,6 +161,8 @@ echo '</div>';
 
             table_hover2 = $(this);
             handsIn2 = 1;
+
+            $(`#${table_hover2[0].id}`).css("background-color", "#eff2f2");
             $("#sub" + table_hover2[0].id).show();
             // Arrow.
             table_hover2.children().first().children().last().removeClass('arrow_menu_down');

pandora_console/include/functions_menu.php

@@ -48,6 +48,8 @@ function menu_print_menu(&$menu)
     global $config;
     global $menuTypeClass;
     global $tab_active;
+    global $menu1_selected;
+    global $menu2_selected;
     static $idcounter = 0;
 
     echo '<div class="menu">';
@@ -406,6 +408,7 @@ function menu_print_menu(&$menu)
 
         if ($menu_selected) {
             $seleccionado = 'selected';
+            $menu1_selected = $id;
             if ($menu['class'] === 'operation') {
                 $tab_active = 'display';
             } else {

pandora_console/include/styles/menu2.css

@@ -15,6 +15,42 @@
 // along with this program; if not, write to the Free Software
 // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
+#div_display {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#div_management {
+  display: none;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#div_display::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+#div_display::-webkit-scrollbar:vertical {
+  width: 5px;
+}
+
+#div_display::-webkit-scrollbar-button:increment,
+#div_display::-webkit-scrollbar-button {
+  display: none;
+}
+
+#div_display::-webkit-scrollbar-thumb {
+  background-color: #6c7587;
+  border-radius: 2.5px;
+  opacity: 0.5;
+  height: 50px;
+}
+
+#div_display::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
 
 .operation li,
 .godmode li {
@@ -30,8 +66,12 @@
 
 .operation .menu_icon ul.submenu > li,
 .godmode .menu_icon ul.submenu > li {
-  background-color: #f6f7fb;
+  background-color: #ffffff;
-  padding-left: 3.5em !important;
+  padding-left: 24px !important;
+}
+
+.menu {
+  height: 100%;
 }
 
 .menu ul {
@@ -46,7 +86,6 @@
 }
 
 .menu li a {
-  color: #ffffff;
   text-decoration: none;
   width: 100%;
 }
@@ -59,7 +98,6 @@
 .submenu_text {
   margin-left: 0px;
   width: 100%;
-  color: #161628;
   font-size: 9.4pt;
 }
 
@@ -71,7 +109,8 @@
 .submenu {
   margin: 0px 0px 0px 0px;
   /* position: absolute; */
-  width: 280px;
+  width: 260px;
+  margin-left: 20px !important;
 }
 
 .submenu2 {
@@ -84,10 +123,13 @@
   font-weight: normal;
   background-color: #f0f3f3;
   padding-left: 1.5em;
+  color: #161628 !important;
 }
 
 .sub_subMenu.selected {
   font-weight: 600;
+  background-color: #002f33 !important;
+  color: #fff !important;
 }
 
 .submenu2 li a {
@@ -108,6 +150,10 @@
   z-index: 1;
 }
 
+.has_submenu {
+  color: #161628 !important;
+}
+
 .menu li.submenu_not_selected a,
 .menu li.submenu2_not_selected a {
   font-weight: normal;
@@ -115,6 +161,9 @@
 
 .submenu_selected {
   margin-bottom: 0px;
+  background-color: #002f33 !important;
+  color: #ffffff !important;
+  box-shadow: inset 4px 0 #82b92e;
 }
 
 .menu .menu_icon,
@@ -123,6 +172,10 @@
   cursor: pointer;
 }
 
+.menu_icon.selected li {
+  color: #1d7874 !important;
+}
+
 .menu li.links {
   background-image: url(../../images/link.png);
   background-position: 4px 8px;
@@ -291,11 +344,7 @@ ul li {
 }
 
 .submenu_not_selected:hover {
-  background-color: #f0f3f3 !important;
+  background-color: #eff2f2 !important;
-}
-
-.submenu_selected:hover {
-  background-color: #202020 !important;
 }
 
 .sub_subMenu:hover {
@@ -551,6 +600,7 @@ ul li {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
+  min-height: 53px;
 }
 
 .tabs_li {

pandora_console/include/styles/pandora.css

@@ -3513,7 +3513,6 @@ div.div_groups_status {
 }
 
 #title_menu {
-  color: #161628;
   font-size: 14px;
   letter-spacing: -0.28px;
   line-height: 24px;