SettingsDemoApp.swift

import SwiftUI

@main
struct SettingsDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }

        Settings {
            SettingsView()
        }
    }
}

// MARK: - SettingsView.swift

import SwiftUI

struct SettingsView: View {
    @State private var selectedPage: SettingsPages = .generalSettings

    var body: some View {
        NavigationSplitView {
            SideBar(selectedPage: $selectedPage)
                .toolbar(removing: .sidebarToggle)
                .navigationSplitViewColumnWidth(240)
        } detail: {
            switch selectedPage {
            case .generalSettings:
                GeneralSettingsView()
            case .about:
                AboutView()
            }
        }
    }
}

#Preview {
    SettingsView()
}

// MARK: - SideBar.swift

import SwiftUI

struct SideBar: View {
    @Binding var selectedPage: SettingsPages

    var body: some View {
        List(SettingsPages.allCases, selection: $selectedPage) { page in
            Label(page.name, systemImage: page.systemImage)
                .tag(page)
        }
        .listStyle(.sidebar)
    }
}

enum SettingsPages: String, CaseIterable, Identifiable {
    case generalSettings
    case about

    var id: String {
        self.rawValue
    }

    var name: String {
        switch self {
        case .generalSettings:
            "General settings"
        case .about:
            "About"
        }
    }

    var systemImage: String {
        switch self {
        case .generalSettings:
            "slider.horizontal.3"
        case .about:
            "info.square"
        }
    }

    static var allCases: [SettingsPages] = [.generalSettings, .about]
}

#Preview {
    SideBar(selectedPage: .constant(.generalSettings))
}

// MARK: - GeneralSettings.swift

import SwiftUI

struct GeneralSettingsView: View {
    @State private var settingOneValue = false
    @State private var settingTwoValue = false
    @State private var settingThreeValue = false

    var body: some View {
        Form {
            Section {
                Toggle(isOn: $settingOneValue, label: {
                    VStack(alignment: .leading) {
                        Text("Title")
                            .font(.title2)
                        Text("Subtitle for the setting, explaining what it does")
                    }
                })
            } header: {
                Text("Section 1")
            }

            Section {
                Toggle(isOn: $settingTwoValue, label: {
                    VStack(alignment: .leading) {
                        Text("Title 2")
                            .font(.title2)
                        Text("Subtitle for the setting, explaining what it does")
                    }
                })

                Toggle(isOn: $settingThreeValue, label: {
                    VStack(alignment: .leading) {
                        Text("Title 3")
                            .font(.title2)
                        Text("Subtitle for the setting, explaining what it does")
                    }
                })
            } header: {
                Text("Section two")
            }
        }
        .formStyle(.grouped)
        .toolbar(.visible, for: .automatic)
    }
}

#Preview {
    GeneralSettingsView()
}

// MARK: - AboutView.swift

import SwiftUI

struct AboutView: View {
    var body: some View {
        VStack {
            Text("Demo app")
            Text("https://getclicker.app")
                .padding(.bottom)
        }
    }
}

#Preview {
    AboutView()
}