I finally found a way to get a side menu to show different views, but I'm stumped as to why the animation only works with the original view.
My main ContentView.swift is as follows:
import SwiftUI
enum PageSelector {
case home
case first
case second
}
struct TestView: View {
@State private var show: Bool = false
@State private var pageSelector: PageSelector = .home
var body: some View {
ZStack {
// Background of the menu
Color.blue.edgesIgnoringSafeArea(.all)
// Menu items and content selection
VStack(alignment: .leading, spacing: 10) {
Spacer()
.frame(height:60)
MenuItem(action: {
self.pageSelector = .home
self.show.toggle()
}, title: "Home", image: "chevron.right")
MenuItem(action: {
self.pageSelector = .first
self.show.toggle()
}, title: "Services", image: "chevron.right")
MenuItem(action: {
self.pageSelector = .second
self.show.toggle()
}, title: "Testimonials", image: "chevron.right")
Spacer()
}
// Content
switchContent(show: show)
.disabled(show ? true : false)
.offset(x: show ? 300 : 0)
.animation(.spring())
.edgesIgnoringSafeArea(.all)
// Menu button
VStack {
HStack {
Button(action: { self.show.toggle() }) {
MenuButton(show: $show)
}
Spacer()
}
Spacer()
}
}
}
// Switching pages (views)
func switchContent(show: Bool) -> AnyView {
return AnyView( HomeSwitchView(pageSelector: self.$pageSelector))
}
}
struct HomeSwitchView: View {
@Binding var pageSelector : PageSelector
var body: some View {
switch pageSelector {
case .home:
return AnyView(HomeView())
case .first:
return AnyView(FirstView())
case .second:
return AnyView(SecondView())
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
struct MenuItem: View {
let action: ()->Void
let title: String
let image: String
var body: some View {
HStack {
Button(action: action) {
Image(systemName: image)
.foregroundColor(.white)
.padding(.horizontal)
.font(.footnote)
Text(title)
.foregroundColor(.white)
.font(.headline)
}
Spacer()
}
}
}
struct MenuButton: View {
@Binding var show: Bool
var body: some View {
HStack {
Image(systemName: self.show ? "xmark" : "list.dash")
.frame(width: 50, height: 50)
.foregroundColor(self.show ? .blue : .white)
.background(self.show ? Color.white : Color.blue)
.cornerRadius(25)
.scaleEffect(self.show ? 0.6 : 1)
.shadow(radius: 20)
.padding()
.opacity(0.8)
.animation(.spring())
}
}
}
That gets all the menu set up and working nicely (thanks to this discussion on StackOverflow
Each of the separate views (HomeView, FirstView, and SecondView) are all nearly identical with only the text altered to show it moving between them as follows:
struct HomeView: View {
var body: some View {
VStack {
Text("This is Home")
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.white)
}
}
Does anyone know why the animation for the menu sliding back in only works for the HomeView()? Under the switchContent function, I tried commenting out the .disable, chaning the .animation based on the boolean value, but nothing seems to make a difference. I appreciate any help!