ios – Customized MenuView: place the menu exterior the view hierarchy when lively above all different views?

I’ve created a easy customized MenuButton. When tapped, the button exhibits some menu objects above itself. Whereas this works nice, I wish to add a overlay view for the whole display screen, which dims and blocks and the underlying views. Tapping on the overlay ought to dismiss the menu.

This creates two issues:

• With out the overlay the MenuButton has some customized measurement, e.g. 50×50 and will be positioned usually throughout the its surrounding view hierarchy. When including the overlay the MenuButton is as huge because the display screen and might thus not be positioned correctly any extra.

• When displaying the overlay whereas the menu is lively, it may solely views that are blow itself within the view hierarchy.

Is there a clear answer to unravel this?

struct MenuButton: View {
    @State personal var isExpanded = false
    let buttons: [String]
    
    
    let buttonSize: CGFloat = 60
    let itemButtonSize: CGFloat = 50
    
    var physique: some View {
        ZStack {
            // Overlay
            /*Shade.black.opacity(0.2)
                .edgesIgnoringSafeArea(.all)
                .opacity(isExpanded ? 1 : 0)
                .onTapGesture {
                    isExpanded = false
                }*/
            
            ForEach(buttons.indices, id: .self) { index in
                VStack {
                    Picture(systemName: buttons[index])
                        .body(width: itemButtonSize, top: itemButtonSize)
                        .background(Shade(.systemGray6))
                        .clipShape(Circle())
                }
                .offset(
                    x: 0,
                    y: isExpanded ? Double(index+1) * (-itemButtonSize - 20) : Double(index+1) * (-itemButtonSize + 20)
                )
                .opacity(isExpanded ? 1 : 0)
                
                .animation(isExpanded ? .spring(response: 0.2, dampingFraction: 0.5, blendDuration: 0).delay(Double(index) * 0.05) : .easeOut(length: 0.2), worth: isExpanded)
            }
            
            Button {
                withAnimation {
                    isExpanded.toggle()
                }
            } label: {
                Picture(systemName: isExpanded ? "xmark" : "plus")
                    .body(width: buttonSize, top: buttonSize)
                    .foregroundColor(.grey)
                    .background(Shade(.systemGray6))
                    .clipShape(Circle())
            }
        }
    }
}


struct MenuView: View {
    var physique: some View {
        VStack {
            Spacer()
            
            HStack {
                Spacer()
                
                MenuButton(buttons: ["circle", "star", "bell"])
                    .padding()
                
            }
            
            Textual content("Backside")
        }
    }
}


#Preview {
    MenuView()
}