View Problem when I include NavigationView

I have a view problem and I can't solve him : Here is my code :

var body: some View {
    
    
    NavigationView{
        ZStack {
            VStack(spacing:0){
                HStack{
                    if !self.showSearchBar{
                        Text("Conversations").fontWeight(.bold).font(.title).foregroundColor(.white)
                    }
                    
                    Spacer(minLength: 0)
                    
                    HStack{
                        if self.showSearchBar{
                            Image(systemName:"magnifyingglass").padding(.horizontal,8)

                            
                            TextField("Cherchez une conversation", text: self.$txt)
                            
                            Button {
                                withAnimation {
                                    self.showSearchBar.toggle()
                                }
                                
                                
                            } label: {
                                Image(systemName: "xmark").foregroundColor(.black)
                            }
                            .padding(.horizontal,8)

                        }
                        else {
                            Button(action:{
                                withAnimation {
                                    self.showSearchBar.toggle()
                                }
                                
                            }) {
                                Image(systemName:"magnifyingglass").foregroundColor(.black).padding(10)
                            }
                        }
                    }
                    .padding(self.showSearchBar ? 10 : 0)
                    .background(Color.white)
                    .cornerRadius(20)
                    
                }.padding(.top,  15)
                .padding(.horizontal)
                .padding(.bottom,10)
                
                
                Spacer()
            }
            
            List{
                ForEach(0..<groupes.count){groupe in
                    HStack{
                        ForEach(0..<discussionsImages.count){ image in
                            
                            Image(uiImage: discussionsImages[image])
                                .resizable()
                                .frame(width: 50, height: 50)
                                .clipShape(RoundedRectangle(cornerRadius: 25))
                        }
                        VStack(alignment: .leading, spacing: 10) {
                            Text(groupes[groupe].name)
                                .font(.system(size: 22))
                                .fontWeight(.heavy)
                            Text(groupes[groupe].latestMessage.text)
                                .foregroundColor(Color.black.opacity(0.3))
                        }
                        
                    }
                    
                    
                }
                
            }.padding(.top,70)
            .listStyle(GroupedListStyle())
            
            
                .onAppear(perform: {
                    for i in 0..<groupes.count{
                        let otherEmail = groupes[i].profileImageData
                        let safeEmail = DatabaseManager.safeEmail(emailAdress: otherEmail)
                        StorageManager.shared.downloadURL(for: safeEmail) { (result) in
                            switch result{
                            case .failure(let error):
                                print("failed to get url:\(error)")
                            case .success(let url):
                                if let data = try? Data(contentsOf: url) {
                                    // Create Image and Update Image View
                                    discussionsImages.append(UIImage(data: data)!)
                                }
                                
                                
                            }
                        }
                    }
                    
                    ConversationModel.shared.getAllConversation { (result) in
                        switch result{
                        case .failure(let error):
                            print(error)
                            
                        case .success(let groupe):
                            groupes = groupe
                        }
                    }
                })
            VStack(alignment:.trailing) {
                
                Spacer()
                HStack {
                    Spacer()
                    Button(action: {
                        //aller a la ConversationSearchView
                        showSheet.toggle()
                    }) {
                        
                        Image(systemName: "plus")
                            .foregroundColor(.white)
                            .padding()
                        
                            .background(Color("blue"))
                            .clipShape(RoundedRectangle(cornerRadius: 15))
                            .frame(width: 30, height: 30)
                    }.padding(.bottom,80)
                    .padding(.trailing,25)
                    .fullScreenCover(isPresented: $showSheet) {
                        ConversationsSearchView( showNewChat: $showNewChat)
                        }
                    
                }
            }
        }.background(Color("blue").edgesIgnoringSafeArea(.top))
    }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        
}

The problem is that when I put NavigationView ( and I need it to go to another view ), all my view will be shifted down : Here is the view

I can obtain what I've expected when I remove the NavigationView here

How can I keep NavigationView without been shifted down ?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum