I am trying to design something similar to the following scrollviews in which when I click on the “Clothing” category another horizontal scrollview appears with different subcategories. Also, I want to implement the similar back button that navigates back to the previous “super-categories”.

Below is my implementation for one horizontal scrollview (the top image above). My question is how to implement the second (or nested) horizontal scrollview so that if I click on one category “clothing” the second scrollview (the bottom image) shows up. Thanks.

                ScrollViewReader { proxy in
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHStack(spacing: 5) {
                            ForEach(categories, id: .self) { category in
                                Button(action:{
                                    selectedCat = category   
                                }, label:{
                                    Text(category)
                                    .font(.custom("AmericanTypewriter",fixedSize: 20))
                                })
                                .padding(.horizontal,10)
                                .padding(.vertical,5)
                                .foregroundColor(.black)
                                .background(selectedCat == category ? Color(UIColor(red: 143/255, green: 93/255, blue: 0/255, alpha: 1)).cornerRadius(40).opacity(0.7) : Color.white.cornerRadius(40).opacity(0))
                            }
                        }
                        .frame(maxWidth: .infinity, maxHeight: 50)
                        .background(Color(UIColor(red: 255/255, green: 248/255, blue: 242/255,    alpha: 0.6)).cornerRadius(40))
                    }
                    .onChange(of: selectedCat) { _ in
                        proxy.scrollTo(selectedCat)
                    }
                }

`