diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index f4e3bbeedc..648d24e7d4 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -669,7 +669,8 @@ a, a:hover { color: #ec8000; }
 }
 
 .side-nav-con [class^="sf2-icon-"],
-.side-nav-con [class^="sf3-font-"] {
+.side-nav-con [class^="sf3-font-"],
+.side-nav-con [class^="fas"] {
     display:inline-block;
     width:2.625rem;
     margin-right:0.325rem;
diff --git a/seahub/help/templates/help/base.html b/seahub/help/templates/help/base.html
index 3c17c1b435..acaee73893 100644
--- a/seahub/help/templates/help/base.html
+++ b/seahub/help/templates/help/base.html
@@ -10,13 +10,35 @@
 .side-nav-con .first-hd {
     margin-top: 0;
 }
+.seafile-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    outline: 0;
+    background-color: #000;
+}
+.seafile-mask__shown {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: block;
+    opacity: 0.5;
+}
 </style>
 {% endblock %}
+{% block side-panel-menu %}
+<span class="sf2-icon-menu side-nav-toggle d-block d-md-none" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
+{% endblock %}
 {% block main_class %}d-flex ovhd{% endblock %}
+
 {% block main_content %}
 <div class="row flex-1 d-flex">
     <div class="side-textnav col-md-3 side-nav help-side-nav">
-        <div class="hidden-md-up logo-container">
+        <div class="d-block d-md-none logo-container">
             <a href="{{ SITE_ROOT }}">
                 <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
             </a>
@@ -82,6 +104,11 @@
     <div class="help-con article col-md-9 ov-auto flex-1" id="right-panel">{% block help_con %}{% endblock %}</div>
 </div>
 {% endblock %}
+
+{% block extra-hidden-dom %}
+<div class="seafile-mask"></div>
+{% endblock %}
+
 {% block extra_script %}
 <script type="text/javascript">
 $('.side-nav li').each(function(index) {
@@ -106,6 +133,7 @@ $('.side-nav li').each(function(index) {
       }
     }
 });
+
 $('.help-side-nav .tab a').on('click', function() {
   var scrollTop = $('.side-nav').scrollTop();
   if (scrollTop > 0) {
@@ -116,5 +144,18 @@ $('.help-side-nav .tab a').on('click', function() {
     }
   }
 });
+
+$('#logo').addClass('d-none d-md-block');
+
+$('#js-toggle-side-nav').on('click', function(event) {
+    $('.side-nav').toggleClass('side-nav-shown');
+    $('.seafile-mask').toggleClass('seafile-mask__shown');
+    return false;
+});
+
+$('.seafile-mask').on('click', function() {
+    $('.side-nav').toggleClass('side-nav-shown');
+    $('.seafile-mask').toggleClass('seafile-mask__shown');
+});
 </script>
 {% endblock %}
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 9792c15528..c3d11279b7 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -22,7 +22,6 @@
 {% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %} 
 {% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
 </head>
-
 <body>
     <div id="wrapper" class="{{ LANGUAGE_CODE }} d-flex fd-col h100">
         {% block info_bar_message %}
@@ -38,7 +37,8 @@
             <a href="{{ SITE_ROOT }}" id="logo">
                 <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
             </a>
-            <span class="sf2-icon-menu side-nav-toggle hidden-md-up hide" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
+            {% block side-panel-menu %}
+            {% endblock side-panel-menu %}
 
             {% block header_right %}
             {% if not request.user.is_authenticated %}
@@ -86,6 +86,9 @@
             <button id="confirm-yes">{% trans "Yes" %}</button>
             <button class="simplemodal-close">{% trans "No" %}</button>
         </div>
+        
+        {% block extra-hidden-dom %}
+        {% endblock %}
 </div><!-- wrapper -->
 <script type="text/javascript">
 var SEAFILE_GLOBAL = {
@@ -193,26 +196,6 @@ $('#info-bar .close').on('click', function() {
     });
 })();
 {% endif %}
-
-if ($('.side-nav').length) {
-    $('#logo').addClass('hidden-sm-down');
-    $('#js-toggle-side-nav').removeClass('hide');
-}
-$('#js-toggle-side-nav').on('click', function() {
-    $('.side-nav').addClass('side-nav-shown');
-    $('').modal({
-        overlayClose: true,
-        onClose: function() {
-            $('.side-nav').removeClass('side-nav-shown');
-            $.modal.close();
-        }});
-    $('#simplemodal-container').css({'display':'none'});
-    return false;
-});
-$('.js-close-side-nav').on('click', function() {
-    $('.side-nav').removeClass('side-nav-shown');
-    return false;
-});
 </script>
 {% block extra_script %}{% endblock %}
 </body>
