Add side bar location in settings (left/right) (#396)

* Allow side bar on right side

* Panel on the right

src/components/sidebar/SideBarIcon.vue

@@ -70,8 +70,13 @@ const shouldShowBadge = computed(() => !!overlayValue.value)
   border-radius: 0;
 }
 
-.side-bar-button.side-bar-button-selected,
-.side-bar-button.side-bar-button-selected:hover {
+.comfyui-body-left .side-bar-button.side-bar-button-selected,
+.comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
   border-left: 4px solid var(--p-button-text-primary-color);
 }
+
+.comfyui-body-right .side-bar-button.side-bar-button-selected,
+.comfyui-body-right .side-bar-button.side-bar-button-selected:hover {
+  border-right: 4px solid var(--p-button-text-primary-color);
+}
 </style>

src/components/sidebar/SideToolBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport to=".comfyui-body-left">
+  <teleport :to="teleportTarget">
     <nav class="side-tool-bar-container">
       <SideBarIcon
         v-for="tab in tabs"
@@ -40,12 +40,21 @@ import SideBarThemeToggleIcon from './SideBarThemeToggleIcon.vue'
 import SideBarSettingsToggleIcon from './SideBarSettingsToggleIcon.vue'
 import { computed, onBeforeUnmount } from 'vue'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
+import { useSettingStore } from '@/stores/settingStore'
 import {
   CustomSidebarTabExtension,
   SidebarTabExtension
 } from '@/types/extensionTypes'
 
 const workspaceStore = useWorkspaceStore()
+const settingStore = useSettingStore()
+
+const teleportTarget = computed(() =>
+  settingStore.get('Comfy.SideBar.Location') === 'left'
+    ? '.comfyui-body-left'
+    : '.comfyui-body-right'
+)
+
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed<SidebarTabExtension | null>(() => {
   const tabId = workspaceStore.activeSidebarTab