Restore top/bottom menu location setting (#1123)

* Rename floating to top

* Adjust teleport target

* Fix dropdown direction for bottom menubar

* Fix z-index

src/assets/css/style.css

@@ -126,7 +126,8 @@ body {
   /* Span across all columns */
   grid-column: 1/-1;
   grid-row: 3;
-  z-index: 10;
+  /* Bottom menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
+  z-index: 1000;
   display: flex;
   flex-direction: column;
 }

src/components/topbar/TopMenubar.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport to=".comfyui-body-top">
+  <teleport :to="teleportTarget">
     <div
       ref="topMenuRef"
       class="comfyui-menu flex items-center"
@@ -11,7 +11,9 @@
         :model="items"
         class="top-menubar border-none p-0 bg-transparent"
         :pt="{
-          rootList: 'gap-0 flex-nowrap w-auto'
+          rootList: 'gap-0 flex-nowrap w-auto',
+          submenu: `dropdown-direction-${dropdownDirection}`,
+          item: 'relative'
         }"
       />
       <Divider layout="vertical" class="mx-2" />
@@ -42,6 +44,15 @@ const workflowTabsPosition = computed(() =>
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
+const teleportTarget = computed(() =>
+  settingStore.get('Comfy.UseNewMenu') === 'Top'
+    ? '.comfyui-body-top'
+    : '.comfyui-body-bottom'
+)
+const dropdownDirection = computed(() =>
+  settingStore.get('Comfy.UseNewMenu') === 'Top' ? 'down' : 'up'
+)
+
 const menuItemsStore = useMenuItemStore()
 const items = menuItemsStore.menuItems
 
@@ -99,4 +110,8 @@ eventBus.on((event: string, payload: any) => {
 .top-menubar .p-menubar-item-link svg {
   display: none;
 }
+
+.p-menubar-submenu.dropdown-direction-up {
+  @apply top-auto bottom-full flex-col-reverse;
+}
 </style>

src/stores/coreSettings.ts

@@ -376,10 +376,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Use new menu and workflow management.',
     experimental: true,
     type: 'combo',
-    options: ['Disabled', 'Floating'],
+    options: ['Disabled', 'Top', 'Bottom'],
     migrateDeprecatedValue: (value: string) => {
-      if (['Top', 'Bottom'].includes(value)) {
-        return 'Floating'
+      // Floating is now supported by dragging the docked actionbar off.
+      if (value === 'Floating') {
+        return 'Top'
       }
       return value
     }

src/types/apiTypes.ts

@@ -494,7 +494,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.SnapToGrid.GridSize': z.number(),
       'Comfy.TextareaWidget.FontSize': z.number(),
       'Comfy.TextareaWidget.Spellcheck': z.boolean(),
-      'Comfy.UseNewMenu': z.enum(['Disabled', 'Floating']),
+      'Comfy.UseNewMenu': z.enum(['Disabled', 'Top', 'Bottom']),
       'Comfy.TreeExplorer.ItemPadding': z.number(),
       'Comfy.Validation.Workflows': z.boolean(),
       'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),