swiftuiside-menuswiftui-listswiftui-navigationlink

How to launch new View in SwiftUI from a slider menu so that it does not launch within the slider itself


So I'm using SwiftUI and have a slider/side menu window. When I launch the slider, it presents itself on top of and covering about half the width of the screen. It presents the user with several options. When I click an entry on that menu, the new view is presented inside the half-width slider menu window. I want it to close the slider and then launch the new view full screen instead. Need some help.

Here is the slider in action...

enter image description here

When I click one of the options, the corresponding view resides within the slider window and remains half width of the screen. I want the slider to retract and the new window to launch full screen.

Here is some code.

struct ContentView : View {

@EnvironmentObject var session: SessionStore
    @State var showMenu = false
    @State var isDrawerOpen: Bool = falsevar body: some View {

    let drag = DragGesture()
        .onEnded {
            if $0.translation.width < -100 {
                withAnimation {
                    self.showMenu = false
                }
            }
        }

    return NavigationView {
        Group{
            GeometryReader { geometry in
            ZStack(alignment: .leading) {

            // if the user is logged in, then show the mainview.
            // if the slider is active, then show the slider on top of mainview
            // if the user is not yet logged in then show the login window

                if (self.session.session != nil) {
                    MainView(showMenu: self.$showMenu)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .offset(x: self.showMenu ? geometry.size.width/2 : 0)
                        .disabled(self.showMenu ? true : false)
                    if self.showMenu {
                        MenuView()
                            .frame(width: geometry.size.width/2)
                            .transition(.move(edge: .leading))
                    }
                } else {

                    SignInView()

                }
            }//
                .gesture(drag)
        }
            .navigationBarTitle(...

Now, down in my slider menu code, you will see where I launch the view when someone clicks a button. I set up a NavigationLink with a destination view of "DrawerContent". When I click the menu option below for "Players", it promptly launches the DrawerContent view but it is stuck inside the slider menu. See screenshot below...

struct DrawerContent: View {
    var body: some View {
        //Color.blue
        VStack{
            Text("hello there")
        }
    }
}




struct MenuView: View {

    @State var showMenu = false

var body: some View {

VStack(alignment: .leading) {

    NavigationView{

        List {
            NavigationLink(destination: DrawerContent()
            ) {
                VStack(alignment: .leading){
                    Text("Players")
                        //.font(.system(size: 14))
                }

            }

Here is a screenshot...

enter image description here


Solution

  • I suppose it is due to used another NavigationView in your MenuView as shown below

    struct MenuView: View {
    
       @State var showMenu = false
    
        var body: some View {
           VStack(alignment: .leading) {
               NavigationView{ // <<< this is not needed
    

    Just remove it and it will be used NavigationView from ContentView