I want implement the lower TabView with the SideMenu in the App. I have a TabviewCustom. when I implement Tabview , the sideMenu disappears how to implement it.
How to implement it ?
Implement Tabview and SideMenu
Hi @JavierR ,
Could you give me some more information? I see you said you have a custom tab view, does this mean you're not using TabView and instead have implemented your own? It sounds like you're trying to use your own as well as get a sidebar as shown in the WWDC24 talk on TabViews and sidebars. I recommend watching this video and then reply here with a code example and some more information if you're still stuck!
I have a TabviewCustom and these files : SideMenuView, SideMenuHeaderView, sideMenuRowView, SideMenuOptionModel
this is code : SideMenuView:
@Binding var selectedTab: Int
@State private var selectedOption: SideMenuOptionModel?
var body: some View {
ZStack {
if isShowing {
Rectangle()
.opacity(0.03)
.ignoresSafeArea()
.onTapGesture { isShowing.toggle()}
HStack {
VStack(alignment: .leading, spacing: 32)
{
SideMneuHeaderView()
VStack(alignment: .leading, spacing: 20){
ForEach(SideMenuOptionModel.allCases) { option in
Button(action: {
selectedOption = option
selectedTab = option.rawValue
}, label: {
SideMenuRowView(option: option, selectedOption: $selectedOption)
})
}
}
Spacer()
}
.padding()
.frame(width: 270, alignment: .leading)
.background(.white)
Spacer()
}
}
}
.transition(.move(edge: .leading))
.animation(.easeOut, value: isShowing)
}
}
struct SideMenuView_Previews: PreviewProvider {
static var previews: some View {
SideMenuView(isShowing: .constant(true), selectedTab: .constant(0))
}
}
this code: ContentView . The problem is when I implement the TabVieew the ContentView in the menu disappears.
@State private var showMenu = false
@State private var selectedTab = 0
var body: some View {
NavigationView{
ZStack{
TabView(selection: $selectedTab) {
Text("inicio")
.tag(0)
BikeView()
.tag(1)
Text("Configuration")
.tag(2)
Text("info")
.tag(3)
}
SideMenuView (isShowing: $showMenu, selectedTab: $selectedTab)
}
.toolbar(showMenu ? .hidden : .visible, for: .navigationBar)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button (action:{
showMenu.toggle()
}, label: {
Image(systemName: "line.3.horizontal")
.foregroundColor(.black)
})
}
ToolbarItem(placement: .principal) {
VStack(){
Text("Eco my bike")
.foregroundColor(.black)
}
}
}// cierre del tolbar
.padding()
.toolbarBackground(.white, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}