How to navigate views with enums

Question

I have followed a tutorial in SWIFT UI (only just started using it) and I am trying to open new views using the same logic applied so far. Basically there is a tab bar with 5 views (Search ,home etc...) which works opening a new view with each tabbar item, however in my homeview page I have some button cards that I want to open a new view. I can get the text for selectedSection to work but it shows the Text over the top of the homeview. How can I get it to open a new view entirely?

Here is my content view:

     struct ContentView: View {
    @AppStorage("selectedTab") var selectedTab: Tab = .home
    @AppStorage("selectedSection") var selectedSection: Features = .calculators
    
    @State var isOpen = false
    @State var show = false
    let button = RiveViewModel(fileName: "menu_button", stateMachineName: "State 
     Machine", autoPlay: false)
    
    var body: some View {
        ZStack {
           
            Color("Background 2").ignoresSafeArea()
            SideMenu()
                .opacity(isOpen ? 1 : 0)
                .offset(x: isOpen ? 0 : -300)
                .rotation3DEffect(.degrees(isOpen ? 0 : 30), axis: (x: 0, y: 1, z: 0))
            
            
            Group{
                switch selectedTab {
                case .home:
                    HomeView()
                case .search:
                    Text("Search")
                case .star:
                    Text("Favorites")
                case .bell:
                    Text("Bell")
                case .user:
                    Text("User")
                }
                    switch selectedSection {
                    case .calculators:
                        Text("Calculators")
                    case .projects:
                        Text("Projects")
                    case .kvFinder:
                        Text("kv Finder")

                }
                }

And my home view:

     var content: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Welcome")
                .customFont(.largeTitle)
                .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.horizontal, 20)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 20) {
                    ForEach(sections) { section in
                        Button {
                           
                            selectedSection = section.features
                        } label : {
                            VCard(section: section)
                            
                        }
                    }
                }

And here is my VCard:

    struct Section: Identifiable {
    var id = UUID()
    var title: String
    var subtitle: String
    var caption: String
    var color: Color
    var image: Image
    var features: Features
    }

    var sections = [
    Section(title: "TAB Calculations", subtitle: "Find all basic and advanced HVAC 
     calculations", caption: "3 sections - over 40 calculators", color: Color(hex: 
     "7850F0"), image: Image(systemName: "x.squareroot"), features: .calculators),

     Section(title: "Upcoming Projects", subtitle: "Find upcoming and current 
     commissioning projects.", caption: "Over 150 projects", color: Color(hex: "6792FF"), 
     image: Image(systemName: "folder.fill.badge.plus"), features: .projects),

     Section(title: "Valve Kv Finder", subtitle: "Quickly determine valve flow rates from 
    brands such as Oventropp, IMI TA and Danfoss", caption: "150 tables", color: 
     Color(hex: "005FE7"), image: Image(systemName: "magnifyingglass"), features: 
     .kvFinder)

     ]

       enum Features: String {
    
          case calculators
          case projects
          case kvFinder
    }

Answer 1

You can use NavigationStack API if your minimum app deployment is 16+. otherwise, you may use the old NavigationView.

You can find the migration document here.

struct ContentView: View {
    @State var path: [YourDestinations] = []
    
    var body: some View {
        TabView {
            VStack {
                NavigationStack(path: $path) { // <= here
                    VStack {
                        NavigationLink("Card 1", value: YourDestinations.place1)
                        NavigationLink("Card 1", value: YourDestinations.place2)
                        NavigationLink("Card 1", value: YourDestinations.place3)
                    }
                    .navigationDestination(for: YourDestinations.self) { destination in
                        switch destination {
                        case .place1:
                            Text("Detination 1")
                                .foregroundColor(.yellow)
                            
                        case .place2:
                            Text("Detination 2")
                                .foregroundColor(.green)
                            
                        case .place3:
                            Text("Detination 3")
                                .foregroundColor(.gray)
                        }
                        
                    }
                }
                
            }
            .tabItem({
                Text("Tab 1")
            })
            
            Text("Hello, world!")
                .padding()
                .tabItem({
                    Text("Tab 2")
                })
            
            Text("Hello, world!")
                .padding()
                .tabItem({
                    Text("Tab 3")
                })
        }
    }
}