struct RotatingMenuItem: View {
    var icon: String

    var body: some View {
        Button(action: {}) {
            Image(systemName: icon)
                .font(.system(size: 15))
                .foregroundColor(.white)
        }.frame(width: 40, height: 40)
        .background(Color("RotatingMenuItemBG"))
        .cornerRadius(100)
    }
}
    
struct RotatingMenuView: View {
    @State private var active: Bool = false
    @State private var rock: Bool = false
    @State private var text: String = ""
    
    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    self.active.toggle()
                    self.rock.toggle()
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        self.rock.toggle()
                    }
                }) {
                    Image(systemName: "plus")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                        .rotationEffect(active ? .degrees(-135) : .degrees(0))
                        .animation(.spring())
                }.frame(width: 40, height: 40)
                .background(Color("RotatingMenuItemBG"))
                .cornerRadius(100)
                
                Spacer().frame(width: 20)
                
                ZStack {
                    
                    ZStack() {
                        TextField("", text: $text)
                            .padding(.horizontal, 15)
                            .frame(maxWidth: .infinity, maxHeight: 40)

                        HStack {
                            Text("Message")
                                .foregroundColor(.white)
                                .opacity(0.4)
                            Spacer()
                        }.padding(.leading, 15)
                        
                    }.background(Color("RotatingMenuItemBG"))
                    .cornerRadius(100)
                    .rotationEffect(self.active ? .degrees(-45) : .degrees(0), anchor: UnitPoint(x: -0.5, y: 0.5))
                    .animation(.easeInOut)

                    
                    HStack() {
                        RotatingMenuItem(icon: "video")
                        
                        Spacer()
                        
                        RotatingMenuItem(icon: "camera")
                            .offset(y: self.active ? 0 : 10)
                            .animation(Animation.easeInOut(duration: 0.1).delay(0.1))
                        
                        Spacer()
                        
                        RotatingMenuItem(icon: "photo")
                            .offset(y: self.active ? 0 : 20)
                            .animation(Animation.easeInOut(duration: 0.1).delay(0.2))
                    }.rotationEffect(self.active ? .degrees(0) : .degrees(45), anchor: UnitPoint(x: -0.5, y: 0.5))
                    .animation(.easeInOut)
                }
                
            }
            .padding(20)
            .frame(width: 260, height: 80)
            .background(Color("RotatingMenuBG"))
            .cornerRadius(100)
            .shadow(color: Color("RotatingMenuBG").opacity(0.4), radius: 30, x: 0, y: 40)
            .rotationEffect(self.rock ? (self.active ? .degrees(-6) : .degrees(6)) : .degrees(0), anchor: .leading)
            .animation(.easeInOut)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color("RotatingMenuViewBG"))
        .edgesIgnoringSafeArea(.all)
    }
}