Reverse relationship between splitter overlay and sidebar component

src/App.vue

@@ -2,6 +2,13 @@
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
   <div v-else>
     <NodeSearchboxPopover v-if="nodeSearchEnabled" />
+    <teleport to="#graph-canvas-container">
+      <LiteGraphCanvasSplitterOverlay>
+        <template #side-bar-panel="{ setPanelVisible }">
+          <SideToolBar @change="setPanelVisible($event)" />
+        </template>
+      </LiteGraphCanvasSplitterOverlay>
+    </teleport>
     <SideToolBar />
   </div>
 </template>
@@ -10,6 +17,7 @@
 import { onMounted, onUnmounted, provide, ref } from "vue";
 import NodeSearchboxPopover from "@/components/NodeSearchBoxPopover.vue";
 import SideToolBar from "@/components/sidebar/SideToolBar.vue";
+import LiteGraphCanvasSplitterOverlay from "@/components/LiteGraphCanvasSplitterOverlay.vue";
 import ProgressSpinner from "primevue/progressspinner";
 import {
   NodeSearchService,

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,7 +1,12 @@
 <template>
-  <Splitter class="splitter-overlay">
-    <SplitterPanel class="side-bar-panel" :minSize="10" :size="20">
-      <slot name="side-bar-panel"></slot>
+  <Splitter class="splitter-overlay" :pt:gutter="gutterClass">
+    <SplitterPanel
+      class="side-bar-panel"
+      :minSize="10"
+      :size="20"
+      v-show="sideBarPanelVisible"
+    >
+      <slot name="side-bar-panel" :setPanelVisible="setPanelVisible"></slot>
     </SplitterPanel>
     <SplitterPanel class="graph-canvas-panel" :size="100">
       <div></div>
@@ -12,13 +17,27 @@
 <script setup lang="ts">
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
+import { computed, ref } from "vue";
+
+const sideBarPanelVisible = ref(false);
+const setPanelVisible = (visible: boolean) => {
+  sideBarPanelVisible.value = visible;
+};
+const gutterClass = computed(() => {
+  return sideBarPanelVisible.value ? "" : "gutter-hidden";
+});
 </script>
 
 <style>
 .p-splitter-gutter {
   pointer-events: auto;
 }
+
+.gutter-hidden {
+  display: none !important;
+}
 </style>
+
 <style scoped>
 .side-bar-panel {
   background-color: var(--bg-color);
@@ -34,5 +53,6 @@ import SplitterPanel from "primevue/splitterpanel";
   background-color: transparent;
   pointer-events: none;
   z-index: 10;
+  border: none;
 }
 </style>

src/components/sidebar/SideToolBar.vue

@@ -13,22 +13,15 @@
       </div>
     </nav>
   </teleport>
-  <teleport to="#graph-canvas-container">
-    <LiteGraphCanvasSplitterOverlay v-show="selectedItem !== null">
-      <template #side-bar-panel>
-        <component :is="selectedItem?.component" />
-      </template>
-    </LiteGraphCanvasSplitterOverlay>
-  </teleport>
+  <component :is="selectedItem?.component" />
 </template>
 
 <script setup lang="ts">
 import SideBarIcon from "./SideBarIcon.vue";
 import SideBarThemeToggleIcon from "./SideBarThemeToggleIcon.vue";
 import SideBarSettingsToggleIcon from "./SideBarSettingsToggleIcon.vue";
-import LiteGraphCanvasSplitterOverlay from "@/components/LiteGraphCanvasSplitterOverlay.vue";
 import NodeDetailSideBarItem from "./items/NodeDetailSideBarItem.vue";
-import { markRaw, ref } from "vue";
+import { markRaw, ref, watch } from "vue";
 
 const items = ref([
   { icon: "pi pi-map", component: markRaw(NodeDetailSideBarItem) },
@@ -42,6 +35,11 @@ const onItemClick = (item) => {
   }
   selectedItem.value = item;
 };
+
+const emit = defineEmits(["change"]);
+watch(selectedItem, (newVal) => {
+  emit("change", newVal !== null);
+});
 </script>
 
 <style>