How to show/hide column in MacOS multi-column Navigation View?

Question

I would like to show/hide the 2nd column in a 3 column NavigationView layout on macOS. The toggle button does hide the content of the 2nd column – but I would like it to vanish completely, as if the user drags it away.

Any ideas?

struct ContentView: View {
    
    @State private var showSecondColumn = true
    
    var body: some View {
        
        NavigationView {
            
            // 1. Column / sidebar
            List {
                ForEach(0..<10) { i in
                    Text("Sidebar \(i)")
                }
            }
            .listStyle(.sidebar)
            
            // 2. Column - conditional
            if showSecondColumn {
                List {
                    ForEach(0..<10) { i in
                        Text("Second \(i)")
                    }
                }
                //  .frame(width: showSecondColumn ? 150 : 0) // does not work either
            }

            // 3. Column / Content
            Button(showSecondColumn ? "Hide second" : "Show second") {
                withAnimation {
                    showSecondColumn.toggle()
                }
            }
        }
    }
}

Answer 1

I ran into this same issue for anyone else that comes across this. I found this article basically saying the amount of columns is fixed at compile time and cannot be changed dynamically.

A bit disappointing, but for what it's worth Apple's own notes app just has a blank third column when nothing is selected so I guess it's part of the design.