Upon clicking the sidebar, a brief appearance of the submenu followed by its immediate disappearance seems to be the core issue at hand.
The fact that Layout.js (slideUp func.) is triggered twice feels nonsensical
I meticulously combed through the settings in app.js as well as double-checked the id of the menus. I can confidently say that the id and sub id stored in the database are functioning correctly. All classes on the page seem to be in order and properly positioned.
However, a snag arises with the "open" class along with its corresponding "display block" style. Any attempts to rectify this within the metronic layout.css result in the crucial typing remaining visible momentarily before swiftly closing once more.
Your assistance on this matter is greatly appreciated.
-Metronic.factory in app.js
var settings = {
layout: {
pageSidebarClosed: false, // state of sidebar menu
pageBodySolid: false, // state of solid body color
pageAutoScrollOnLoad: 1000 // auto scroll duration on page load
},
...
};
-MetronicApp.controller in app.js
MetronicApp.controller('SidebarController',
['$scope', 'authService', function ($scope, authService) {
$scope.SelectMenu = function (id) {
$scope.selectedMenu = id;
}
$scope.SelectChildMenu = function (id) {
$scope.selectedChildMenu = id;
}
$scope.LoadMenus = function () {
authService.UserMenus().then(function (response) {
$scope.menus = response;
Layout.initSidebar(); // initialize sidebar
},
function (error) {
alert("Error");
});
};
}]);
Sidebar view (.html)
<div class="page-sidebar navbar-collapse collapse"> <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}" ng-controller="SidebarController" ng-init="LoadMenus()"> <li class="start" ng:repeat="m in menus" ng-class="{'active open': m.id==selectedMenu}"> <a href={{m.menuAction}} ng-click="SelectMenu(m.id)" > <i class="icon-home"></i> <span class="title">{{m.menuText}}</span> </a> <ul class="sub-menu" style="display: none;"> <li ng:repeat="child in m.children" ng-class="{'active': child.id==selectedChildMenu}" > <a ui-sref="{{child.menuAction}}" > <i class="icon-home"></i> <span class="title">{{child.menuText}}</span> </a> </li> </ul> </li> </ul> </div>layout.js (Metronic theme global script)
if (sub.is(":visible")) { jQuery('.arrow', the).removeClass("open"); the.parent().removeClass("open"); debugger;// **This is also triggered immediately after a single click** sub.slideUp(slideSpeed, function () { if (autoScroll === true && $('body').hasClass('page-sidebar-closed') === false) { if ($('body').hasClass('page-sidebar-fixed')) { menu.slimScroll({ 'scrollTo': (the.position()).top }); } else { Metronic.scrollTo(the, slideOffeset); } } handleSidebarAndContentHeight(); }); } else if (hasSubMenu) { debugger; //first visit here normally jQuery('.arrow', the).addClass('open'); the.parent().addClass('open'); sub.slideDown(slideSpeed, function () { if (autoScroll === true && $('body').hasClass('page-sidebar-closed') === false) { if ($('body').hasClass('page-sidebar-fixed')) { menu.slimScroll({ 'scrollTo': (the.position()).top }); } else { Metronic.scrollTo(the, slideOffeset); } } handleSidebarAndContentHeight(); }); } e.preventDefault(); });
CSS Flow Logs (Operational vs Malfunctioning versions)