Nested Tabs

// Nested Tabs · syxUI · https://syxui.dev/components/nav2-nested-tabs
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let navBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

// Two-level nested tabs
struct NestedTabs: View {
    @State private var top = 0
    @State private var sub = 0
    var body: some View {
        VStack(spacing: 14) {
            HStack(spacing: 22) {
                ForEach(Array(["Shop", "Bag"].enumerated()), id: \.offset) { i, t in
                    VStack(spacing: 6) { Text(t).font(.system(size: 16, weight: top == i ? .bold : .medium)).foregroundStyle(top == i ? Color.primary : Color.secondary); Capsule().fill(top == i ? navBlue : .clear).frame(width: 24, height: 2.5) }.onTapGesture { top = i }
                }
                Spacer()
            }
            HStack(spacing: 8) {
                ForEach(Array(["All", "New", "Sale"].enumerated()), id: \.offset) { i, t in
                    Text(t).font(.system(size: 13, weight: .medium)).foregroundStyle(sub == i ? Color(.systemBackground) : Color.primary).padding(.horizontal, 14).padding(.vertical, 6).background(sub == i ? Color.primary : Color.primary.opacity(0.06), in: Capsule()).onTapGesture { sub = i }
                }
                Spacer()
            }
        }.frame(width: 320)
    }
}