Post

Replies

Boosts

Views

Activity

Tahoe sidebar - icon sizing is wrong
Hi there. I am trying to figure out how to make a macOS Tahoe app in SwiftUI with a sidebar. The problem I’m having is that the icons are the wrong size. If you visually compare the resulting sidebar with any built-in macOS app (Finder, Notes, Mail, Music, etc.) the built-in apps all have larger icons and the spacing is different from my SwiftUI app, which has too small icons and (I think) wrong spacing. I am trying to figure out what SwiftUI code I need to write to get a sidebar that looks the same as the other built-in macOS Tahoe apps. It’s also important to note that Tahoe sidebars have larger icons at the top level, and in cases where the items have a disclosure triangle with additional items nested within, the nested icons have smaller icons. I have not figured out how to properly replicate this effect either. I have spent quite a lot of time on trial-and-error with various combinations of .frame() and .font() modifiers. However, none of the results look quite right to me, and besides that, I think it is fundamentally the wrong approach; the UI or OS should be handling the sizing and spacing automatically, I shouldn’t have to specify it manually, as this is likely to break in past and future OS versions (and it never really looks exactly right in the first place). I am hoping there is some missing modifier that I am unaware of, which would solve this; or perhaps, some fundamental aspect of making lists in sidebars that I have missed. I would very much appreciate any advice. If you drop my code below into a new Xcode project, and compare it to a Finder window, you should be able to easily see the problem. import SwiftUI struct ContentView: View { var body: some View { splitView } @ViewBuilder var splitView: some View { NavigationSplitView { sidebar } detail: { helloWorld } } @ViewBuilder var sidebar: some View { List { NavigationLink { helloWorld } label: { Label("Test", systemImage: "book") } NavigationLink { helloWorld } label: { Label("Test 2", systemImage: "folder") } NavigationLink { helloWorld } label: { Label("Test 3", systemImage: "house") } DisclosureGroup( content: { NavigationLink { helloWorld } label: { Label("Test", systemImage: "book") } NavigationLink { helloWorld } label: { Label("Test 2", systemImage: "folder") } NavigationLink { helloWorld } label: { Label("Test 3", systemImage: "house") } }, label: { Label("Test 4", systemImage: "document") } ) } } @ViewBuilder var helloWorld: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text("Hello, world!") } .padding() } } #Preview { ContentView() }
Topic: UI Frameworks SubTopic: SwiftUI Tags:
1
0
87
Jan ’26