* Code for task#99371

module/doc/css/tablecontents.css

@@ -6,7 +6,7 @@
 .h-full {height: 100%;}
 .w-full {width: 100%;}
 .overflow-x-auto {overflow-x: auto;}
-main-content {padding-top: 0; padding-bottom: 0;}
+.main-content {padding-top: 0; padding-bottom: 0;}
 .main-content #createDropdown {display: inline-block;}
 .main-content #createDropdown ul {position: absolute;}
 #pageNav .dropdown-menu {max-height: inherit;}
@@ -54,7 +54,11 @@ li.drag-shadow ul {display: none!important;}
 .flex-center {display: flex; align-items: center; justify-content: space-between;}
 .tree li>.list-toggle {top: 4px;}
 
-.spliter {flex: 0 0 15px;}
+/* css for sidebar */
+.sidebar-toggle > .icon {position: absolute; top: 50%; left: -1px; width: 12px; height: 30px; margin-top: -10px; line-height: 30px; color: #fff; text-align: center; background: #7dcdfe; border-radius: 6px;}
+.col-spliter:after {display: none;}
+
+.spliter {flex: 0 0 12px;}
 
 #mainContent .table-empty-tip > p, #createDocs {display: inline-block;}
 .createDropdown a.btn-primary, .createDropdown a.btn-info {border-right: 1px solid rgba(255,255,255,0.2);}

module/doc/js/tablecontents.js

@@ -309,4 +309,20 @@ $(function()
     }
 
     initSplitRow();
-})
+
+    $('#spliter').on('click', '.icon', function()
+    {
+        if($(this).hasClass('isHide'))
+        {
+            $(this).addClass('icon-angle-left');
+            $(this).removeClass('icon-angle-right isHide');
+            $('#sideBar').removeClass('hidden');
+        }
+        else
+        {
+            $(this).removeClass('icon-angle-left');
+            $(this).addClass('icon-angle-right isHide');
+            $('#sideBar').addClass('hidden');
+        }
+    })
+});

module/doc/view/tablecontents.html.php

@@ -67,10 +67,10 @@
   </div>
 </div>
 <div id='mainContent'class="fade flex split-row">
-  <div id='side-bar' class="panel side side-col col overflow-x-auto flex-none" data-min-width="150">
+  <div id='sideBar' class="panel side side-col col overflow-x-auto flex-none" data-min-width="150">
     <div id="fileTree" class="file-tree"></div>
   </div>
-  <div id="spliter" class="spliter col-spliter"></div>
+  <div id="spliter" class="spliter col-spliter sidebar-toggle"><i class="icon icon-angle-left"></i></div>
   <div class="main-col flex-full col overflow-x-auto flex-auto" data-min-width="500">
     <div class="cell<?php if($browseType == 'bySearch') echo ' show';?>" style="min-width: 400px" id="queryBox" data-module=<?php echo $type . $libType . 'Doc';?>></div>
     <?php