adding ability to expand the current node

cypress/e2e/nodes_spec.cy.js

@@ -133,6 +133,17 @@ describe('Solution Navigator', () => {
     cy.get('[data-test-node-title]').should('have.text', 'my child node level 1');
   });
 
+  it('expands the node hidding the side panel', () => {
+    cy.visit(`/nodes/${rootNodeUuid}`, {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('NodeStore', JSON.stringify(initialState));
+      },
+    });
+
+    cy.get('[data-test-node-expand]').click();
+    cy.get('.side-panel').should('not.be.visible');
+  });
+
   context('when the node does not exist', () => {
     it('displays a not found message', () => {
       cy.visit('/nodes/62090d47-3104-4d50-b384-54728a0208dd');

specs/views/NodeShow.spec.js

@@ -105,6 +105,15 @@ describe('NodeShow', () => {
     });
   });
 
+  describe('when clicking the expand node button', () => {
+    it('emits a toggle expand event', async () => {
+      const wrapper = createWrapper();
+
+      await wrapper.find('[data-test-node-expand]').trigger('click');
+      expect(wrapper.emitted('toggleExpand')).toBeTruthy();
+    });
+  });
+
   describe('when the node does not exist', () => {
     it('emits a node not found event', () => {
       const wrapper = createWrapper([]);

src/views/HomeIndex.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed } from 'vue';
 import Button from 'primevue/button';
 import NodesArbor from '@/components/NodesArbor.vue';
 import ConfirmDialog from 'primevue/confirmdialog';
@@ -8,6 +9,7 @@ import { useConfirm } from 'primevue/useconfirm';
 
 const router = useRouter();
 const route = useRoute();
+const isSidePanelVisible = ref(true);
 const { addNode, deleteNode } = useNodeStore();
 const confirm = useConfirm();
 
@@ -32,14 +34,18 @@ const deleteConfirmation = (nodeUuid) => {
   });
 };
 
+const gridTemplateColumns = computed(() => {
+  return isSidePanelVisible.value ? 'minmax(400px, 1fr) 3fr' : '1fr';
+});
+
 const handleNodeNotFound = () => {
   router.push({ name: 'node.not-found' });
 };
 </script>
 
 <template>
-  <div class="container">
-    <div class="side-panel">
+  <div class="container" :style="{ 'grid-template-columns': gridTemplateColumns }">
+    <div v-show="isSidePanelVisible" class="side-panel">
       <div class="side-panel-header">
         <Button
           data-test-create-node
@@ -56,6 +62,7 @@ const handleNodeNotFound = () => {
       :key="route.path"
       @delete="deleteConfirmation"
       @node-not-found="handleNodeNotFound"
+      @toggle-expand="isSidePanelVisible = !isSidePanelVisible"
     />
     <ConfirmDialog />
   </div>
@@ -64,7 +71,6 @@ const handleNodeNotFound = () => {
 <style>
 .container {
   display: grid;
-  grid-template-columns: minmax(400px, 1fr) 3fr;
   grid-column-gap: 10px;
 }
 .side-panel {

src/views/NodeShow.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['delete', 'nodeNotFound']);
+const emit = defineEmits(['delete', 'nodeNotFound', 'toggleExpand']);
 
 const { findNode, refreshUpdatedAt, addChildNode, getRootNode } = useNodeStore();
 const editingTitle = ref(false);
@@ -56,6 +56,14 @@ const handleAddChildNode = () => {
 <template>
   <div v-if="node" class="active-node">
     <div class="active-node-panel-header">
+      <Button
+        data-test-node-expand
+        class="expand-button"
+        icon="pi pi-arrows-h"
+        aria-label="Expand"
+        severity="secondary"
+        @click="emit('toggleExpand')"
+      />
       <Button
         data-test-node-delete
         icon="pi pi-trash"
@@ -147,6 +155,9 @@ const handleAddChildNode = () => {
   display: flex;
   justify-content: flex-end;
 }
+.expand-button {
+  margin-right: auto;
+}
 .child-nodes-actions {
   display: flex;
   justify-content: flex-start;