diff --git a/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift b/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift index d6a97376c895..e6c707ad54e1 100644 --- a/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift +++ b/WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationButton.swift @@ -6,23 +6,16 @@ struct ReaderNavigationButton: View { var body: some View { Menu { - ForEach(viewModel.filterItems, id: \.self) { item in - menuButton(for: item) - } - if viewModel.listItems.count > 0 { + ForEach(menuItemGroups, id: \.self) { group in Section { - if viewModel.listItems.count > 2 { - Menu { - ForEach(viewModel.listItems, id: \.self) { item in - menuButton(for: item) - } - } label: { - Text(Strings.lists) - } - } else { - ForEach(viewModel.listItems, id: \.self) { item in - menuButton(for: item) + ForEach(group, id: \.self) { item in + menuButton(for: item) + } + if group == menuItemGroups.last && viewModel.listItems.count > 0 { + if !FeatureFlag.readerTagsFeed.enabled { + Divider() } + listMenuItem } } } @@ -38,6 +31,38 @@ struct ReaderNavigationButton: View { } } + private var menuItemGroups: [[ReaderTabItem]] { + var items: [[ReaderTabItem]] = [[]] + var currentGroup = 0 + for item in viewModel.filterItems { + if item.content.type == .saved || item.content.type == .tags { + currentGroup += 1 + items.append([item]) + continue + } + items[currentGroup].append(item) + } + + return items + } + + @ViewBuilder + private var listMenuItem: some View { + if viewModel.listItems.count > 2 { + Menu { + ForEach(viewModel.listItems, id: \.self) { item in + menuButton(for: item) + } + } label: { + Text(Strings.lists) + } + } else { + ForEach(viewModel.listItems, id: \.self) { item in + menuButton(for: item) + } + } + } + private func menuLabel(for item: ReaderTabItem) -> some View { /// There's a bug/unexpected behavior with how `SwiftUI.Menu`'s label "twitches" when it's animated. /// Using `ZStack` is a hack to prevent the "container" view from twitching during animation.