Making the macOS sidebar visible again

Question

Created Apr ’24

Replies 1

Boosts 0

Participants 2

I was coding a sidebar on macOS and folded it with my mouse, but every time I run the app, I can't see the sidebar, so I can't use the sidebar.

If you add a new image once, you can't see the same, but the third window also shows the sidebar well. I don't know why

It's similar when you run it on another computer at all.

Current code

import CoreData

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext
    
    @State private var isSidebarVisible: Bool = true

    var body: some View {
        NavigationView {
            if isSidebarVisible {
                Sidebar()
            }
            MemoListView().environment(\.managedObjectContext, viewContext)
        }
        .frame(minWidth: 700, minHeight: 400)
        .toolbar {
           
            ToolbarItem(placement: .navigation) {
                Button(action: toggleSidebar) {
                    Image(systemName: "sidebar.leading")
                }
            }
        }
    }
    
    
    private func toggleSidebar() {
        withAnimation {
            isSidebarVisible.toggle()
        }
    }

    struct Sidebar: View {
        @Environment(\.managedObjectContext) private var viewContext

        var body: some View {
            List {
                NavigationLink(destination: EasyWebListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Web Links", systemImage: "link")
                }
                NavigationLink(destination: MemoListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Memos", systemImage: "note.text")
                }
                NavigationLink(destination: ThemeListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Themes", systemImage: "photo.on.rectangle.angled")
                }
                NavigationLink(destination: AccessView().environment(\.managedObjectContext, viewContext)) {
                    Label("Access Records", systemImage: "clock.fill")
                }
            }
            .navigationTitle("My App")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}

And the code used when there was a problem before.

import CoreData

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext
    @State private var isSidebarVisible: Bool = true

    var body: some View {
        NavigationView {
            Sidebar().environment(\.managedObjectContext, viewContext)
            MemoListView().environment(\.managedObjectContext, viewContext)
        }
        .frame(minWidth: 700, minHeight: 400)
        .toolbar {
           
            ToolbarItem(placement: .navigation) {
                Button(action: {
                    withAnimation {
                        isSidebarVisible.toggle()
                    }
                }) {
                    Image(systemName: "sidebar.leading")
                }
            }
        }
    }

    struct Sidebar: View {
        @Environment(\.managedObjectContext) private var viewContext

        var body: some View {
            List {
                NavigationLink(destination: EasyWebListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Web Links", systemImage: "link")
                }
                NavigationLink(destination: MemoListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Memos", systemImage: "note.text")
                }
                NavigationLink(destination: ThemeListView().environment(\.managedObjectContext, viewContext)) {
                    Label("Themes", systemImage: "photo.on.rectangle.angled")
                }
                NavigationLink(destination: AccessView().environment(\.managedObjectContext, viewContext)) {
                    Label("Access Records", systemImage: "clock.fill")
                }
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("My App")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}

Boost

Answer 1

ssmith_c OP

Apr ’24

have you tried using NavigationSplitView. The code below puts a disclosure button in the toolbar area (on the right, close to the traffic light buttons), and a hide/show menu item in the menu bar, as appropriate. No need to mention the toolbar button explicitly.

struct ContentView: View {
    var body: some View {
        NavigationSplitView { 
                SidebarView() } 
            detail: {
                DetailView() }
    }
}

struct SidebarView: View {
    var body: some View {
        Text("sidebar")
    }
}

struct DetailView: View {
    var body: some View {
        Text("detail")
    }
}

0