From b5f2d334d9e91141b469226f3286083c9e18373f Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 12 Aug 2024 22:27:35 -0400
Subject: [PATCH] Add sidebar size setting (normal/small) (#397)

* Add sidebar size setting (normal/small)

* Set default small sidebar size for small window
---
 src/components/sidebar/SideToolBar.vue | 10 +++++++++-
 src/stores/settingStore.ts             |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/SideToolBar.vue b/src/components/sidebar/SideToolBar.vue
index a7dca67217..67461df35a 100644
--- a/src/components/sidebar/SideToolBar.vue
+++ b/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>
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 32af3d76cd..db1336d4c0 100644
--- a/src/stores/settingStore.ts
+++ b/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) {