FREE TRIAL: Accelerate your app development career with Hacking with Swift+! >>

How can I make each button go to a separate page in Swift UI

Forums > SwiftUI

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!

   

Lots of code there, but I think yourr answere lies in using NavigationLinks.

NavigationLink(destination: SomeOtherView()) {
    Text("Go To Other View")
        .font(.headline)
        .foregroundColor(.blue)
    Image(systemName: "plus")
        .font(.headline)
        .foregroundColor(.blue)
}

That's the beauty of the NavigationView.

   

Hacking with Swift is sponsored by Essential Developer

SPONSORED From August 2nd to 8th you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!

Save your spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.