UI change: draggable 1

Author: simonredfern

package-lock.json

@@ -54,6 +54,7 @@
     "routing-controllers": "^0.10.4",
     "socket.io": "^4.7.5",
     "socket.io-client": "^4.7.5",
+    "splitpanes": "^4.0.4",
     "typedi": "^0.10.0",
     "uuid": "^9.0.1",
     "vanilla-jsoneditor": "^2.3.3",

package.json

@@ -65,7 +65,6 @@ main {
 .search-nav {
   background-color: #f8f9fb;
   padding: 8px 0 8px 8px;
-  border-right: solid 1px var(--el-menu-border-color);
 }
 
 .el-notification__content {

src/assets/main.css

@@ -30,6 +30,8 @@ import SearchNav from '../components/SearchNav.vue'
 import Menu from '../components/Menu.vue'
 import AutoLogout from '../components/AutoLogout.vue'
 import ChatWidget from '../components/ChatWidget.vue'
+import { Splitpanes, Pane } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
 import { onMounted, ref, computed } from 'vue'
 import {  getCurrentUser } from '../obp'
 import { useRoute } from 'vue-router'
@@ -53,12 +55,14 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
 <template>
 
   <AutoLogout v-if=isLoggedIn />
-  <el-container class="root">
-    <el-aside class="search-nav" width="20%">
-      <!--Left-->
-      <SearchNav />
-    </el-aside>
-    <el-main>
+  <Splitpanes class="root">
+    <Pane :size="20" :min-size="10" :max-size="40">
+      <div class="search-nav">
+        <!--Left-->
+        <SearchNav />
+      </div>
+    </Pane>
+    <Pane :size="80">
       <el-container class="main">
         <!--<el-header class="collections">
           <Collections />
@@ -82,14 +86,13 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
         </el-footer>-->
       </el-container>
       <ChatWidget v-if="isChatbotEnabled" />
-    </el-main>
-  </el-container>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <style>
 .root {
   height: 100%;
-  /* min-height: 100vh; */
 }
 .summary {
   max-height: 100%;
@@ -118,4 +121,15 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
   padding-left: 20px;
   padding-right: 20px;
 }
+
+/* Splitpanes handle styling */
+.splitpanes--vertical > .splitpanes__splitter {
+  width: 5px;
+  background-color: #dcdfe6;
+  border: none;
+  cursor: col-resize;
+}
+.splitpanes--vertical > .splitpanes__splitter:hover {
+  background-color: #409eff;
+}
 </style>