NavigationSplitView's sidebarToggle button temporarily disappear when showing sidebar

42 views Asked by At

I have a simple macOS, targeting macOS 13.0, which displays a NavigationSplitView with a sidebar and a detail. The sidebar toggle button works as expected, except when the sidebar is hidden and I press it to show the sidebar. It disappears temporarily and causes some glitches in the view. This is the code I've written so far.

What happens, via GIPHY

import SwiftUI

@main
struct SomeApp: App
{
    var body: some Scene
    {
        WindowGroup 
        {
            MainScreen()
                .frame(minHeight: 450)
                .frame(width: 720)
                .presentedWindowToolbarStyle(.unified)
                .navigationTitle("SomeApp")
        }
        .windowResizability(.contentSize)
    }
}

enum MenuItem: Identifiable, Hashable
{
    case readme
    case about
    
    var id: String
    {
        title
    }
    
    var title: String
    {
        switch self
        {
            case .readme: "Readme"
            case .about: "About"
        }
    }
    
    var symbolName: String
    {
        switch self
        {
            case .readme: "newspaper.circle.fill"
            case .about: "info.circle.fill"
        }
    }
}

struct MainScreen: View
{
    @State var menuItems: [MenuItem]
    @State var selectedMenuItem: MenuItem
    
    init()
    {
        selectedMenuItem = .readme
        menuItems = [
            .readme,
            .about
        ]
    }
  
    var body: some View
    {
        NavigationSplitView
        {
            List(
                menuItems,
                selection: $selectedMenuItem
            ) { item in
                NavigationLink(
                    destination: {
                        switch selectedMenuItem 
                        {
                            case .readme:
                                Text("Readme")
                            
                            case .about:
                                Text("About")
                        }
                    },
                    label: {
                        HStack
                        {
                            Image(systemName: item.symbolName)
                                .resizable()
                                .frame(
                                    width: 24,
                                    height: 24
                                )
                                .foregroundStyle(
                                    .white,
                                    fillStyle(for: item)
                                )
                            
                            Text(item.title)
                        }
                    }
                )
            }
            .frame(width: 200)
        }
        detail:
        {
            Image(systemName: "command.square.fill")
                .resizable()
                .frame(width: 128, height: 128)
        }
    }
    
    private func fillStyle(for menuItem: MenuItem) -> Color
    {
        switch menuItem
        {
            case .readme: .green
            case .about: .blue
        }
    }
}

I've tried switching columnVisibility values, navigationSplitViewStyle values, assembling List in different ways, to no avail. I have experience in SwiftUI, but not with Lists or NavigationLinks for that matter, I use navigation in a different way, but I'd like to stick with this solution. Unfortunately, I can't exactly figure out what's causing this behavior.

0

There are 0 answers