How to animate NavigationSplitView's detailView column.

Having a traditional 'NavigationSplitView' setup, I am looking for a way to animate it the same as the sidebarView, where there is a button to toggle and it animates by sliding out from the right side of the view, however the closest I have gotten was manipulating the 'navigationSplitViewColumnWidth' but that always results in the view instantly appearing / disappearing.

I am using SwiftUI for a MacOS specific app.

Here is just a general idea of what I am currently doing, it is by no means a reflection of my real code but serves the purpose of this example.


struct ContentView: View {
    @State private var columnWidth: CGFloat = 300

    var body: some View {
        NavigationSplitView {
            List {
                NavigationLink(destination: DetailView(item: "Item 1")) {
                    Text("Item 1")
                }
                NavigationLink(destination: DetailView(item: "Item 2")) {
                    Text("Item 2")
                }
                NavigationLink(destination: DetailView(item: "Item 3")) {
                    Text("Item 3")
                }
            }
            .navigationTitle("Items")
        } detail: {
            VStack {
                DetailView(item: "Select an item")
                Button(action: toggleColumnWidth) {
                    Text(columnWidth == 300 ? "Collapse" : "Expand")
                }
                .padding()
            }
        }
        .navigationSplitViewColumnWidth(columnWidth)
    }

    private func toggleColumnWidth() {
        withAnimation {
            columnWidth = columnWidth == 300 ? 0 : 300
        }
    }
}

struct DetailView: View {
    var item: String

    var body: some View {
        Text("Detail view for \(item)")
            .navigationTitle(item)
            .padding()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

This isn't supported today for detail columns or content columns. You can however get an animated trailing sidebar with the .inspector modifier.

There is a WWDC Session available too.

How to animate NavigationSplitView's detailView column.
 
 
Q