Toolbar, inspector va popover

// ═══════════════════════════════════════
//  TOOLBAR — elementlar qo'shish
// ═══════════════════════════════════════
NavigationStack {
    List(1...20, id: \.self) { element in
        Text("Element \(element)")
    }
    .navigationTitle("Ro'yxat")
    .toolbar {
        // O'ng yuqori burchak
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Qo'shish", systemImage: "plus") {
                // Yangi element qo'shish
            }
        }

        // Chap yuqori burchak
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tahrirlash") {
                // Tahrirlash rejimi
            }
        }

        // Pastki panel
        ToolbarItem(placement: .bottomBar) {
            HStack {
                Button("Ulashish", systemImage: "square.and.arrow.up") { }
                Spacer()
                Button("O'chirish", systemImage: "trash", role: .destructive) { }
            }
        }
    }
}

// ═══════════════════════════════════════
//  TOOLBAR GURUH VA MENU
// ═══════════════════════════════════════
NavigationStack {
    Text("Kontent")
    .toolbar {
        // Bir nechta element guruhi
        ToolbarItemGroup(placement: .navigationBarTrailing) {
            Button("Sevimli", systemImage: "heart") { }
            Button("Ulashish", systemImage: "square.and.arrow.up") { }

            // Menu — uzun ro'yxat uchun
            Menu {
                Button("Nusxa olish", systemImage: "doc.on.doc") { }
                Button("Tahrirlash", systemImage: "pencil") { }
                Divider()
                Button("O'chirish", systemImage: "trash", role: .destructive) { }
            } label: {
                Image(systemName: "ellipsis.circle")
            }
        }
    }
}


// ═══════════════════════════════════════
//  TOOLBAR SARLAVHA MENYU
// ═══════════════════════════════════════
NavigationStack {
    Text("Kontent")
    .navigationTitle("Loyihalar")
    .toolbarTitleMenu {
        // Sarlavhani bosganda menyu
        Button("Barchasi") { }
        Button("Faollar") { }
        Button("Arxiv") { }
    }
}

// ═══════════════════════════════════════
//  POPOVER — kichik informatsion oyna
// ═══════════════════════════════════════
struct PopoverMisol: View {
    @State private var infoKorsatish = false

    var body: some View {
        Button("Ma'lumot", systemImage: "info.circle") {
            infoKorsatish = true
        }
        .popover(isPresented: $infoKorsatish) {
            VStack(alignment: .leading, spacing: 12) {
                Text("Qo'shimcha ma'lumot")
                .font(.headline)
                Text("Bu popover — iPad da elementga yopishib ko'rinadi, iPhone da sheet bo'ladi.")
                .foregroundStyle(.secondary)
            }
            .padding()
            .presentationCompactAdaptation(.popover)
            // iPhone da ham popover sifatida ko'rsatish
        }
    }
}

// ═══════════════════════════════════════
//  INSPECTOR — tafsilotlar paneli (iOS 17+)
// ═══════════════════════════════════════
struct InspectorMisol: View {
    @State private var tanlangan: String?
    @State private var inspectorKorsatish = false

    var body: some View {
        NavigationStack {
            List(["Ali", "Vali", "Gani"], id: \.self) { ism in
                Text(ism)
                .onTapGesture {
                    tanlangan = ism
                    inspectorKorsatish = true
                }
            }
            .navigationTitle("Foydalanuvchilar")
            .inspector(isPresented: $inspectorKorsatish) {
                // iPad: o'ng panelda ko'rinadi
                // iPhone: sheet sifatida
                VStack(alignment: .leading) {
                    Text(tanlangan ?? "Tanlanmagan")
                    .font(.title)
                    Text("Tafsilotlar...")
                    .foregroundStyle(.secondary)
                }
                .padding()
                .inspectorColumnWidth(min: 200, ideal: 300, max: 400)
            }
        }
    }
}