開閉式メニュー

SwithcMenu.swift

//
//  ContentView.swift
//  MenuSample
//
//  Created by satoutakeshi on 2020/12/21.
//

import SwiftUI

struct ContentView: View {
    @State var isShowMenu = false
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Button(action: {
                    withAnimation {
                        isShowMenu.toggle()
                    }
                }, label: {
                    Text("show menu")
                })
                .frame(width: UIScreen.main.bounds.width)
                MenuViewWithinSafeArea(isShowMenu: $isShowMenu,
                                       bottomSafeAreaInsets: geometry.safeAreaInsets.bottom)
                    .ignoresSafeArea(edges: .bottom)
            }
        }
    }
}

struct MenuView: View {
    @Binding var isShowMenu: Bool
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button(action: {
                    withAnimation {
                        isShowMenu = false
                    }
                }, label: {
                    Image(systemName: "checkmark")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 20, height: 20)
                        .padding()
                })
            }
            .background(Color.black.opacity(0.8))
            .foregroundColor(.white)
            .offset(x: 0, y: isShowMenu ? 0 : 300)
        }
    }
}

struct MenuViewWithinSafeArea: View {
    @Binding var isShowMenu: Bool
    let bottomSafeAreaInsets: CGFloat
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                Spacer()
                HStack {
                    Spacer()
                    Button(action: {
                        withAnimation {
                            isShowMenu = false
                        }
                    }, label: {
                        Image(systemName: "checkmark")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 20, height: 20)
                            .padding()
                    })
                    
                }
                .background(Color.black.opacity(0.8))
                .foregroundColor(.white)
                .offset(x: 0, y: isShowMenu ? 0 : geometry.size.height)

                // safe area外のコンテンツ
                Rectangle()
                    .foregroundColor(Color.red.opacity(0.8))
                    .frame(height: bottomSafeAreaInsets)
                    .edgesIgnoringSafeArea(.bottom)
                    .offset(x: 0, y: isShowMenu ? 0 : geometry.size.height)
            }
        }
    }
}



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