I'm trying to build a custom designed sidebar for iPad that requires there to be no gray divider to separated the navigation and the detail view.
I'm surprised at how unsuccessful I have been given how simple this is but have still found no luck.
My current code:
struct ContentView: View {
var body: some View {
NavigationSplitView {
VStack {
//code...
}
.background(.white)
.navigationSplitViewColumnWidth(70)
.navigationBarHidden(true)
.edgesIgnoringSafeArea(.vertical)
} detail: {
//code...
}
}
}
I've attempted to add an overlay of a white rectangle to cover the divider but it just goes behind the existing border. I like to think there is a simpler solution anyways.
Check out ContainerBackgroundPlacement. In particular, try something like:
NavigationSplitView {
// … sidebar …
.containerBackground(.thinMaterial, for: .navigation)
.containerBackground(Color.green, for: .navigationSplitView)
} detail: {
// … detail …
.containerBackground(.thickMaterial, for: .navigation)
}