How to navigate in a Animated Custom Tab Bar / SwiftUI - swiftui

Question

I have created with help from another tutorial a Custom tab Bar with animation for my Example App to test the Project etc..
and now I want to add the navigation for each Icon(symbol) so when the user presses TapBarButton 1(Symbol"house") they see the HomeView and when tap TapBarButton 2 the next view is visible with some Data, but I don't understand this topic in moment.
so here is the complete Code from this Section for the Custom Tab Bar.
I don't need a complete solution, I need only a start Point in which section of my code I must implement the Navigation and how is this the best way for Request?.
the code follow here.. ->
struct CustomTabBarNew: View {
#Binding var selectedTab: String
// Storing each Tab Midpoints to animate in future...
#State var tabPoints : [CGFloat] = []
var body: some View {
HStack(spacing: 10) {
// Tab Bar Buttons
TabBarButton(image: "house", selectedTab: $selectedTab, tabPoints: $tabPoints)
TabBarButton(image: "cloud.sun", selectedTab: $selectedTab, tabPoints: $tabPoints)
TabBarButton(image: "paperplane", selectedTab: $selectedTab, tabPoints: $tabPoints)
TabBarButton(image: "plus.app", selectedTab: $selectedTab, tabPoints: $tabPoints)
TabBarButton(image: "gearshape", selectedTab: $selectedTab, tabPoints: $tabPoints)
}
.padding()
.background(
Color.white
.clipShape(TabCurve(taboint: getCurvePoint() - 15))
)
.overlay(
Circle()
.fill(Color.white)
.frame(width: 10, height: 10)
.offset(x: getCurvePoint() - 20)
,alignment: .bottomLeading)
.cornerRadius(30.0)
.padding(.horizontal)
}
// extracting Points..
func getCurvePoint()->CGFloat {
// if tabpoint is empty...
if tabPoints.isEmpty {
return 10
}
else {
switch selectedTab {
case "house":
return tabPoints[0]
case "cloud.sun":
return tabPoints[1]
case "paperplane":
return tabPoints[2]
case "plus.app":
return tabPoints[3]
default:
return tabPoints[4]
}
}
}
}
struct CustomTabBarNew_Previews: PreviewProvider {
static var previews: some View {
HomeNewView()
}
}
struct TabBarButton: View {
var image: String
#Binding var selectedTab: String
#Binding var tabPoints: [CGFloat]
var body: some View{
// mid point for each animation of each button...
GeometryReader { reader -> AnyView in
let midX = reader.frame(in: .global).midX
DispatchQueue.main.async {
// avoiding junk data...
if tabPoints.count <= 5 {
tabPoints.append(midX)
}
}
// extracting Midpoint and Storing ...
return AnyView(
Button(action:
// changing Tab..
// Spring animation...
{
withAnimation(.interactiveSpring(response: 0.6, dampingFraction: 0.5, blendDuration: 0.5)) {
selectedTab = image
}
}, label: {
// filling the color if its selcted..
Image(systemName: "\(image)\(selectedTab == image ? ".fill" : "")")
.font(.system(size: 25, weight: .semibold))
.foregroundColor(Color("TabSelected"))
// Lifting View..
// if its selected
.offset(y: selectedTab == image ? -10 : 0)
})
// MAX FRAME
.frame(maxWidth: .infinity, maxHeight: .infinity)
)
}
// MAX Height
.frame(height: 50)
}
}