Menu Animation and Binding

Author: Mithun

DesignCode/Home.swift

@@ -10,22 +10,15 @@ import SwiftUI
 
 struct Home: View {
 
-   var menu = menuData
+   @State var show = false
 
    var body: some View {
-      VStack(alignment: .leading) {
-         ForEach(menu) { item in
-            MenuRow(image: item.icon, text: item.title)
+      ZStack {
+         Button(action: { self.show.toggle() }) {
+            Text("Open Menu")
          }
-         Spacer()
+         MenuView(show: $show)
       }
-      .padding(.top, 20)
-      .padding(30)
-      .frame(minWidth: 0, maxWidth: .infinity)
-      .background(Color.white)
-      .cornerRadius(30)
-      .padding(.trailing, 60)
-      .shadow(radius: 20)
    }
 }
 
@@ -69,3 +62,31 @@ let menuData = [
    Menu(title: "Team", icon: "person.and.person"),
    Menu(title: "Sign out", icon: "arrow.uturn.down")
 ]
+
+struct MenuView: View {
+
+   var menu = menuData
+   @Binding var show: Bool
+
+   var body: some View {
+      return VStack(alignment: .leading) {
+         ForEach(menu) { item in
+            MenuRow(image: item.icon, text: item.title)
+         }
+         Spacer()
+      }
+      .padding(.top, 20)
+      .padding(30)
+      .frame(minWidth: 0, maxWidth: .infinity)
+      .background(Color.white)
+      .cornerRadius(30)
+      .padding(.trailing, 60)
+      .shadow(radius: 20)
+      .rotation3DEffect(Angle(degrees: show ? 0 : 60), axis: (x: 0, y: 10.0, z: 0))
+      .animation(.basic())
+      .offset(x: show ? 0 : -UIScreen.main.bounds.width)
+      .tapAction {
+         self.show.toggle()
+      }
+   }
+}