I am using a NavigationSplitView because of its nice sidebar, toolbar, detail layout.
In portrait this works nicely. However in landscape there is this undesirable side effect where the sidebar pushes the content when I wish it looked more like the sidebar was going over the content.
Is there a way to avoid this?
I have tried a Z stack but I can't get the background to be transparent.
Overlay on the detail
works decently however I cannot avoid the content translating a bit.
struct ContentView: View {
var body: some View {
ZStack {
NavigationSplitView {
List {
Text("Sidebar")
.listStyle(SidebarListStyle())
}
.background{
Color.gray.ignoresSafeArea()
}
} detail: {
Text("""
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
""")
}
}
}
}
You can use the .navigationSplitViewStyle() modifier with the .prominentDetail style.
var body: some View {
NavigationSplitView() {
List {
Text("Sidebar")
.listStyle(SidebarListStyle())
}
.background{
Color.gray.ignoresSafeArea()
}
} detail: {
Text("""
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
""")
}
.navigationSplitViewStyle(.prominentDetail)
}
If you want the sidebar to be translucent that is more problematic. There doesn't seem to be a way to access the sidebar background without accessing the underlying UIKit components. The answer to this question seems to propose a solution but it is not recommended.