NavigationLink TroubleShooting

after.swift

import SwiftUI

enum SideMenu: String, CaseIterable {
    case first
    case second
    case third
    case fourth
    case fifth

    var id: String { "\(self)" }

    var color: Color {
        switch self {
        case .first:
            return Color.red
        case .second:
            return Color.orange
        case .third:
            return Color.yellow
        case .fourth:
            return Color.green
        case .fifth:
            return Color.blue
        }
    }
}

class FixedContentViewModel: ObservableObject {
    @Published var showingFirstMenu: Bool = false
    @Published var showingSecondMenu: Bool = false
    @Published var showingThirdMenu: Bool = false
    @Published var showingFourthMenu: Bool = false
    @Published var showingFifthMenu: Bool = false

    func menuTapped(_ menu: SideMenu) {
        clearState()

        switch menu {
        case .first:
            showingFirstMenu = true
        case .second:
            showingSecondMenu = true
        case .third:
            showingThirdMenu = true
        case .fourth:
            showingFourthMenu = true
        case .fifth:
            showingFifthMenu = true
        }
    }

    private func clearState() {
        showingFirstMenu = false
        showingSecondMenu = false
        showingThirdMenu = false
        showingFourthMenu = false
        showingFifthMenu = false
    }
}

struct FixedContentView: View {
    @StateObject var viewModel: FixedContentViewModel = .init()

    var sideMenu: some View {
        ZStack {
            Group {
                NavigationLink(
                    destination: SideMenu.first.color
                        .navigationTitle("\(SideMenu.first.rawValue)"),
                    isActive: $viewModel.showingFirstMenu,
                    label: { EmptyView() }
                )

                NavigationLink(
                    destination: SideMenu.second.color
                        .navigationTitle("\(SideMenu.second.rawValue)"),
                    isActive: $viewModel.showingSecondMenu,
                    label: { EmptyView() }
                )

                NavigationLink(
                    destination: SideMenu.third.color
                        .navigationTitle("\(SideMenu.third.rawValue)"),
                    isActive: $viewModel.showingThirdMenu,
                    label: { EmptyView() }
                )

                NavigationLink(
                    destination: SideMenu.fourth.color
                        .navigationTitle("\(SideMenu.fourth.rawValue)"),
                    isActive: $viewModel.showingFourthMenu,
                    label: { EmptyView() }
                )

                NavigationLink(
                    destination: SideMenu.fifth.color
                        .navigationTitle("\(SideMenu.fifth.rawValue)"),
                    isActive: $viewModel.showingFifthMenu,
                    label: { EmptyView() }
                )
            }

            VStack {
                ForEach(SideMenu.allCases, id: \.id) { menu in
                    Button {
                        viewModel.menuTapped(menu)
                    } label: {
                        Text("\(menu.rawValue) menu")
                    }
                }
            }
        }
    }

    var body: some View {
        NavigationView {
            sideMenu
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}