Auto scrollable header menu - SwiftUI & Combine

Features

Auto scrollable up menu while navigating the list up and down
Navigate to any section from up menu
Smart detection the active position in the user's field of view
The menu and category color intensity automatically adjusts depending on color scheme You don't need to set color for every scheme
Various strategies for the item menu width allocation
Setting custom colors for the menu
Customize menu item style [round or square]
Multiplatform
Dark and light scheme support

Required

There are three required interfaces that have to be defined

protocol	description
IMenuItem	enum - menu categories
IListModel	struct - list item model
IItemTpl	struct - item view template

1. Enum

Define enum that conforming to IMenuItem. Protocol from package d3_menu_bar It is categories for the menu and list section headers

    import d3_menu_bar

    enum MenuItems: String, IMenuItem {

        case breakfast = "Breakfast"        
        case lunch = "Lunch"        
        case dessert = "Dessert"
    }

2. Model

Define model that conforms to IListModel.

Add fields that you need in the List line representation

    struct ListModel : IListModel{
        
        let id = UUID()
        
        let category: MenuItems
        
        let title : String
    }

3. Template

Define view for 2. Model that conforms to IItemTpl.

All representation of the template is up to you. It was included in component's API on purpose to let easily control List representation via configuration.

    struct ItemTpl: IItemTpl {

        let item: ListModel

        var body: some View {
            VStack{
                Text(item.title)
                Divider()
            }.padding()
        }
    }

4. Create Auto scrollable header menu

items - array of data
content - tpl for an item representation

    let data: [ListModel] = //Pass array of data
    ScrollableMenuList(items: data, content: { ItemTpl(item: $0) })

Optional

menuBarStrategy - default strategy for the item menu width allocation is auto

Size strategy	Description
fit	Allocate all affordable space not scrollable
auto	Auto size according the content
flex(CGFloat)	Set up minimal width

menuBarColor - default value is .blue
menuBarStyle - default style is square

Style	Description
round	rounded corners
square	squared corners

Code example

Take a look on the example preview in ScrollableMenuListExample.swift or create a project, add the package and put ScrollableMenuListExample() in ContentView()

Documentation(API)

You need to have Xcode 13 installed in order to have access to Documentation Compiler (DocC)
Go to Product > Build Documentation or ⌃⇧⌘ D

igor11191708/food-scrollable-menu-list