I would like to overlay some content on all views that are in a NavigationStack. The content I would like to be positioned directly under the navigation bar. In the screenshot below, this is exactly how I want the black bar to look and be positioned on all views in the NavigationStack:

How can this be done and work on iPhone and iPad in portrait and landscape? It appears the only way would be to determine the height of the navigation bar and the top safe area inset but I was not able to get anything to work. The goal of this is to show a progress bar at the top of each view in the NavigationStack so a user could see how far they have progressed in a flow with many views.

The screenshot is showing the first view in a NavigationStack that was presented using .fullScreenCover. Here is the code for the first view in the stack:

struct NavigationStackEntryView: View {
    @StateObject var viewModel = NavigationStackViewModel()
    @Environment(.dismiss) var dismiss
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    // I want this Rectangle to be overlayed on all views in the NavigationStack in this position
                    Rectangle()
                        .frame(height: 10)
                    
                    NavigationLink("Navigate to 2nd view") {
                        SecondView(viewModel: viewModel)
                    }
                }
                .toolbar {
                    ToolbarItem(placement: .automatic) {
                        Button {
                            dismiss()
                        } label: {
                            Text("Cancel")
                        }
                    }
                }
            }
            .navigationTitle("First view")
            .navigationBarTitleDisplayMode(.inline)
            .onAppear {
                print("first view appeared")
            }
        }
    }
}