Search code examples
iosswiftui

NavigationSplitView sidebar goes over detail in iPad in landscape. Is there a way to avoid this?


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

Sidebar pushes content


Solution

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

    enter image description here

    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.