From 68342b481bd928cb8bd9dea8e4ed36c2006a0cdc Mon Sep 17 00:00:00 2001
From: Roberto Rosario <roberto.rosario@mayan-edms.com>
Date: Mon, 9 Dec 2019 01:09:56 -0400
Subject: [PATCH] Darken content area when opening the mobile menu

Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>
---
 HISTORY.rst                                            |  1 +
 mayan/apps/appearance/static/appearance/css/base.css   | 10 ++++++++++
 .../apps/appearance/static/appearance/js/mayan_app.js  |  2 ++
 mayan/apps/appearance/templates/appearance/root.html   |  1 +
 4 files changed, 14 insertions(+)

diff --git a/HISTORY.rst b/HISTORY.rst
index 1f983c0344..c86db38acb 100644
--- a/HISTORY.rst
+++ b/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)
 ==================
diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
index 67e9ccbbd9..1964cdd3a8 100644
--- a/mayan/apps/appearance/static/appearance/css/base.css
+++ b/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;
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js
index 6a295c4c2d..38b219464c 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_app.js
+++ b/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');
         });
     }
 
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index c197e1c4ec..9766d35cd4 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/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>