I went back to square one since the NavigationLink isActive is deprecated, this is when I found out about NavigationSplitView which removes the hassle of creating a 2 column app.
However, I can never figure out why the toggle button does not show. I copied this sample code (already tried 2 tutorials, copy pasted them but still no toggle button)
Anyone know why?
import SwiftUI
enum DemoScreen: String, Codable {
case first, second, third
var title: String {
rawValue.capitalized
}
}
struct ContentView: View {
@State
private var selection: DemoScreen? = .first
var body: some View {
NavigationSplitView {
sidebarContent
} detail: {
detailContent
}
}
}
extension ContentView {
var sidebarContent: some View {
List {
link(to: .first)
link(to: .second)
link(to: .third)
}
}
func link(to page: DemoScreen) -> some View {
NavigationLink(value: page) {
Text(page.title)
}
}
}
extension ContentView {
@ViewBuilder
var detailContent: some View {
if let selection = selection {
detailContent(for: selection)
.buttonStyle(.bordered)
} else {
Text("No selection")
}
}
@ViewBuilder
func detailContent(for screen: DemoScreen) -> some View {
switch screen {
case .first: Button("First button") {}
case .second: Button("Second button") {}
case .third: Button("Second button") {}
}
}
}
Why is there no toggle button above? And why is the menu always showing? I cant see the detiail view anymore
Why is there no toggle button above?
What do you mean by "toggle button"?
Do you mean the button that hides and shows the sidebar? This is only present when the horizontalSizeClass
is .regular
. On an iPhone in portrait mode, it won't appear.
And why is the menu always showing?
What "menu" are you talking about?
I cant see the detiail view anymore
If you want to see the detail view, you need to select an item from the list. As I said before, the two-column layout with the sidebar toggle button is only present when the horizontalSizeClass
is .regular
. In your screenshot (an iPhone in portrait mode) the NavigationSplitView
collapses down to a single column layout and acts more like a NavigationStack
.