Add sidebar size setting (normal/small) (#397)

* Add sidebar size setting (normal/small)

* Set default small sidebar size for small window

Author: huchenlei

src/components/sidebar/SideToolBar.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport :to="teleportTarget">
-    <nav class="side-tool-bar-container">
+    <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
       <SideBarIcon
         v-for="tab in tabs"
         :key="tab.id"
@@ -55,6 +55,10 @@ const teleportTarget = computed(() =>
     : '.comfyui-body-right'
 )
 
+const isSmall = computed(
+  () => settingStore.get('Comfy.SideBar.Size') === 'small'
+)
+
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed<SidebarTabExtension | null>(() => {
   const tabId = workspaceStore.activeSidebarTab
@@ -82,6 +86,10 @@ onBeforeUnmount(() => {
   --sidebar-width: 64px;
   --sidebar-icon-size: 1.5rem;
 }
+:root .small-sidebar {
+  --sidebar-width: 40px;
+  --sidebar-icon-size: 1rem;
+}
 </style>
 
 <style scoped>

src/stores/settingStore.ts

@@ -89,6 +89,14 @@ export const useSettingStore = defineStore('setting', {
         options: ['left', 'right'],
         defaultValue: 'left'
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.SideBar.Size',
+        name: 'Sidebar size',
+        type: 'combo',
+        options: ['normal', 'small'],
+        defaultValue: window.innerWidth < 1600 ? 'small' : 'normal'
+      })
     },
 
     set(key: string, value: any) {