Add title section to settingsdialog

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/AppSettingsDialog/AppSettingsDialog.vue

@@ -28,7 +28,7 @@ providing the section's title prop. You can put your settings within each
 <template>
 	<div>
 		<button @click="settingsOpen = true">Show Settings</button>
-		<AppSettingsDialog :open.sync="settingsOpen" showNavigation=true>
+		<AppSettingsDialog :open.sync="settingsOpen" title="Application settings" :showNavigation=true>
 			<AppSettingsSection title="Example title 1">
 				Some example content
 			</AppSettingsSection>
@@ -91,6 +91,14 @@ export default {
 			type: String,
 			default: 'body',
 		},
+
+		/**
+		 * Title of the settings
+		 */
+		title: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
@@ -265,19 +273,30 @@ export default {
 				on: {
 					close: () => { this.handleCloseModal() },
 				},
+			},
+			createElement('div', {
+				attrs: {
+					class: 'app-settings',
+				},
 			}, [
 				createElement('div', {
 					attrs: {
-						class: 'app-settings',
+						class: 'app-settings__title',
+					},
+				}, this.title),
+				createElement('div', {
+					attrs: {
+						class: 'app-settings__content',
 					},
 				}, [...createAppSettingsNavigation(),
 					createElement('div', {
 						attrs: {
-							class: 'app-settings__content',
+							class: 'app-settings__settings',
 						},
 						ref: 'settingsScroller',
 					}, this.$slots.default)]),
-			])
+			]),
+			)
 		} else {
 			return undefined
 		}
@@ -294,12 +313,17 @@ export default {
 
 .app-settings {
 	display: flex;
+	flex-direction: column;
 	width: 100%;
 	&__navigation {
 		min-width: 200px;
 		margin-right: 20px;
 	}
 	&__content {
+		display: flex;
+		width: 100%;
+	}
+	&__settings {
 		max-width: 100vw;
 		overflow-y: auto;
 		overflow-x: hidden;