Darken content area when opening the mobile menu

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

HISTORY.rst

@@ -19,6 +19,7 @@
   debugging the issue.
 - Switch from librabbitmq to py-amqp. Closes GitLab issue #699. Thanks to
   Rob de Canha-Knight (@rssfed23) for the report, research, and debug.
+- Darken content area when opening the mobile menu.
 
 3.3.3 (2019-12-05)
 ==================

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

@@ -480,6 +480,16 @@ a i {
     display: none;
 }
 
+.overlay-gray {
+    background-color: rgba(0,0,0,0.25);
+    display: block;
+    height: 100%;
+    position: fixed;
+    transition: background-color 0.3s;
+    width: 100%;
+    z-index: 50;
+}
+
 @media (min-width: 768px) {
     #menu-main {
         display: block;

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

@@ -293,11 +293,13 @@ class MayanApp {
         // Small screen main menu toggle to open
         $('body').on('click', '#main-menu-button-open', function (event) {
             $('#menu-main').addClass('menu-main-opened');
+            $('#ajax-header').addClass('overlay-gray');
         });
 
         // Small screen main menu toggle to close
         $('body').on('click', '#menu-main-button-close', function (event) {
             $('#menu-main').removeClass('menu-main-opened');
+            $('#ajax-header').removeClass('overlay-gray');
         });
     }
 

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

@@ -40,6 +40,7 @@
             <div class="main">
                 <div class="row zero-margin">
                     <div class="col-xs-12">
+                        <div id="ajax-header"></div>
                         <div id="ajax-content"></div>
                     </div>
                 </div>