How to toggle the visibility of the third pane of NavigationView?

Question

Assuming the following NavigationView:

Struct ContentView: View {
   @State var showRigthPane: Bool = true 

   var body: some View {
       NavigationView {
           Sidebar()
           MiddlePane()
           RightPane()
       }.toolbar {
           ToolbarItem(placement: .navigation) {
                Button(action: toggleSidebar, label: {Image(systemName: "sidebar.left")})
            }
           ToolbarItem(placement: .primaryAction) {
               Button(action: self.toggleRightPane, label: { Image() })
           }
       }
   }

   private func toggleRightPane() {
       // ?
   }
   
   // collapsing sidebar - this works
   private func toggleSidebar() {
        NSApp.keyWindow?.initialFirstResponder?.tryToPerform(
            #selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
    }

}

How can I implement the toggleRightPane() function to toggle the visibility of the right pane?

Answer 1

Updated to use a calculated property returning two different navigation views. Still odd behavior with sidebar, but with a work-around it is functional. Hopefully someone can figure out the sidebar behavior.

struct ToggleThirdPaneView: View {
    @State var showRigthPane: Bool = true
    
    var body: some View {
        VStack {
            navigationView
        }
        .navigationTitle("Show and Hide")
    }
    
    var navigationView : some View {
        if showRigthPane {
            return AnyView(NavigationView {
                VStack {
                    Text("left")
                }
                .toolbar {
                    Button(action: { showRigthPane.toggle() }) {
                        Label("Add Item", systemImage: showRigthPane ? "rectangle.split.3x1" : "rectangle.split.2x1")
                    }
                }
                Text("middle")
            }
            )
        } else {
            return AnyView(NavigationView {
                VStack {
                    Text("left")
                }
                .toolbar {
                    Button(action: { showRigthPane.toggle() }) {
                        Label("Add Item", systemImage: showRigthPane ? "rectangle.split.3x1" : "rectangle.split.2x1")
                    }
                }
                Text("middle")
                Text("right")
            })
        }
    }
}