スワイプで左から出てくるスライドメニュー使用時に、NavigationViewがうまく表示されない

Question

前提・実現したいこと

SwiftUIにて画面を作成しています。
画面左端から右にスワイプを行うとせりだしてくるタイプのサイドメニューのバックにNavigationViewを用いたメインコンテンツを表示し、
サイドメニューでの操作によってNavigationView内のコンテンツの移動などを実現したいと考えています。

↓実現イメージ

発生している問題・エラーメッセージ

ZStack内にメインコンテンツ(NavigationView内)とサイドメニュー用のViewを配置して実行したところ、以下の問題点が発生しました。

画像①のように、最初に真っ白な背景が表示されてしまいます。本当はメインコンテンツのビューが初期から表示されるようにしたいと考えています。

左上の「＜」を押下することでメインコンテンツのビューは表示されるものの、画像②のようにサイドメニューとほぼ同じ大きさの細い表示となってしまっています。

NavigationViewを初期から画面いっぱいに表示するにはどのような方法をとればよいのでしょうか？

↓画像①：画面初期状態。真っ白。本来はメインコンテンツのビューが初期から表示されてほしい。

↓画像②：左上の「＜」押下時。メインコンテンツのビューが表示されるものの、サイドメニューと同じく細長い形で表示されてしまう。

↓画像③：参考。左からスワイプしてのメニュー表示状態。（画像一部加工）

該当のソースコード

import SwiftUI

class EnvStatus: ObservableObject {
    @Published var isTwinMenu: Bool = false
}

struct DragMainMenuView: View {
    // offset変数でメニューを表示・非表示するためのオフセット
    @State private var offset = CGFloat.zero
    @State private var closeOffset = CGFloat.zero
    @State private var openOffset = CGFloat.zero
    
    //スライドメニュー1つあたりの幅の画面に対する比率
    static let MENU_WIDTH_RECIO_SINGLE: Double = 0.4
    
    //スライドメニュー1つあたりの幅の画面に対する比率-
    @State var menuWidthRecio: Double = DragMainMenuView.MENU_WIDTH_RECIO_SINGLE
    
    //他画面から受け取る情報
    @ObservedObject var envStat_DragMainMenuView: EnvStatus = EnvStatus()
    
    var body: some View {
        // 画面サイズの取得にGeometoryReaderを利用
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                
                NavigationView {
                    // メインコンテンツ
                    MainContentsView()
                            
                    .background(Color.white)
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
                    .navigationBarTitle("This is bar", displayMode: .inline)
                    .edgesIgnoringSafeArea(.vertical)
                }
                
                // スライドメニュー
                SideMenuView().environmentObject(envStat_DragMainMenuView)
                    .background(Color.white)
                    .frame(width: geometry.size.width * CGFloat(self.menuWidthRecio))
                    .edgesIgnoringSafeArea(.bottom)
                    // 最初に画面のオフセットの値をスライドメニュー分マイナス
                    .onAppear(perform: {
                        self.offset = geometry.size.width * -1
                        self.closeOffset = self.offset
                        self.openOffset = .zero
                    })
                    .offset(x: self.offset)
                    // スライドのアニメーションを設定
                    .animation(.default)
            }
            // ジェスチャー
            // スワイプのしきい値を設定してユーザの思わぬメニューの出現を防ぐ
            .gesture(DragGesture(minimumDistance: 5)
                    .onChanged{ value in
                        // オフセットの値(メニューの位置)をスワイプした距離に応じて狭める
                        if (self.offset < self.openOffset) {
                            self.offset = self.closeOffset + value.translation.width
                        }
                    }
                    .onEnded { value in
                        // スワイプの終了位置が開始位置よりも右だったらメニューを開く
                        if (value.location.x > value.startLocation.x) {
                            self.offset = self.openOffset
                        } else {
                            self.offset = self.closeOffset
                        }
                    }
                )
        }
        //メニューが2本表示か1本表示かによってメニューの幅を変化させる
        .onChange(of: self.envStat_DragMainMenuView.isTwinMenu, perform: { value in
            if value {
                menuWidthRecio = DragMainMenuView.MENU_WIDTH_RECIO_SINGLE * 2.0
            }
            else {
                menuWidthRecio = DragMainMenuView.MENU_WIDTH_RECIO_SINGLE
            }
        })
        
    }
}

試したこと

MainContentsViewやNavigationViewにframeモディファイアにて幅を画面いっぱいに設定してみましたが、表示幅は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Xcode：Ver.12.3
シミュレータiOS：14.3
Swift：Ver.5.3.2

Answer 1

NavigationViewについて、以下のように記述した時、原則として（画面が広い場合）

・View2は背面側に配置される
・View1は前面にサイドメニューとして表示される

という仕様ですが、

NavigationView {
    View1()
    View2()
}

以下のようにViewをひとつだけ定義した場合は

・背面側にはなにもなし（NavigationBarのみ表示される）
・View1は前面にサイドメニューとして表示される

という動きになるようです。

NavigationView {
    View1()
}

今回は後者にあたるパターンであったため、
メインコンテンツ用のビューがサイドメニュー扱いで細長く表示されていた、
というだけのことでした。
おさがわせしました。