How to navigate to different views in a side bar in swift? - swiftui

Question

How do I navigate to other views I have created in swiftui?
below Is some code for the side bar I tried doing myself. the issue I was having is a white screen shows up as a huge white button.
VStack {
NavigationView {
HStack {
NavigationLink(destination: SettingsView()) {
Text("Settings")
.font(.system(size:20))
.foregroundColor(.black)
}
}
NavigationLink(destination: Settings()) {
Text("Settings")
.font(.title2)
}
}
NavigationLink(destination: AboutUs()) {
Text("About us")
.font(.title2)
}
}
}
}

Answer 1

Unless you're within a NavigationView, which has very specific appearances on iOS and macOS, you wouldn't be using NavigationLink. Since you're making your own sidebar, that means you won't be using Navigation View/Link.
Instead, you can use a #State variable or ObservableObject with a #Published property that keeps track of what view is active. I chose the latter in this example:
enum ViewTypes {
case main
case settings
case aboutUs
}
class SidebarNavigationManager : ObservableObject {
#Published var viewType : ViewTypes = .main
}
struct ContentView: View {
#StateObject var navigationManager = SidebarNavigationManager()
var body: some View {
HStack(alignment: .top) {
SidebarView(navigationManager: navigationManager)
.frame(width: 100)
.frame(maxHeight: .infinity)
.border(Color.green)
//Main content
VStack {
switch navigationManager.viewType {
case .main:
MainView()
case .settings:
SettingsView()
case .aboutUs:
AboutUsView()
}
}.frame(maxWidth: .infinity)
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
struct SidebarView : View {
#ObservedObject var navigationManager : SidebarNavigationManager
var body: some View {
//Sidebar
VStack {
Button(action: { navigationManager.viewType = .main }) {
Text("Main")
}
Button(action: { navigationManager.viewType = .settings }) {
Text("Settings")
}
Button(action: { navigationManager.viewType = .aboutUs }) {
Text("About Us")
}
}
}
}
struct MainView : View {
var body: some View {
Text("Main")
}
}
struct SettingsView : View {
var body: some View {
Text("Settings")
}
}
struct AboutUsView : View {
var body: some View {
Text("About Us")
}
}