SwiftUI navigation bar appearance and functionality when custom popup shows - ios

Question

I am trying to show a custom popup, and while that is showing, I'd need to disable and darken the background just as it is done in the built-in alert functionality. However, when there is a navigation bar in the view, the coloured layer can't be put on top of the navigation bar.
The desired outcome would be just as it is done in the built-in Alert modifier, to darken the whole background (with navbar), while disabling the ability to interact with the background (and the navbar).
Is there a way to achieve the same functionality and appearance as in with the built-in Alert modifier?
Example project code
import SwiftUI
struct ContentView: View {
#State private var isShowingPopup = false
var body: some View {
NavigationView {
VStack {
Text("Just a random text")
.padding(.bottom, 100)
Button("Show popup") {
isShowingPopup = true
}
}
.showPopup(isActive: isShowingPopup, action: { isShowingPopup = false })
.navigationBarTitle("Test navbar", displayMode: .inline)
.navigationBarItems(
trailing: Button(
action: { print("profile tapped")},
label: {
Text("Profile")
}
)
)
}
}
}
extension View {
func showPopup(
isActive: Bool,
action: #escaping () -> Void
) -> some View {
ZStack {
self
if isActive {
Color.black
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)
.opacity(0.51)
.zIndex(1)
Popup(action: action)
.zIndex(2)
}
}
}
}
struct Popup: View {
let action: () -> Void
var body: some View {
VStack {
Text("This is a popup")
.foregroundColor(.black)
.padding()
Button("OK", action: action)
.foregroundColor(.blue)
}
.background(Color.white)
.cornerRadius(8)
}
}
Thanks for your help!

Answer 1

Add in the last. Add showPopup in the last of the NavigationView
NavigationView {
VStack {
Text("Just a random text")
.padding(.bottom, 100)
Button("Show popup") {
isShowingPopup = true
}
}
.navigationBarTitle("Test navbar", displayMode: .inline)
.navigationBarItems(
trailing: Button(
action: { print("profile tapped")},
label: {
Text("Profile")
}
)
)
}
.showPopup(isActive: isShowingPopup, action: { isShowingPopup = false }) //<---Here