diff --git a/src/features/settings/components/tabs/appearance-settings.tsx b/src/features/settings/components/tabs/appearance-settings.tsx index 54656790..47bef074 100644 --- a/src/features/settings/components/tabs/appearance-settings.tsx +++ b/src/features/settings/components/tabs/appearance-settings.tsx @@ -17,6 +17,7 @@ import { FontSelector } from "@/ui/font-selector"; import Section, { SettingRow } from "@/ui/section"; import Select from "@/ui/select"; import Switch from "@/ui/switch"; +import { IS_MAC } from "@/utils/platform"; export const AppearanceSettings = () => { const { settings, updateSetting } = useSettingsStore(); @@ -238,21 +239,23 @@ export const AppearanceSettings = () => { /> - updateSetting("nativeMenuBar", getDefaultSetting("nativeMenuBar"))} - canReset={settings.nativeMenuBar !== getDefaultSetting("nativeMenuBar")} - > - { - updateSetting("nativeMenuBar", checked); - invoke("toggle_menu_bar", { toggle: checked }); - }} - size="sm" - /> - + {IS_MAC && ( + updateSetting("nativeMenuBar", getDefaultSetting("nativeMenuBar"))} + canReset={settings.nativeMenuBar !== getDefaultSetting("nativeMenuBar")} + > + { + updateSetting("nativeMenuBar", checked); + invoke("toggle_menu_bar", { toggle: checked }); + }} + size="sm" + /> + + )} { className="relative z-50 flex h-10 select-none items-start justify-between bg-secondary-bg/70 pt-2 pr-3 pl-[96px] backdrop-blur-sm" > {/* Left side: keep clear of traffic lights */} -
- {!settings.nativeMenuBar && ( +
+ {!settings.nativeMenuBar && !settings.compactMenuBar && ( )} + {!settings.nativeMenuBar && settings.compactMenuBar && ( +
+ + + + +
+ )} { > {/* Left side */}
- {!settings.nativeMenuBar && ( + {!settings.nativeMenuBar && !settings.compactMenuBar && ( )} {/* Menu bar button */} {!settings.nativeMenuBar && settings.compactMenuBar && ( - - - +
+ + + + +
)}
diff --git a/src/features/window/menu-bar/window-menu-bar.tsx b/src/features/window/menu-bar/window-menu-bar.tsx index 5ffc0809..b35e6f22 100644 --- a/src/features/window/menu-bar/window-menu-bar.tsx +++ b/src/features/window/menu-bar/window-menu-bar.tsx @@ -15,9 +15,10 @@ import Submenu from "./submenu"; interface Props { activeMenu: string | null; setActiveMenu: React.Dispatch>; + compactFloating?: boolean; } -const CustomMenuBar = ({ activeMenu, setActiveMenu }: Props) => { +const CustomMenuBar = ({ activeMenu, setActiveMenu, compactFloating = false }: Props) => { const { settings } = useSettingsStore(); const [themes, setThemes] = useState([]); const menuBarRef = useRef(null); @@ -213,6 +214,10 @@ const CustomMenuBar = ({ activeMenu, setActiveMenu }: Props) => { className={cn( "z-[10030] flex h-7 items-center gap-1 rounded-full border border-border bg-primary-bg/70 px-1 py-0.5", settings.compactMenuBar && + compactFloating && + "absolute top-[calc(100%+4px)] left-0 rounded-2xl border-border bg-primary-bg/95 shadow-xl backdrop-blur-sm", + settings.compactMenuBar && + !compactFloating && "absolute inset-0 h-full rounded-none border-none bg-transparent px-2 py-0", )} >