NavigationSplitView

Hello everyone,

I am currently trying to implement and test the latest SwiftUI changes with Xcode 16 Beta 3. Now I wanted to create, like in FreeForm, that I have a grid in the detail column with tiles in a NavigationSplitView. If you now press on the tile, a DetailView (in my code its an EmptyView) should open with the zoom effect and in fullscreen so that the NavigationSplitView disappears and the NavigationBar is no longer there.

In FreeForm the desired effect is when you create a new board.

any tips or hints?

struct CanvasGrid: View {
    @Namespace var namespace;
    
    var body: some View {
        if let project = project {
            if viewMode == .grid {
                ScrollView{
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(sortedCanvases) { canvas in
                            NavigationLink {
                                EmptyView()
                                    .navigationTransition(
                                        .zoom(sourceID: canvas.id, in: namespace)
                                    )
                            } label: {
                                CanvasTile(canvas: canvas)
                            }
                            .matchedTransitionSource(id: canvas.id, in: namespace)
                           
                        }
                    }
                    .searchable(text: $searchText)
                    .navigationTitle(project.name)
                    
                }
            } 
#Preview {
    NavigationStack{
        CanvasGrid(project: SampleData.shared.project)
    }
    
}

......
struct ContentView: View { 
    var body: some View {
        NavigationSplitView {
            List(selection: $selectedProject) {
                ForEach(projects, id: \.self) { project in
                    HStack {
                        NavigationLink(project.name, value: project)
                        Spacer()
                        Button(action: {
                            showingEditSheet.toggle()
                        }) {
                            Image(systemName: "pencil")
                                .foregroundColor(.blue)
                        }
                        .buttonStyle(BorderlessButtonStyle())
                    }
                }
            }
        } detail: {
            NavigationStack(path: $path)
            {
                CanvasGrid(project:selectedProject).padding(.leading, 10)
            }
            
        }
        .navigationSplitViewStyle(.balanced)
        .onAppear() {
            selectedProject = projects.first
        }
    }
   
 ......
}

#Preview {
    ContentView()
        .modelContainer(SampleData.shared.modelContainer)
}