When I click the side menu, the toolbar will be hidden but all background will be moved up.
var body: some View {
NavigationStack {
ZStack {
VStack {
SlideView()
ButtonView()
}
SideMenuView(isShowing: $showMenu, selectedTab: $selectedTab)
}
.toolbar(showMenu ? .hidden : .visible, for: .navigationBar)
.navigationTitle("HKSTBC")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Button(action: {
showMenu.toggle()
}, label: {
Image(systemName: "line.3.horizontal")
})
}
}
}
}
I just put.navigationBarTitleDisplayMode(.inline), but it can't work. How can the background stop move up?
The title is displayed in the navigationBar, so when the toolbar is hidden the title disapears and the view shifts upward.
You could try this approach hiding and disabling the toolbar Button
,
as shown in the example code.
NavigationStack {
ZStack {
VStack {
SlideView()
ButtonView()
}
SideMenuView(isShowing: $showMenu, selectedTab: $selectedTab)
}
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Button(action: {
showMenu.toggle()
}, label: {
Image(systemName: "line.3.horizontal")
.foregroundStyle(showMenu ? .clear : .black) // <--- here
})
.disabled(showMenu ? true : false) // <--- here
}
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle(showMenu ? "" : "HKSTBC") // <--- here
}
}