How can I remove the toggle button in Swiftui and how can I show a sidebar on the iPad when this is shown high up

Question

I want a sidebar to be displayed on the iPad. However, what bothers me about the Swiftui Navigazion View is that I have this ugly toggle button. Furthermore I would like to show a sidebar when the iPad is held horizontally. Can I change the Navigation View component so that this works?

Answer 1

no, but you can custom build your own:

struct ContentView: View {
    
    @State private var selection: Int? = nil
    
    var body: some View {
        
        HStack {
            List {
                Button {  selection = 1
                } label: {
                    Text("Item 1")
                }
                
                Button {  selection = 2
                } label: {
                    Text("Item 2")
                }
                
                Button {  selection = 3
                } label: {
                    Text("Item 3")
                }
            }
            .frame(width: 200)
            .frame(maxHeight: .infinity)
            .background(.gray.opacity(0.3))
            
            VStack {
                if selection != nil {
                    // Detail View
                    Text("Your detail view \(selection!)")
                        .font(.title)
                } else {
                    Text("Select an item")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        }
    }
}

Answer 2

However, what bothers me about the Swiftui Navigazion View is that I have this ugly toggle button

The possible workaround to avoid button is to hide navigation bar, then in landscape (aka horizontal) you will see just sidebar

    NavigationView {
        VStack {
            Text("Header")
                .padding()
            List(0..<100, id: \.self) { i in
                NavigationLink(
                    tag: i,
                    selection: $activeLink,
                    destination: { Text("Details for \(i)") }
                ) {
                    Text("Row #\(i)")
                }
            }
        }
        .navigationBarHidden(true)     // << here !!

        Text("Default Details")
    }