Search field as in Mail App

How can i achieve the same behavior as the bottom bar on the Mail app?

Button -> Search Field -> Button

right now, if do as follows, they overlap as if they are not in the same space

NavigationStack {
VStack {
HeaderView()
ListView()
}
}
.toolbar(.hidden, for: .tabBar)
.searchable(text: $searchText)
.searchToolbarBehavior(.minimize)
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button {
} label: {
Label("Button1", systemImage: "person")
}
}
ToolbarItem(placement: .bottomBar) {
Button {
} label: {
Label("Button2", systemImage: "person")
}
}
}

Hi, I can’t speak to the implementation details of Mail specifically, but suggesting search terms , adding a search interface to your app and Managing search interface activation has tons of examples and guidance to get you going.

Search field as in Mail App
 
 
Q