POC Navigator, driven by ObservableObject

ContentView.swift

import SwiftUI

class NavState: ObservableObject {
    @Published var modalActive = false
    @Published var navDepth = 0
}


struct ContentView: View {
    @EnvironmentObject var navState: NavState
    
    var body: some View {
        GeometryReader { gr in
            ZStack(alignment: .top) {
                Page(width: gr.size.width, height: gr.size.height, depth: self.navState.navDepth) {
                    VStack(spacing: 10) {
                        Spacer()
                        Text("Hello, World! \(gr.size.width) \(gr.size.height)")
                        Button(action: {
                            self.navState.modalActive.toggle()
                        }) {
                            Text("Show modal")
                        }
                        Button(action: {
                            self.navState.navDepth = -1
                        }) {
                            Text("Go to next page")
                        }
                        Button(action: {
                            self.navState.navDepth = -2
                        }) {
                            Text("Go to third page")
                        }
                        Spacer()
                    }
                }
                
                Page(width: gr.size.width, height: gr.size.height, depth: self.navState.navDepth + 1) {
                    VStack(spacing: 10) {
                        Text("Hello, World again \(gr.safeAreaInsets.top)")
                        Button(action: {
                            self.navState.modalActive.toggle()
                        }) {
                            Text("Show modal")
                        }
                        Button(action: {
                            self.navState.navDepth = -2
                        }) {
                            Text("Go to third page")
                        }
                        Button(action: {
                            self.navState.navDepth = 0
                        }) {
                            Text("Go back")
                        }
                        Spacer()
                    }.frame(width: gr.size.width, height: gr.size.height - gr.safeAreaInsets.top)
                        .background(Color.orange)
                        .offset(CGSize(width: 0, height: gr.safeAreaInsets.top))
                }
                
                Page(width: gr.size.width, height: gr.size.height, depth: self.navState.navDepth + 2) {
                    VStack(spacing: 10) {
                        Text("Hello, World again \(gr.safeAreaInsets.top)")
                        Button(action: {
                            self.navState.modalActive.toggle()
                        }) {
                            Text("Show modal")
                        }
                        Button(action: {
                            self.navState.navDepth = -1
                        }) {
                            Text("Go back One")
                        }
                        Button(action: {
                            self.navState.navDepth = 0
                        }) {
                            Text("Go back")
                        }
                        Spacer()
                    }.frame(width: gr.size.width, height: gr.size.height - gr.safeAreaInsets.top)
                        .background(Color.green)
                        .offset(CGSize(width: 0, height: gr.safeAreaInsets.top))
                }
                
                VStack {
                    Text("Modal")
                    Button(action: {
                        self.navState.modalActive.toggle()
                    }) {
                        Text("Dismiss")
                    }
                }.frame(width: gr.size.width, height: gr.size.height - 120)
                    .background(Color.yellow)
                    .offset(CGSize(width: 0, height: self.navState.modalActive ? 120 : gr.size.height))
            }
        }.edgesIgnoringSafeArea(.all).animation(.easeInOut)
    }
}

struct Page<Content: View>: View {
    var width: CGFloat
    var height: CGFloat
    var depth: Int
    var content: () -> Content
    
    init(width: CGFloat, height: CGFloat, depth: Int, @ViewBuilder content: @escaping () -> Content) {
        self.width = width
        self.height = height
        self.depth = depth
        self.content = content
    }
    
    var body: some View {
        VStack {
            self.content()
        }.frame(width: width, height: height)
            .offset(CGSize(width: CGFloat(depth) * width, height: 0))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environmentObject(NavState())
    }
}