I’m trying to create a custom tab bar in SwiftUI similar to the one in the Microsoft Teams app iOS. Specifically, I need the following functionality:

When the “More” tab item is pressed, a transparent overlay view should open, displaying additional options.
Selecting any item in this overlay should set it as the root view for the “More” tab.
I’ve attached a screenshot for reference.

struct ContentView: View {
    @State private var selectedTab = 0
    @State private var showMoreOptions = false

    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                Text("Teams").tabItem { Label("Teams", systemImage: "person.3") }.tag(0)
                Text("Chat").tabItem { Label("Chat", systemImage: "message") }.tag(1)
                Text("Calendar").tabItem { Label("Calendar", systemImage: "calendar") }.tag(2)
                Text("Calls").tabItem { Label("Calls", systemImage: "phone") }.tag(3)
                Text("More").tabItem { Label("More", systemImage: "ellipsis") }
                    .tag(4)
                    .onTapGesture {
                        showMoreOptions.toggle()
                    }
            }

            if showMoreOptions {
                TransparentOverlayView()
            }
        }
    }
}

i stuck here to implement the same logic which is there in teams app.

Any help or suggestions to implement this in SwiftUI would be greatly appreciated!