Implementing the same navigation as the macOS Notes app using NavigationSplitView

I am attempting to clone the Notes app.

I am implementing a 3-column layout using NavigationSplitView.

var body: some View {
    NavigationSplitView {
        GroupListView(selectedGroup: $selectedGroup)
    } content: {
        DiaryListView(selectedDiary: $selectedDiary)
            .environment(\.horizontalSizeClass, horzSizeClass)
    } detail: {
        DiaryView(diary: selectedDiary)
            .environment(\.horizontalSizeClass, horzSizeClass)
    }
}

In WindowGroup, I have hidden the title bar.

WindowGroup {
    MainLayoutView()
        .environmentObject(auth)
}
.windowStyle(.hiddenTitleBar)

In the "Content" column, I am displaying a list using List and have added buttons using .toolbar.

However, since there is no background, the content overlaps.

On the other hand, if I show the title bar again, the "Content" and "Detail" columns are not visually distinguished in the title bar.

How can I implement it exactly like the Notes app?

The title bar divides into two sides only if you have toolbar items on both the content and detail columns (which the Notes app does have).

For example,

NavigationSplitView {
    List {}
} content: {
    List {}
        .toolbar {
            Button("X") {}
        }
} detail: {
    List {}
        .toolbar {
            Button("Y") {}
        }
}

produces

or

depending on how you have resized the columns. This is consistent with how Notes.app behaves.

If only one of the columns of your app have tool bar items, but you still want a divider, you can add a Spacer() to the toolbar of the column that does not have tool bar items.