(tvOS) Categories or Selection Menus Don't Fit the Design

Hi everyone, I'm currently working on my own Apple TV app. So far, things are going pretty well, but right now, I'm stuck on the design of the categories or selection menus.

Here's a screenshot of how it looks right now:

The green color and the border are intentionally added for now so I can see what is where. My actual goal is to remove the gray bar (or is this the "main bar"?). The pink bar and its border are just design elements that can be removed if needed. I want it to look more "original," like this:

Here is the code:

    let title: String
    let isSelected: Bool

    var body: some View {
        HStack {
            Text(title)
                .foregroundColor(isSelected ? .black : .white)
                .font(.system(size: 22, weight: .regular))
                .padding(.leading, 20)

            Spacer()

            Image(systemName: "chevron.right")
                .foregroundColor(isSelected ? .black : .gray)
                .padding(.trailing, 20)
        }
        .frame(height: 50) // Einheitliche Höhe für die Kategorien
        .background(Color.pink) // Innerer Hintergrund auf pink gesetzt
        .cornerRadius(10) // Abrundung direkt auf den Hintergrund anwenden
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.green, lineWidth: 3) // Äußerer Rahmen auf grün gesetzt
        )
        .padding(.horizontal, 0) // Entferne äußere Ränder
        .background(Color.clear) // Entferne alle anderen Hintergründe
    }
}

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}

I’ve adjusted the code, but it’s still not quite right. When a category is not selected, it appears black instead of gray, like in the original design

Here is the code:

struct SettingsView: View {
    @State private var selectedCategory: String?

    var body: some View {
        NavigationStack {
            ZStack {
                Color.black
                    .edgesIgnoringSafeArea(.all)

                VStack(spacing: 0) {
                    // Überschrift oben in der Mitte
                    Text("Einstellungen")
                        .font(.system(size: 40, weight: .semibold))
                        .foregroundColor(.white)
                        .padding(.top, 30)

                    HStack {
                        // Linke Seite mit Logo
                        VStack {
                            Spacer()
                            Image(systemName: "applelogo")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 120, height: 120)
                                .foregroundColor(.white)
                            Spacer()
                        }
                        .frame(width: UIScreen.main.bounds.width * 0.4)

                        // Rechte Seite mit Kategorien
                        VStack(spacing: 15) {
                            ForEach(categories, id: \.self) { category in
                                NavigationLink(
                                    value: category,
                                    label: {
                                        SettingsCategoryView(
                                            title: category,
                                            isSelected: selectedCategory == category
                                        )
                                    }
                                )
                                .buttonStyle(PlainButtonStyle())
                            }
                        }
                        .frame(width: UIScreen.main.bounds.width * 0.5)
                    }
                }
            }
            .navigationDestination(for: String.self) { value in
                Text("\(value)-Ansicht")
                    .font(.title)
                    .foregroundColor(.white)
                    .navigationTitle(value)
            }
        }
    }

    private var categories: [String] {
        ["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"]
    }
}

struct SettingsCategoryView: View {
    let title: String
    let isSelected: Bool

    var body: some View {
        HStack {
            Text(title)
                .foregroundColor(.white)
                .font(.system(size: 22, weight: .medium))
                .padding(.leading, 20)

            Spacer()

            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
                .padding(.trailing, 20)
        }
        .frame(height: 50) // Einheitliche Höhe für die Kategorien
        .background(isSelected ? Color.gray.opacity(0.3) : Color.clear) // Hervorhebung des ausgewählten Elements
        .cornerRadius(8) // Abgerundete Ecken
        .scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation
        .animation(.easeInOut, value: isSelected)
    }
}

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}