How to Indicate Selected State for a Menu Toolbar Item (Filter) in SwiftUI?

hi,

On my page’s toolbar, I have a toolbar item that is implemented as a menu. Its purpose is to filter the content displayed on the page, similar to the filtering feature in the Photos app. When a user selects a filter option, I want the toolbar item to appear highlighted to indicate the active state.

I came across the following guidance in the Human Interface Guidelines:

Provide a selected-state version of an interface icon only if necessary. You don’t need to provide selected and unselected appearances for an icon that’s used in standard system components such as toolbars, tab bars, and buttons. The system updates the visual appearance of the selected state automatically. An image of two toolbar buttons that share a background. The left button shows the Filter icon in a selected state, using a blue tint color for its background. The right button shows the More icon in an unselected state, using the default appearance for toolbar buttons. In a toolbar, a selected icon receives the app’s accent color.

However, I’m not sure how to actually implement or control the selected state for my toolbar item.

Here is a snippet of my code:

ToolbarItem(placement: .topBarTrailing) {
                    Menu {
                        Section {
                            LayoutPickerView(layoutOption: $layoutOption)
                        }

                        Section {
                            SortPickerView(sortOption: $viewModel.sortOption)
                        }

                        Section {
                            Menu {
                                Toggle(
                                    isOn: Binding(
                                        get: { viewModel.filterPlatforms.isEmpty },
                                        set: { if $0 { viewModel.filterPlatforms.removeAll() } }
                                    )
                                ) {
                                    HStack {
                                        Image(systemName: "square.grid.3x3")
                                            .resizable()
                                            .scaledToFit()
                                            .frame(width: 30, height: 30)
                                        Text(Localized.Content.filterAllPlatforms)
                                    }
                                }
                                .menuActionDismissBehavior(.disabled)

                                Divider()

                                ForEach(viewModel.availablePlatforms(from: contents)) { platform in
                                    Toggle(isOn: viewModel.platformBinding(for: platform)) {
                                        HStack {
                                            CachedPlatformIconView(urlString: platform.iconUrl, size: 30)
                                            Text(platform.name)
                                        }
                                    }
                                    .menuActionDismissBehavior(.disabled)
                                }
                            } label: {
                                Text(Localized.Content.filterMenu)
                                Text(viewModel.filterPlatforms.map(\.name).joined(separator: String(localized: Localized.Content.separator)))
                            }

                            if !viewModel.filterPlatforms.isEmpty {
                                Button {
                                    viewModel.filterPlatforms.removeAll()
                                } label: {
                                    Text(Localized.Content.filterClear)
                                }
                            }
                        }
                    } label: {
                        Image(systemName: "line.3.horizontal.decrease")
                    }
                }