Best way to show a sidebar in iPad SwiftUI document app?

Question

Created Jun ’20

Replies 3

Boosts 0

Views 1.8k

Participants 4

I'm working on an app that renders a document in a Content view and would like to show a Navigator view in a sidebar on iPad to let the user navigate the content of the app.

I have set up a new project to trial this using DocumentGroup. When I put both the Navigator and Content as the document group's content, they are stacked vertically.

I figured perhaps I should be using NavigationView to achieve this, but when I do this I get a navigation bar in both the Navigator and Content views and each are below the standard bar that seems to be provided by the DocumentGroup.

The code I've used looks like the following:

Code Block swift@main
struct TheApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: Document()) { file in
            NavigationView {
                Navigator(document: file.$document)
                Content(document: file.$document)
            }
        }
    }
}

Is it possible to have the standard sidebar behaviour in an iPad SwiftUI document app?

Boost

Answer 1

beckersoft OP

Jun ’20

You probably want to put your NavigationView inside your ContentView

0

Answer 2

justJS OP

Jun ’20

Did you try hiding the navigation bars on both the primary and secondary split views?

Code Block swift@main
struct TheApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: Document()) { file in
            NavigationView {
                Navigator(document: file.$document)
					.navigationBarHidden(true)
                Content(document: file.$document)
					.navigationBarHidden(true)
            }
        }
    }
}

1

Answer 3

cwoloszynski OP

Jul ’20

I am also trying to accomplish the same thing. I have put the NavigationView in the DocumentGroup, but the header of the app is now TWO lines; one for the document group (with just a '<' tool and the filename) and a second header for the navigation sidebar and a tool over the texteditor (proxy for my real editor).

I want to merge those two toolbars. Any ideas?

Code Block swiftimport SwiftUI
@main
struct HawkMultiPlatformMockupApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: HawkMultiPlatformMockupDocument()) { fileDocumentConfig in
            NavigationView {
                OutlineView()
                ContentView(document: fileDocumentConfig.$document)
            }
        }
    }
}

Code Block swiftstruct ContentView: View {
    @Binding var document: HawkMultiPlatformMockupDocument
    var body: some View {
        TextEditor(text: $document.text)
            .navigationTitle("Text Editor View")
    }
}

Code Block swiftstruct OutlineView: View {
    var body: some View {
        List() {
            Text("a")
            Text("b")
            Text("c")
        }
        .listStyle(SidebarListStyle())
        .navigationTitle("Navigation")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Text("add")
            }
        }
    }
}

1