Tabulated settings page

settings.ts

export class SampleSettingTab extends PluginSettingTab {
	plugin: MyPlugin;
	settingsPage: HTMLElement;

	YOUR_TABS = {
		'first-tab-id': {
			name: 'First tab',
			icon: 'coffee',
		},
		'second-tab-id': {
			name: 'Second tab',
			icon: 'star',
		}
	}

	constructor(app: App, plugin: MyPlugin) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		const {containerEl} = this;

		containerEl.empty();


		const tabBar = containerEl.createEl('nav', { cls: 'settings-tab-bar' });
		for (const [tabId, tabInfo] of Object.entries(this.YOUR_TABS)) {
			const tabEl = tabBar.createEl('div', {cls: 'settings-tab'});
			const tabIcon = tabEl.createEl('div', {cls: 'settings-tab-icon'});
			setIcon(tabIcon, tabInfo.icon);
			const tabName = tabEl.createEl('div', {cls: 'settings-tab-name', text: tabInfo.name});
			tabEl.addEventListener('click', () => {
				// @ts-ignore
				for (const tabEl of tabBar.children)
					tabEl.removeClass('settings-tab-active');

				tabEl.addClass('settings-tab-active');
				this.renderSettingsPage(tabId);
			});
		}
		this.settingsPage = containerEl.createEl('div', { cls: 'settings-tab-page' });
		this.renderSettingsPage('first-tab-id');
	}

	renderSettingsPage(tab: string) {
		this.settingsPage.empty();
		switch (tab) {
			case 'first-tab-id':
				// render first tab
				this.firstTabPage();
				break;
			case 'second-tab-id':
				// render second tab
				this.secondTabPage();
				break;
		}
	}

	firstTabPage() {
		const newElement = this.settingsPage.createEl('h1', { text: 'First tab' });
	}

	secondTabPage() {
		const newElement = this.settingsPage.createEl('h1', { text: 'Second tab' });
		new Setting(this.settingsPage)
			.setName('Setting #1')
			.setDesc('It\'s a secret')
			.addText(text => text
				.setPlaceholder('Enter your secret')
				.setValue(this.plugin.settings.mySetting)
				.onChange(async (value) => {
					console.log('Secret: ' + value);
					this.plugin.settings.mySetting = value;
					await this.plugin.saveSettings();
				}));
	}
}

styles.css

/*

This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.

If your plugin does not need CSS, delete this file.

*/


.settings-tab-bar {
	display: flex;
	flex-direction: row;
}

.settings-tab {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--size-4-2);
	padding: 10px;
	border: 1px solid var(--background-modifier-border)
}

.settings-tab-active {
	background-color: var(--color-accent);
	color: var(--text-on-accent);
}

.settings-tab-name {
	font-weight: bold;
}

.settings-tab-icon {
	display: flex;
}

How it looks: