Add menu button to toggle focus mode (#1446)

* Add focus mode toggle button

* handle menu position

* nit

src/components/topbar/TopMenubar.vue

@@ -3,7 +3,7 @@
     <div
       ref="topMenuRef"
       class="comfyui-menu flex items-center"
-      v-show="betaMenuEnabled"
+      v-show="betaMenuEnabled && !workspaceState.focusMode"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
@@ -15,11 +15,19 @@
       <div class="comfyui-menu-right" ref="menuRight"></div>
       <Actionbar />
       <BottomPanelToggleButton />
+      <Button
+        icon="pi pi-bars"
+        severity="secondary"
+        text
+        v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
+        @click="workspaceState.focusMode = true"
+      />
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
@@ -37,9 +45,7 @@ const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
 const betaMenuEnabled = computed(
-  () =>
-    settingStore.get('Comfy.UseNewMenu') !== 'Disabled' &&
-    !workspaceState.focusMode
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.UseNewMenu') === 'Top'