iPadOS Sidebar Split Navigation View with SwiftUI

I'm struggling to find the correct way to use the new Sidebar on iPadOS with Split View Controllers (or NavigationView as it's called in SwiftUI).

If you want a Sidebar with a layout like so:
Sidebar -> Main View -> Detail View
It can be achieved with the following code:
Code Block swift
NavigationView {
SidebarView()
Text("Main")
Text("Detail")
}

Then SwiftUI will always expect that the main and detail views can be filled.

Ideally, for some but not all of the side bar items, I'd like a structure of:
Sidebar -> Main View
Note the detail view is missing, so ideally the Main View would take up the remainder of the screen. This is not what happens currently - SwiftUI still leaves a lot of space for a detail view.

By writing the initial Navigation View like so we lose the ability to have that detail even for the views that want it:
Code Block swift
NavigationView {
SidebarView()
Text("Main")
}


I've tried doing things such as using the modifier .navigationViewStyle(StackNavigationViewStyle()) specifically on the detail view that I don't want to appear in a split view style, to no avail.

My question is, based on the example code below, is it possible to have DetailNoSplitView take up the full width of the screen, and not be arranged in a split view style layout like it is currently?

The full, runnable code is below:
Code Block swift
import SwiftUI
struct ContentView: View {
    var body: some View {
        NavigationView {
            SidebarView()
            Text("Main")
            Text("Detail")
        }
    }
}
struct SidebarView: View {
    var body: some View {
        List {
            NavigationLink(destination: DetailSplitView(number: 1)) {
                Label("First", systemImage: "1.circle")
            }
            NavigationLink(destination: DetailSplitView(number: 2)) {
                Label("Second", systemImage: "2.circle")
            }
            NavigationLink(destination: DetailNoSplitView(number: 3)) {
                Label("Third", systemImage: "3.circle")
            }
        }
        .listStyle(SidebarListStyle())
    }
}
// Working as expected in a split view context
struct DetailSplitView: View {
    let number: Int
    var body: some View {
        VStack(spacing: 20) {
            Text("Main view for: \(number)")
            NavigationLink(destination: Text("Detail view for: \(number)")) {
                Text("Press here for detail")
            }
        }
    }
}
// Ideally want this to take up the whole screen (not just one side of a split view)
struct DetailNoSplitView: View {
    let number: Int
    var body: some View {
        Text("Detail view for \(number)")
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


I copied your code and removed the Detail-part.

Code Block
struct ContentView: View {
  var body: some View {
    NavigationView {
      SidebarView()
      Text("Main")
    }
  }
}


On iPad portrait mode I have a full screen for Main with a Back-button in the top left corner to let the sidebar come in as a fly-over. If I put the iPad in landscape mode. I get about 1 third sidebar and 2 third main. I can click the sidebar icon in the top left to dismiss the sidebar and get a full screen Main view. From your story this is the expected behavior is it not?

Build on xCode Version 12.0 beta (12A6159)
Simulator iPad Pro (11-inch) (2nd generation)
Hey @crystalminds - thanks for the response. Not quite the outcome I'm after. Ideally the First and Second would still show in a "Split View" style - (like the old UISplitViewController in UIKit) and only the third would behave like you've described. Not convinced it's possible in SwiftUI but I'm trying to achieve it. 😬
I'm also trying to figure out how to do this. No luck as of yet.
@crystalminds in your example the app only shows 2 colums on every sidebar item, which is not the intended behavior. It should show the sidebar + 2 columns on sidebar item one and two. On sidebar item 3 there should only be the sidebar + 1 column.

I have filed a radar/feedback for this and included all the information in this repository:
https://github.com/JulianKahnert/NavigationExample
Would you mind sharing the feedback/radar number to duplicate the radar?

I am currently having the exact same problem.
Have you been able to find a way to have both only master and master with detail? I’m having the same issue. Tried different layouts but without luck.
iPadOS Sidebar Split Navigation View with SwiftUI
 
 
Q