From b5d3b6468aef98dfd3d6eccdc035ef1784b0d6b0 Mon Sep 17 00:00:00 2001
From: guofeilong <guofeilong@easycorp.ltd>
Date: Tue, 21 Mar 2023 17:16:34 +0800
Subject: [PATCH] * Code for task#99371

---
 module/doc/css/tablecontents.css       |  8 ++++++--
 module/doc/js/tablecontents.js         | 18 +++++++++++++++++-
 module/doc/view/tablecontents.html.php |  4 ++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/module/doc/css/tablecontents.css b/module/doc/css/tablecontents.css
index 44034927e2..9d0958049e 100644
--- a/module/doc/css/tablecontents.css
+++ b/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);}
diff --git a/module/doc/js/tablecontents.js b/module/doc/js/tablecontents.js
index 86dd1d21ba..cd2e86ad0e 100644
--- a/module/doc/js/tablecontents.js
+++ b/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');
+        }
+    })
+});
diff --git a/module/doc/view/tablecontents.html.php b/module/doc/view/tablecontents.html.php
index a96d245092..a109b9d52f 100644
--- a/module/doc/view/tablecontents.html.php
+++ b/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