Overlay on top of inline navbar

Question

Is it possible to overlay something on top of an inline nav bar? Here's an example with a popup where you can display and alert and then tap outside the alert to dismiss it.

I'd like the dark background overlay to also cover the nav bar. This works fine for the default large text style nav bar, but when I change it to an inline nav bar, the dark background no longer covers the nav. Is there a workaround for this?

import SwiftUI

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        NavigationView {
            ZStack {
                    Button(action: {
                        isPresented = true
                    }) {
                        Text("Show popup")
                    }
                
                if isPresented {
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color.black.opacity(0.5))
                            .edgesIgnoringSafeArea(.all)
                            .onTapGesture {
                                isPresented = false
                            }
                        
                        Rectangle()
                            .foregroundColor(Color.red)
                            .frame(width: 300, height: 100)
                            .onTapGesture {
                                isPresented = true
                            }
                        Text("Alert!")
                    }
                }
            }
            .navigationBarTitle("Hello", displayMode: .inline)
        }
    }
}

Answer 1

Wrapped NavigationView inside the ZStack.

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        ZStack { // < -- Here
            NavigationView {
                ZStack {
                    Button(action: {
                        isPresented = true
                    }) {
                        Text("Show popup")
                    }
                    
                    
                }
                .navigationBarTitle("Hello", displayMode: .inline)
            }
            if isPresented {
                ZStack {
                    Rectangle()
                        .foregroundColor(Color.black.opacity(0.5))
                        .edgesIgnoringSafeArea(.all)
                        .onTapGesture {
                            isPresented = false
                        }
                    
                    Rectangle()
                        .foregroundColor(Color.red)
                        .frame(width: 300, height: 100)
                        .onTapGesture {
                            isPresented = true
                        }
                    Text("Alert!")
                }
            }
        }
        
    }
}

---

Another way to use overlay.

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        NavigationView {
            ZStack {
                Button(action: {
                    isPresented = true
                }) {
                    Text("Show popup")
                }
            }
            .navigationBarTitle("Hello", displayMode: .inline)
        }.overlay( //<--- Here
            alertView
        )
    }
    
    @ViewBuilder
    private var alertView: some View {
        if isPresented {
            ZStack {
                Rectangle()
                    .foregroundColor(Color.black.opacity(0.5))
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        isPresented = false
                    }
                
                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 300, height: 100)
                    .onTapGesture {
                        isPresented = true
                    }
                Text("Alert!")
            }
        }
    }
}