How can I do that?
I have built a side menu and want each thing to go to a seperate page(settings to settings... etc) How can I do this?
//HOME PAGE
import SwiftUI
struct Home: View {
@State private var isShowing: Bool = false
var body: some View {
NavigationView{
ZStack {
if isShowing {
SideView(isShowing: $isShowing)
}
HomeView()
.cornerRadius(isShowing ? 20:10)
.offset(x: isShowing ? 300.0 : 0, y: isShowing ? 44:0)
.scaleEffect(isShowing ? 0.8 : 1.0)
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
}, label: {
Image(systemName: "list.bullet")
.foregroundColor(Color.primary)
}))
.navigationTitle("Welcome To Sai Mirras!")
}
}
}
}
struct Home_Previews: PreviewProvider {
static var previews: some View {
Home()
}
}
struct HomeView: View {
var body: some View {
ZStack {
Color(.white)
Text("Hi")
.padding()
}
}
}
And this is my header view:
import SwiftUI
struct SideMenuHeaderView: View {
@Binding var isShowing: Bool
var body: some View {
ZStack(alignment: .topTrailing) {
Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
}, label: {
Image(systemName: "xmark")
})
.frame(width: 32, height: 32)
.foregroundColor(Color.white)
.padding()
VStack(alignment: .leading){
Image("1")
.resizable()
.scaledToFill()
.clipped()
.frame(width: 64, height: 64)
.clipShape(Circle())
.padding(.bottom, 16)
Text("Harrinandhaan SN")
.font(.system(size: 24, weight: .semibold))
Text("Customer Since January 2021")
.font(.system(size: 14))
.padding(.bottom, 24)
HStack(spacing: 12){
HStack(spacing: 4){
Text("Titanium").bold()
Text("Member")
}
HStack(spacing: 4){
Text("1,200").bold()
Text("Points")
}
Spacer()
}
Spacer()
} .padding()
}
}
}
struct SideMenuHeaderView_Previews: PreviewProvider {
static var previews: some View {
SideMenuHeaderView(isShowing: .constant(true))
}
}
This is my options view:
import SwiftUI
struct SideViewOptionView: View {
let viewModel: SideMenuViewModel
var body: some View {
HStack(spacing: 16){
Image(systemName: viewModel.imageName)
.frame(width: 24, height: 24)
Text(viewModel.title)
.font(.system(size: 15, weight: .semibold))
Spacer()
}
.padding()
.foregroundColor(Color.white)
}
}
struct SideViewOptionView_Previews: PreviewProvider {
static var previews: some View {
SideViewOptionView(viewModel: .home)
}
}
This is my data model:
import Foundation
enum SideMenuViewModel: Int, CaseIterable {
case home
case menu
case cart
case membership
case table
case settings
case profile
var title: String {
switch self {
case .home: return "Home"
case .menu: return "Menu"
case .cart: return "Cart"
case .membership: return "Membership"
case .table: return "Book A Table"
case .settings: return "Settings"
case .profile: return "Profile"
}
}
var imageName: String{
switch self {
case .home: return "house"
case .menu: return "list.dash"
case .cart: return "cart.fill"
case .membership: return "diamond.fill"
case .table: return "bookmark.fill"
case .settings: return "gear"
case .profile: return "person.fill"
}
}
}
And this is the menu view:
import SwiftUI
struct SideView: View {
@Binding var isShowing: Bool
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: [Color.blue, Color.purple]), startPoint: .top, endPoint: .bottom)
.ignoresSafeArea()
VStack{
SideMenuHeaderView(isShowing: $isShowing)
.foregroundColor(Color.white)
.frame(height: 240)
ForEach(SideMenuViewModel.allCases, id: \.self){ option in
SideViewOptionView(viewModel: option)
}
Spacer()
}
}.navigationBarHidden(true)
}
}
struct SideView_Previews: PreviewProvider {
static var previews: some View {
SideView(isShowing: .constant(true))
}
}
Please help!