Hi all, I have been racking my brain about this for hours now and cannot seem to get it figured out. I have created a custom header using a Swift UI View. When I put the HeaderView onto say my Menu View it is fine until I start adding content. I want to add navigation links in my Menu View to navigate my app. At that time, the shape part of my header start to get bumped up out of position but the text stays where it should. How do I prevent the header from moving at all? I want it to be in a fixed position on each screen. I will be using the same header just with different text on each screen.
Here is my HeaderView
struct HeaderView: View { let title: LocalizedStringKey var bgColor: Color
var body: some View {
GeometryReader { geometry in
ZStack {
Ellipse()
.fill(self.bgColor)
.frame(width: geometry.size.width * 1.4, height: geometry.size.height * 0.30)
.position(x: geometry.size.width / 2.00, y: geometry.size.height * 0.035)
.edgesIgnoringSafeArea(.all)
VStack{
Text(self.title)
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.green)
.padding(.top,20)
Spacer()
}
}
}
}
}
Here is my Menu View:
struct MenuView: View {
@StateObject var viewModel = MenuViewViewModel()
init() {}
var body: some View {
NavigationView{
VStack{
HeaderView(title: "Menu", bgColor: Color.green.opacity(0.3))
HStack{
Image(systemName: "bell.fill")
NavigationLink("Notifications", destination: NotificationsView())
}
HStack{
Image(systemName:"person.crop.circle.fill")
NavigationLink("Profile", destination: ProfileView())
}
HStack{
Image(systemName: "puzzlepiece.fill")
NavigationLink("Projects", destination: ProjectsView())
}
}
}
}
}
I can provide screenshots of what happens after I do this if need be. Thanks in advance.