WWDC 2022 Split View for three column proper usage

ContentView.swift

//
//  ContentView.swift
//  NewNav
//
//  Created by Egor Merkushev on 15.06.2022.
//

import SwiftUI

struct CustomColorCategory: Identifiable, Hashable, Equatable {
    var id = UUID()
    
    let colors: [CustomColor]
    let name: String
}


struct CustomColor: Identifiable, Hashable {
    var id = UUID()
    
    let color: Color
    let name: String
}


struct ContentView: View {
    
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    var colorsCategories: [CustomColorCategory] = [
        CustomColorCategory(colors: [
            CustomColor(color: .red, name: "red"),
            CustomColor(color: .blue, name: "blue"),
            CustomColor(color: .yellow, name: "yellow")
        ], name: "common"),
        CustomColorCategory(colors: [
            CustomColor(color: .cyan, name: "cyan"),
            CustomColor(color: .mint, name: "mint"),
            CustomColor(color: .accentColor, name: "accent")
        ], name: "specific"),
    ]
    @State var selectedCategory: CustomColorCategory?
    @State var selectedColor: CustomColor?
    @State var pathCategory: NavigationPath = NavigationPath()
    @State var pathColor: NavigationPath = NavigationPath()
    
    var body: some View {
        Group {
            if horizontalSizeClass == .regular {
                NavigationSplitView {
                    List(colorsCategories,
                         selection: $selectedCategory) { category in
                        NavigationLink(value: category) { // does not work with List selection option, presents just for visual style of selection provided by Split View sidebar
                            Text(category.name)
                        }
                    }
                         .navigationTitle("Categories")
                } content: {
                    CategoryView(category: selectedCategory,
                                 colorSelection: $selectedColor)
                } detail: {
                    DetailView(color: selectedColor)
                }
            } else {
                NavigationSplitView {
                    List(colorsCategories,
                         selection: $selectedCategory) { category in
                        NavigationLink(value: category) { // does not work with List selection option, presents just for visual style of selection provided by Split View sidebar
                            Text(category.name)
                        }
                    }
                         .navigationTitle("Categories")
                } detail: {
                    NavigationStack {
                        CategoryView(category: selectedCategory,
                                     colorSelection: $selectedColor)
                    }
                }
            }
        }
        .onChange(of: selectedCategory) { newValue in
            selectedColor = nil
        }
    }
}

struct CategoryView: View {
    
    var category: CustomColorCategory?
    @Binding var colorSelection: CustomColor?
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    var body: some View {
        Group {
            if horizontalSizeClass == .regular {
                List(category?.colors ?? [], selection: $colorSelection) { color in
                    row(color: color)
                }
            } else {
                List(category?.colors ?? []) { color in
                    row(color: color)
                }
            }
        }
        .navigationDestination(for: CustomColor.self) { color in
            DetailView(color: color)
        }
        .navigationTitle(category?.name ?? "")
    }
    
    @ViewBuilder
    func row(color: CustomColor) -> some View {
        NavigationLink(value: color) {
            HStack {
                Rectangle()
                    .fill(color.color)
                    .frame(width: 20, height: 20)
                Text(color.name)
            }
        }
    }
    
}

struct DetailView: View {
    let color: CustomColor?
    
    var body: some View {
        VStack {
            if let color {
                Rectangle()
                    .fill(color.color)
                    .frame(width: 200, height: 200)
                Text(color.name)
            } else {
                EmptyView()
            }
        }
        .navigationTitle(color?.name ?? "")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

NavigationSplitView in iOS 16 beta 1 has several visual and logic bugs inside. Apple's example is not usable on the .compact horizontal size classes. This example shows how to avoid most of caveats.