Add a show/hide toggle system for the left pane

Signed-off-by: tdruez <[email protected]>

Author: tdruez

scanpipe/templates/scanpipe/resource_tree.html

@@ -20,6 +20,7 @@
   <div id="resource-tree-container" class="container is-fluid p-0">
     <div class="resizable-container is-flex">
       <div id="left-pane" class="left-pane px-2">
+        {% include "scanpipe/tree/resource_left_pane_header.html" only %}
         <div id="resource-tree">
           {% include "scanpipe/tree/resource_left_pane_tree.html" with children=children path=path %}
         </div>
@@ -33,7 +34,7 @@
             hx-target="this">
           </div>
         {% else %}
-          {% include "scanpipe/tree/resource_right_pane_table.html" %}
+          {% include "scanpipe/tree/resource_right_pane.html" %}
         {% endif %}
       </div>
     </div>
@@ -140,6 +141,22 @@
           document.body.style.userSelect = '';
         }
       });
+
+      // Show/hide left pane
+      const hidePaneButton = document.getElementById('hide-left-pane');
+      hidePaneButton.addEventListener('click', function() {
+        leftPane.classList.add('is-hidden');
+        resizer.classList.add('is-hidden');
+
+        const expandPaneButton = document.getElementById('expand-left-pane');
+        expandPaneButton.classList.remove('is-hidden');
+        expandPaneButton.addEventListener('click', function() {
+          leftPane.classList.remove('is-hidden');
+          resizer.classList.remove('is-hidden');
+          expandPaneButton.classList.add('is-hidden');
+        });
+      });
+
     });
   </script>
 {% endblock %}

scanpipe/templates/scanpipe/tree/resource_left_pane_header.html

@@ -0,0 +1,8 @@
+<div class="is-flex is-align-items-center mb-2">
+  <button id="hide-left-pane" class="button is-light px-2">
+    <i class="fa-solid fa-square-caret-left"></i>
+  </button>
+  <div class="is-size-5 has-text-weight-semibold ml-2">
+    Resources
+  </div>
+</div>

scanpipe/templates/scanpipe/tree/resource_path_breadcrumb.html

@@ -1,4 +1,7 @@
 <nav class="breadcrumb is-flex is-align-items-center" aria-label="breadcrumbs">
+  <button id="expand-left-pane" class="button is-light px-2 mr-2 is-hidden">
+    <i class="fa-solid fa-square-caret-right"></i>
+  </button>
   <ul>
     {% for subpath, segment in path_segments %}
       {% if not forloop.last %}