Post

Replies

Boosts

Views

Activity

My SwiftUI menu item renders differently in a MenuBarExtra / NSStatusBar
Hi, I'm working on an app that will mostly live in the menu bar. I'm trying to make a menu item that looks similar to the Tailscale app's menu: Note: I'm inspired by how Tailscale's menu is rendered: I have made a View that shows my avatar, name, and optionally the company I work for: import SwiftUI struct MenuWhoAmI: View { var username: String var binding: String? var body: some View { HStack { AsyncImage(url: URL(string: "https://avatars.githubusercontent.com/u/76716")!){ image in image.resizable().scaledToFit() } placeholder: { ProgressView() } .clipShape(Circle()) VStack(alignment: .leading) { Text(username) if let binding = binding { Text("\(binding)").foregroundStyle(.secondary) } } } } } #Preview { VStack(alignment: .leading) { MenuWhoAmI(username: "grahamc").padding() Divider() MenuWhoAmI(username: "grahamc", binding: "DeterminateSystems").padding() }.padding() } I tried using it in my menu bar: import SwiftUI @main struct DeterminateApp: App { var body: some Scene { MenuBarExtra("Determinate", image: "MenuIcon") { MenuWhoAmI(username: "grahamc") Button("Two") {} Button("Three") {} Divider() Button("Quit") { NSApplication.shared.terminate(nil) }.keyboardShortcut("q") }.menuBarExtraStyle(.menu) } } and it renders differently: After reading the forums and documentation, I understood the MenuBarExtra only renders certain elements. I then tried to use an NSStatusBar with an AppDelegate: import AppKit import SwiftUI @main struct DeterminateApp: App { @NSApplicationDelegateAdaptor private var appDelegate: AppDelegate var body: some Scene { Window("Authentication", id: "login") {} } } class AppDelegate: NSObject, NSApplicationDelegate, ObservableObject { private var statusItem: NSStatusItem! func applicationDidFinishLaunching(_ notification: Notification) { statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength) if let button = statusItem.button { button.image = NSImage(named: NSImage.Name("MenuIcon")) } statusItem.menu = NSHostingMenu(rootView: Group { Button(action: { print("hi") }) { MenuWhoAmI(username: "grahamc") } }) } } and still, the avatar/name doesn't render like I'd expect, missing the circle clipping: ...and I'm a bit mystified. How can I make this menu render the way I'm trying for? Thank you!
1
0
165
1w