0

I am using the navigation links with the side menu.

As we can see from the below gif when the user is pushed to the inner view and open the menu then it automatically poped to root view and then pushed it to the profile view. I am expecting it to push from the inner view itself.

I followed this tutorial to create a navigation side menu.

Navigation Link Issue

Here is my code. I have created this navigation model AppNavigationViewModel which I have passed to inner views for easy access as there can be n number of inners views.

class AppNavigationViewModel:ObservableObject {
    @Published var shouldPushToContentView:Bool = false
    @Published var showMenu:Bool = false
}

struct ContentView: View {
    
    @StateObject private var navigationModel:AppNavigationViewModel = AppNavigationViewModel()
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                NavigationView {
                    VStack {
                        NavigationLink(
                            destination: ProfileView(),
                            isActive: self.$navigationModel.shouldPushToContentView,
                            label: {
                                EmptyView()
                            })
                        MainView()
                            .frame(width: geometry.size.width, height: geometry.size.height)
                    }
                }
                if self.navigationModel.showMenu {
                    MenuView()
                        .frame(width: geometry.size.width/2)
                        .transition(.move(edge: .leading))
                }
            }
        }.environmentObject(self.navigationModel)
    }
}

struct MainView: View {
    
    @EnvironmentObject private var navigationModel:AppNavigationViewModel
    
    var body: some View {
        NavigationLink(
            destination: InnerMainView(),
            label: {
                Text("Push to subview")
            }
        )
        .navigationBarTitle("Root Menu", displayMode: .inline)
        .navigationBarItems(trailing: (
            Button(action: {
                withAnimation {
                    self.navigationModel.showMenu.toggle()
                }
            }) {
                Image(systemName: "line.horizontal.3")
                    .imageScale(.large)
            }
        ))
    }
}

struct MenuView: View {
    @EnvironmentObject private var navigationModel:AppNavigationViewModel
    var body: some View {
        VStack(alignment: .leading) {
            Button(action: {
                self.navigationModel.showMenu = false
                self.navigationModel.shouldPushToContentView = true
            }, label: {
                HStack {
                    Image(systemName: "person")
                        .foregroundColor(.gray)
                        .imageScale(.large)
                    Text("Profile")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
            })
            .padding(.top, 100)
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color(red: 32/255, green: 32/255, blue: 32/255).opacity(0.9))
        .edgesIgnoringSafeArea(.all)
    }
}

struct InnerMainView: View {
    
    @EnvironmentObject private var navigationModel:AppNavigationViewModel
    
    var body: some View {
        Button(action: {
            withAnimation {
                self.navigationModel.showMenu.toggle()
            }
        }) {
            Text("Show Menu From Inner Main View")
        }
        .navigationBarTitle("Inner View", displayMode: .inline)
        .navigationBarItems(trailing: (
            Button(action: {
                withAnimation {
                    self.navigationModel.showMenu.toggle()
                }
            }) {
                Image(systemName: "line.horizontal.3")
                    .imageScale(.large)
            }
        ))
    }
}

struct ProfileView: View {
    
    @EnvironmentObject private var navigationModel:AppNavigationViewModel
    
    var body: some View {
        Button(action: {
            withAnimation {
                self.navigationModel.showMenu.toggle()
            }
        }) {
            Text("Profile View")
        }
        .navigationBarTitle("Profile View", displayMode: .inline)
        .navigationBarItems(trailing: (
            Button(action: {
                withAnimation {
                    self.navigationModel.showMenu.toggle()
                }
            }) {
                Image(systemName: "line.horizontal.3")
                    .imageScale(.large)
            }
        ))
    }
}
Malav Soni
  • 2,739
  • 1
  • 23
  • 52

0 Answers0