Top level navigation with NavigationSplitView

[lightandshadow68]

I'm working on an application that uses NavigationSplitView and runs on an iPhone and iPad. At the top level, each feature has its own state which needs to be maintained when switching between each sidebar. As such, using the presence of optional state to switch between top level functions is problematic. While we would not want to create the state for each top level feature until the user selects that section, setting it to nil when navigating away from it would result in the loss of context.

What is the best way to approach this? Should each top level feature stash away that state via some effect before navigating way, then restore it when the user switches back?

In addition, while I'm sure I could split this out into separate views, my sidebar view currently looks the following.

I was using the NavigationDestination unwrapping case variant, but that caused console errors in 16.4 when nesting a NaviationStack in the destination. In addition there were cases where the top level state currentSelection property was set nil when switching sections. I know support for iOS 16 is in the works, but will those future tools include support for NavigationSplitView in scenarios like this?

public enum AppSection: Equatable, Hashable, Sendable {
    case overview:
    case option1
    case option2
    case option3
}

struct SidebarView: View {
    
    var appStore: StoreOf<AppFeature>
    
    @State var showModal = false
    @State var visiblity: NavigationSplitViewVisibility = .all
    @State var mode: NavigationSplitViewVisibility = .automatic
    
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    @State var showSidebarMenu = false
    
    var body: some View {
        WithViewStore(appStore, observe: \.currentSection) { viewStore in
            ZStack {
                switch viewStore.state {
                    
                /* Option 2 & 3 has 3 columns */
                case .option2, .option3:
                    NavigationSplitView(columnVisibility: $visiblity) {
                        sidebarList
                    } content: {
                        content
                    } detail: {
                        detail
                    }
                    .navigationSplitViewStyle(.automatic)

                /* Option 1 and default overview has 2 columns */
                default:
                    NavigationSplitView(columnVisibility: $visiblity) {
                        sidebarList
                            .navigationSplitViewColumnWidth(min: 200, ideal: 360, max: 400)
                    } detail: {
                        detail
                    }
                    .navigationSplitViewStyle(.automatic)
                }
            }
            .sheet(isPresented: $showModal) {
               /* Pick a context */
            }
        }
    }
    
    var sidebarList: some View {
        WithViewStore(appStore, observe: \.currentSection ) { viewStore in
            /* Ignore split view sending nil when switching sections */
            List(selection: viewStore.binding(send:
                                                { switch $0 {
                                                case .none:
                                                    return .setSection(viewStore.state)
                                                default:
                                                    return .setSection($0)
                                                }
            })) {
                
                Label("Option 1", systemImage: "rectangle.3.group")
                    .tag(AppSection.option1)
                Label("Option 2", systemImage: "camera")
                    .tag(AppSection.option2)
                Label("Option 2", systemImage: "clock")
                    .tag(AppSection.option3)
            }

            .listStyle(.sidebar)
            .navigationTitle("My App")
        }
    }
    
    var content: some View {
        WithViewStore(appStore, observe: \.currentSection ) { viewStore in
            switch viewStore.state {

            case .option2:
                IfLetStore(
                    appStore.scope(state: \.option1, action: AppFeature.Action.option1)
                ) { store in
                    Option2View(store:store, isModal: false)
                } else: {
                    Text("Loading results...")
                }
                
            case .option3:
                IfLetStore(
                    appStore.scope(state: \.option3, action: AppFeature.Action.option3)
                ) { store in

                    /* Option 3 pushes to the content column while also simultaneously presenting content in the detail column */
                    NavigationStack {
                        Option3View()
                    }
                } else: {
                    Text("Loading results...")
                }

             /* Option 1 does not have three columns */
            default:
                Text("Default")
            }           
        }
    }
    
    var detail: some View {
        ZStack {
            WithViewStore(appStore, observe: \.currentSection ) { viewStore in
                switch viewStore.state {
                case .overview:
                    NoContextSelectedView()
                case .option2:
                    /* Option 2 A content only appears in the detail column when a section is made in Option 2 */
                    IfLetStore(
                        appStore.scope(state: \.option2, action: AppFeature.Action.option2)
                    ) { option2Store in
                        WithViewStore(option2Store, observe: { $0 }) { option2ViewStore in
                            /* Show when selection is made, which sets optionalValue to a non-nil value */
                            if let _ = option2ViewStore.optionalValue  {
                                IfLetStore(
                                    listStore.scope(state: \.option2A, action: Option2A.Action.option2A)
                                ) { Option1AStore in
                                        Option2AView(store: captureStore)
                                }
                                
                            } else {
                                Text("No Selection")
                            }
                        }
                    }
                case .option1:
                    IfLetStore(
                        appStore.scope(state: \.option1, action: AppFeature.Action.option1)
                    ) { store in
                        Option1View(store: store)
                    } else: {
                        Text("No Selection.")
                    }

                /* Option 3 A content would go here when a section is made in Option 3 */
                    
                default:
                    Text("No Selection")
                }
            }
        }
    }
}

[lightandshadow68]

If the state of each top level feature is persisted when switching between sections, the top level navigation could be represented as a enum with the state of each top level feature as an associated value, and presented with something like SwitchStore in the content column. It looks like the isDetailLink modifier is not deprecated and could be used to eventually break out of the content column into the detail column. this would eliminate the switch statement, leaving just the default initial detail content. However, I'm not sure that will cause the detail column to clean up after itself, when switching between top level navigation section.

[lightandshadow68]

The isDetailLink modifier does not seem to work with the navigationDestination modifier. Which would be a significant limitation. I guess the strategy is to put the destination where you want it to appear in the content or detail blocks?

The following iOS 13 NavigationLink works without the need to nest Option3View inside a NavigationStack. However there is no navigation bar or animation. So, using a navigationDestination modifier in the content property above seems to be off the table.

NavigationLink {
    Text("Id: \(row.id)")
  } label: {
    Option3RowView(title: row.title, subtitle: row.subtitle, date: row.createdOn, multiple: row.multiple)
}
.isDetailLink(false)

IOW, in regards to TCA navigation, NavigationSplitView seems to have it's own context, compared with NavigationStackView. Attempts to treat columns like a navigation stack doesn't seem to work, etc.

[lightandshadow68]

Working thought this, it seems the problem is with SwiftUI. The new TCA augmented .navigationDestination modifier uses the new iOS 16 .navigationDestination under the hood. And that seems to lack a way to indicate if it should display the destination in the conten or detail column.

Apparently, when using a NavigationSplitView you're supposed to put the .navigationDestination directly in each content or detail block, instead of using .isDetailLink?

If so, each destination block may take several nested IfLetStores to get an honest store to configure a destination view.