How can I display a full-screen NavigationLink detail that overlays the TabBar while retaining swipe-to-go-back in SwiftUI?

One of the issues in this case is that the tab bar is actually on top of the detail content, not below it. A native tab bar is either visible or hidden, it can't be half visible. So showing half the tab bar as the detail view is swiped away will be difficult.

In order to have more control over the visibility of the tab bar, or tab bar items, a custom tab bar can be used. An example implementation of a custom tab bar can be found in this answer (it was my answer).

Based on the example in that answer, here is how a custom tab bar can be used in this case:

• Each child view of the TabView has its own copy of the custom tab bar.
• The custom tab bar is only shown for the top-level view of the NavigationStack (the List view), not for the detail views.
• This means, when navigating to the detail views of the NavigationStack, the tab bar is "left behind". However, it can be seen in the parent List view when swiping to navigate back.

SWIFTCopied
enum TabType: CaseIterable {
    case home
    case settings

    var titleKey: String {
        "\(self)".capitalized
    }

    var symbolName: String {
        switch self {
        case .home: "house"
        case .settings: "gearshape"
        }
    }
}

struct TabLabelStyle: LabelStyle {
    let isSelected: Bool

    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 4) {
            configuration.icon
                .imageScale(.large)
            configuration.title
                .font(.caption)
        }
        .symbolVariant(isSelected ? .fill : .none)
        .foregroundStyle(isSelected ? Color.accentColor : .secondary)
        .frame(maxWidth: .infinity)
    }
}

struct CustomTabBar: View {
    @Binding var selection: TabType

    var body: some View {
        HStack {
            ForEach(TabType.allCases, id: \.self) { type in
                Button {
                    selection = type
                } label: {
                    Label(type.titleKey, systemImage: type.symbolName)
                        .labelStyle(TabLabelStyle(isSelected: selection == type))
                }
            }
        }
        .padding()
    }
}

struct MainTabView: View {
    @State private var selection = TabType.home

    var body: some View {
        TabView(selection: $selection) {
            NavigationStack {
                List {
                    NavigationLink("First Detail") {
                        DetailView(title: "First Detail")
                    }
                    NavigationLink("Second Detail") {
                        DetailView(title: "Second Detail")
                    }
                    NavigationLink("Third Detail") {
                        DetailView(title: "Third Detail")
                    }
                }
                .navigationTitle("Home")
                .safeAreaInset(edge: .bottom) {
                    CustomTabBar(selection: $selection)
                }
            }
            .toolbarVisibility(.hidden, for: .tabBar)
            .tag(TabType.home)

            Text("Second Tab")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .toolbarVisibility(.hidden, for: .tabBar)
                .tag(TabType.settings)
                .safeAreaInset(edge: .bottom) {
                    CustomTabBar(selection: $selection)
                }
        }
    }
}

struct DetailView: View {
    let title: String

    var body: some View {
        ZStack {
            Color.gray.ignoresSafeArea()
            Text(title).font(.largeTitle)
        }
        .navigationTitle(title)
    }
}