Better menu restore, add hover, active class

Improve the code that restores the menu state after a refresh.
Add hover styling for menu sub links. Add an active class
for the menu sub links and JavaScript to assign it to the
link clicked or restored.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

mayan/apps/appearance/static/appearance/css/base.css

@@ -444,6 +444,14 @@ body {
     background-color: #517394;
 }
 
+#accordion-sidebar > .panel > div > .panel-body > ul > li > a:hover {
+    background-color: #517394;
+}
+
+#accordion-sidebar > .panel > div > .panel-body > ul > li.active {
+   background: #1a242f;
+}
+
 #accordion-sidebar .panel-title {
     font-size: 15px;
 }
@@ -462,10 +470,6 @@ body {
     padding: 0px;
 }
 
-#accordion-sidebar .panel-body li:hover {
-    background-color: #517394;
-}
-
 #accordion-sidebar .panel-body a {
     color: white;
     text-decoration: none;

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -70,13 +70,14 @@ class MayanApp {
         });
     }
 
-    static setupNavbarState () {
-        var uri = new URI(window.location.hash);
-        var uriFragment = uri.fragment();
-        $('#accordion-sidebar > .panel-default > .collapse > .panel-body > ul > li > a').each(function (index, value) {
-            if (value.pathname === uriFragment) {
-                $(this).parents('.collapse').collapse('show');
-            }
+    static setupNavBarState () {
+        $('body').on('click', '.a-main-menu-accordion-link', function (event) {
+            console.log('ad');
+            $('.a-main-menu-accordion-link').each(function (index, value) {
+                $(this).parent().removeClass('active');
+            });
+
+            $(this).parent().addClass('active');
         });
     }
 
@@ -96,6 +97,17 @@ class MayanApp {
         return $tag;
     }
 
+    static updateNavbarState () {
+        var uri = new URI(window.location.hash);
+        var uriFragment = uri.fragment();
+        $('.a-main-menu-accordion-link').each(function (index, value) {
+            if (value.pathname === uriFragment) {
+                $(this).closest('.collapse').addClass('in').parent().find('.collapsed').removeClass('collapsed').attr('aria-expanded', 'true');
+                $(this).parent().addClass('active');
+            }
+        });
+    }
+
     // Instance methods
 
     AJAXperiodicWorker (options) {
@@ -234,6 +246,7 @@ class MayanApp {
         this.setupItemsSelector();
         MayanApp.setupMultiItemActions();
         this.setupNavbarCollapse();
+        MayanApp.setupNavBarState();
         this.setupNewWindowAnchor();
         $.each(this.ajaxMenusOptions, function(index, value) {
             value.app = self;

mayan/apps/appearance/templates/appearance/menu_main.html

@@ -36,10 +36,14 @@
                                     {% get_menu_links name=link.name as menu_links %}
                                     {% for linkset in menu_links %}
                                         {% with '' as link_class_active %}
+                                        {% with 'a-main-menu-accordion-link' as link_classes %}
+                                        {% with 'true' as as_li %}
                                         {% with linkset as object_navigation_links %}
                                             {% include 'navigation/generic_navigation.html' %}
                                         {% endwith %}
                                         {% endwith %}
+                                        {% endwith %}
+                                        {% endwith %}
                                     {% endfor %}
                                 </ul>
                             </div>

mayan/apps/appearance/templates/appearance/root.html

@@ -113,7 +113,7 @@
             var app = new MayanApp({
                 ajaxMenusOptions: [
                     {
-                        callback: MayanApp.setupNavbarState,
+                        callback: MayanApp.updateNavbarState,
                         interval: 5000,
                         menuSelector: '#menu-main',
                         name: 'menu_main',