Is there a way to get a sheet on the side over an interactive view with a proper glass background on iPad? Ideally, including being able to drag the sheet between medium/large-height sizes (like a sheet with presentationDetents on iPhone), similar to the Maps app:
I tried the NavigationSplitView like in the NavigationCookbook example. This is somewhat like it, but it's too narrow (sidebar-like) and doesn't get the full navigation bar:
I also played around with .sheet and .presentationDetents and the related modifiers, thinking I could make the sheet appear to the side; but no luck here. It seems to have all the correct behaviors, but it's always presented form-like in the center:
Example code for the sheet:
import SwiftUI
import MapKit
struct ContentView: View {
var body: some View {
Map()
.sheet(isPresented: .constant(true)) {
NavigationStack {
VStack {
Text("Hello")
NavigationLink("Show Foo") {
Text("Foo")
.navigationTitle("Foo")
.containerBackground(Color.clear, for: .navigation)
}
}
}
.presentationDetents([.medium, .large])
.presentationBackgroundInteraction(.enabled)
}
}
}
I also tried placing the NavigationStack as an overlay and putting a .glassEffect behind it. From the first sight, this looks okay-ish on beta 3, but seems prone to tricky gotchas and edge cases around the glass effects and related transitions. Seems like not a good approach to me, building such navigational containers myself has been a way too big time-sink for me in the past...
Anyway, example code for the overlay approach:
import SwiftUI
import MapKit
struct ContentView: View {
var body: some View {
Map()
.overlay(alignment: .topLeading) {
NavigationStack {
VStack {
Text("Hello")
NavigationLink("Show Foo") {
ScrollView {
VStack {
ForEach(1...30, id: \.self) { no in
Button("Hello world") {}
.buttonStyle(.bordered)
}
}
.frame(maxWidth: .infinity)
}
.navigationTitle("Foo")
.containerBackground(Color.clear, for: .navigation)
}
}
.containerBackground(Color.clear, for: .navigation)
}
.frame(width: 400)
.frame(height: 600)
.glassEffect(.regular, in: .rect(cornerRadius: 22))
.padding()
}
}
}
Do I miss something here or is this not possible currently with built-in means of the SwiftUI API?
