I have a sheet on which I wish to show the title of the view in a specific way. The title should be leading and should not be horizontally alignment with tool bar trailing item, but should be below it. Please refer the attached screenshots since it’s easier to explain it that way.

Code:

import Foundation
import SwiftUI

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        VStack {
            Text("Hello World")
        }
        .onAppear {
            showSheet = true
        }
        .sheet(isPresented: self.$showSheet) {
            SheetA()
        }
    }
}

struct SheetA: View {
    @Environment(.presentationMode) private var presentationMode
    
    var body: some View {
        NavigationStack {
            ZStack {
                Color.gray.opacity(0.1).ignoresSafeArea(.all)
                VStack {
                    Text("This is sheet A. Navigation title should be below 'Done' button")
                }
            }
            .toolbarBackground(Color.gray.opacity(0.1), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    VStack {
                        Text("").font(.body.bold()).foregroundStyle(Color.primary)
                        ScrollView(.horizontal, showsIndicators: false) {
                            Text("Hello World. How are you?").font(.largeTitle.bold())
                                .foregroundStyle(Color.primary)
                        }
                    }
                    .padding(.top, 40.0)
                    .padding(.bottom, 10.0)
                }
                
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        presentationMode.wrappedValue.dismiss()
                    } label: {
                        Text("Done").font(.body.bold()).foregroundStyle(Color.blue)
                    }
                }
            }
            .interactiveDismissDisabled(presentationMode.wrappedValue.isPresented) /// disable dismiss with a drag/slide-down.

        }
    }
}

What I want:

What I am getting with my code:

I want “Hello World – How are you?” line right above the navigation bar line and the text should cover the space below ‘Done’ button as well, just like it does in the first screenshot.

How do I achieve this?