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()
}