SwiftUI Overlay within NavigationView z-index layering issues

I'm pretty new to Swift, so if there is a better way to do what I'm trying to do, please let me know. On the main view, I have a list that navigates to other views, and I have a sidebar that overlays the main view when the user presses the menu button. I want to add navigation links in the sidebar, so I extended the NavigationView to encompass the sidebar view. Now the issue I'm running into is that the Navigation Title and toolbar remain on top of the sidebar when it comes into view.

struct ParticipantListScreen: View {
    @ObservedObject var participantListViewModel: ParticipantListViewModel = ParticipantListViewModel()
    @ObservedObject var portalUserViewModel: PortalUserViewModel = PortalUserViewModel()
    
    @AppStorage("lastUpdated")
    var lastUpdated = Date.distantFuture.timeIntervalSince1970
    
    @State var isSidebarOpened = false
    
    @State private var filterParticipantListBy: ApprovalStatus = ApprovalStatus.All
    @State var isLoading = false
    
    var filteredParticipants: [Participant] {
        participantListViewModel.participants.filter{ participant in
            (filterParticipantListBy == ApprovalStatus.All || participant.approved == filterParticipantListBy)
        }
    }
    
    var body: some View {
        NavigationView{
            ZStack{
                VStack{
                    //NavigationView{
                    ZStack{
                        VStack{
                            List{
                                Picker("Show only", selection: $filterParticipantListBy) {
                                    Text("Show All").tag(ApprovalStatus.All)
                                    Text("Approved").tag(ApprovalStatus.Approved)
                                    Text("Denied").tag(ApprovalStatus.Denied)
                                    Text("Pending").tag(ApprovalStatus.Pending)
                                }
                                ForEach(filteredParticipants) { participant in
                                    NavigationLink{
                                        ParticipantDetail(participant:participant)
                                    }label:{
                                        ParticipantRow(participant:participant)
                                    }
                                }
                            }
                            .navigationTitle("Participants")
                            .toolbar(content: toolbarContent)
                            .refreshable {
                                participantListViewModel.getParticipants(authString: Auth.shared.getAccessToken()!)
                            }
                            //ProgressView().opacity(1)
                        }
                        //}
                        Spacer()
                    }.zIndex(1)
                }
                ZStack{
                    Sidebar(
                        isSidebarVisible: $isSidebarOpened,
                        participantListViewModel: participantListViewModel,
                        portalUserViewModel: portalUserViewModel
                    ).zIndex(110)
                }.zIndex(100)
            }.zIndex(50)
        }
        .onAppear(perform: {
            participantListViewModel.getParticipants(authString: Auth.shared.getAccessToken()!)
            portalUserViewModel.getUser(authString: Auth.shared.getAccessToken()!)
        })
    }
}

Any help would be greatly appreciated!

P.S. I'm really enjoying learning SwiftUI, so any other tips on the above code would be awesome. Thanks in advance!

Explain what you did and what you expected: I tried extending the navigation view to include my sidebar view. I expected to eventually have a sidebar with working navigationLinks. The nav links do work fine, but toolbar components and the navigation title now appear on top of the side bar. I didn't expect it to be perfect right off the bat, but after hours of fiddling and searching, I'm no closer to getting the sidebar to properly overlay all the other ui components.

Answered by joe324 in 761920022

Was overthinking it. Just hide the toolbar when sidebar is opened

NavigationView is deprecated, it would be better to use NavigationStack or NavigationSplitView

Thanks for the tip! I've changed it, and read a bit about the new features of NavigationStack. I'm going to play around with it a bit. At this point, though, I'm still running into the same issue, unfortunately.

Accepted Answer

Was overthinking it. Just hide the toolbar when sidebar is opened

SwiftUI Overlay within NavigationView z-index layering issues
 
 
Q