diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
index 84b53cd9e8..b1d1bf4c96 100644
--- a/src/components/AppSidebar/AppSidebar.vue
+++ b/src/components/AppSidebar/AppSidebar.vue
@@ -123,7 +123,7 @@
 				</div>
 
 				<!-- sidebar details -->
-				<div v-if="!empty" :class="{ 'app-sidebar-header__desc--with-star': canStar, 'app-sidebar-header__desc--with-subtitle': subtitle && !titleEditable, 'app-sidebar-header__desc--editable': titleEditable && !subtitle, 'app-sidebar-header__desc--with-subtitle--editable': titleEditable && subtitle}" class="app-sidebar-header__desc">
+				<div v-if="!empty" :class="{ 'app-sidebar-header__desc--with-star': canStar, 'app-sidebar-header__desc--with-subtitle': subtitle && !titleEditing, 'app-sidebar-header__desc--editable': titleEditing && !subtitle, 'app-sidebar-header__desc--with-subtitle--editable': titleEditing && subtitle}" class="app-sidebar-header__desc">
 					<!-- favourite icon -->
 					<a v-if="canStar"
 						:class="{ 'icon-starred': isStarred&& !starLoading, 'icon-star': !isStarred && !starLoading, 'icon-loading-small': starLoading }"
@@ -131,30 +131,34 @@
 						@click.prevent="toggleStarred" />
 
 					<!-- main title -->
-					<h2 v-if="!titleEditable" class="app-sidebar-header__title">
-						{{ title }}
-					</h2>
-					<template v-if="titleEditable">
-						<form
-							class="rename-form"
-							@submit.prevent="onSubmitTitle">
-							<input
-								v-focus
-								class="app-sidebar-header__title-input"
-								type="text"
-								:placeholder="titlePlaceholder"
-								:value="title"
-								@keydown.esc="onDismissEditing"
-								@input="onTitleInput">
-							<button
-								class="icon-confirm"
-								type="submit" />
-						</form>
-					</template>
-					<!-- secondary title -->
-					<p v-if="subtitle.trim() !== ''" class="app-sidebar-header__subtitle">
-						{{ subtitle }}
-					</p>
+					<div class="app-sidebar-header__title">
+						<h2 v-show="!titleEditing" class="app-sidebar-header__maintitle" @click="editTitle($event)">
+							{{ title }}
+						</h2>
+						<template v-if="titleEditing">
+							<form
+								v-click-outside="() => onSubmitTitle()"
+								class="app-sidebar-header__maintitle-form"
+								@submit.prevent="onSubmitTitle">
+								<input
+									ref="titleInput"
+									v-focus
+									class="app-sidebar-header__maintitle-input"
+									type="text"
+									:placeholder="titlePlaceholder"
+									:value="title"
+									@keydown.esc="onDismissEditing"
+									@input="onTitleInput">
+								<button
+									class="icon-confirm"
+									type="submit" />
+							</form>
+						</template>
+						<!-- secondary title -->
+						<p v-if="subtitle.trim() !== ''" class="app-sidebar-header__subtitle">
+							{{ subtitle }}
+						</p>
+					</div>
 
 					<!-- header main menu -->
 					<Actions v-if="$slots['secondary-actions']" class="app-sidebar-header__menu" :force-menu="forceMenu">
@@ -178,6 +182,7 @@ import Actions from '../Actions'
 import Focus from '../../directives/Focus'
 import l10n from '../../mixins/l10n'
 import AppSidebarTabs from '../AppSidebarTabs/AppSidebarTabs'
+import { directive as ClickOutside } from 'v-click-outside'
 
 export default {
 	name: 'AppSidebar',
@@ -187,6 +192,7 @@ export default {
 	},
 	directives: {
 		focus: Focus,
+		ClickOutside,
 	},
 	mixins: [l10n],
 	props: {
@@ -199,8 +205,13 @@ export default {
 			default: '',
 			required: true,
 		},
+
+		/**
+		 * Allow to edit the sidebar title.
+		 * Accepts true, false, and 'toggle' for showing the input on click.
+		 */
 		titleEditable: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false,
 		},
 		titlePlaceholder: {
@@ -267,6 +278,7 @@ export default {
 	data() {
 		return {
 			isStarred: this.starred,
+			editing: false,
 		}
 	},
 
@@ -280,6 +292,9 @@ export default {
 		hasFigureClickListener() {
 			return this.$listeners['figure-click']
 		},
+		titleEditing() {
+			return this.titleEditable === 'toggle' ? this.editing : this.titleEditable
+		},
 	},
 
 	watch: {
@@ -314,6 +329,19 @@ export default {
 			this.$emit('update:starred', this.isStarred)
 		},
 
+		editTitle(event) {
+			// Don't edit the title if editing is disabled
+			if (this.titleEditable === false) {
+				return
+			}
+			this.editing = true
+			// Focus the title input
+			this.$nextTick(
+				() => this.$refs.titleInput.focus()
+			)
+			this.$emit('start-editing')
+		},
+
 		/**
 		 * Emit title change event to parent component
 		 * @param {Event} event input event
@@ -336,9 +364,13 @@ export default {
 		 * @param {Event} event submit event
 		 */
 		onSubmitTitle(event) {
+			// Disable editing
+			this.editing = false
 			this.$emit('submit-title', event)
 		},
 		onDismissEditing() {
+			// Disable editing
+			this.editing = false
 			this.$emit('dismiss-editing')
 		},
 	},
@@ -410,13 +442,28 @@ $top-buttons-spacing: 6px;
 		&__desc {
 			position: relative;
 			display: flex;
-			flex-direction: column;
+			flex-direction: row;
 			justify-content: center;
 			box-sizing: content-box;
-			padding: #{$desc-vertical-padding} #{$clickable-area * 2 + $top-buttons-spacing * 3} #{$desc-vertical-padding} $desc-vertical-padding / 2;
+			padding: #{$desc-vertical-padding} 0 #{$desc-vertical-padding} #{$desc-vertical-padding / 2};
+
+			.app-sidebar-header__title {
+				flex: 1 1 auto;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+
+			.app-sidebar-header__maintitle-form {
+				display: flex;
+				margin-left: -7.5px;
+				& .icon-confirm {
+					margin: 0;
+				}
+			}
 
 			// titles
-			.app-sidebar-header__title,
+			.app-sidebar-header__maintitle,
 			.app-sidebar-header__subtitle {
 				overflow: hidden;
 				width: 100%;
@@ -425,16 +472,18 @@ $top-buttons-spacing: 6px;
 				text-overflow: ellipsis;
 			}
 			// main title
-			.app-sidebar-header__title {
+			.app-sidebar-header__maintitle {
 				padding: 0;
+				min-height: 30px;
 				font-size: 20px;
 				line-height: $desc-title-height;
 			}
-			input.app-sidebar-header__title-input {
-				width: 100%;
+			input.app-sidebar-header__maintitle-input {
+				flex: 1 1 auto;
 				margin: 0;
 				padding: $desc-input-padding;
-				font-size: 16px;
+				font-size: 20px;
+				font-weight: bold;
 			}
 
 			// subtitle
@@ -445,8 +494,6 @@ $top-buttons-spacing: 6px;
 			}
 			// favourite
 			.app-sidebar-header__star {
-				position: absolute;
-				left: 0;
 				display: block;
 				width: $clickable-area;
 				height: $clickable-area;
@@ -454,44 +501,40 @@ $top-buttons-spacing: 6px;
 			}
 			// main menu
 			.app-sidebar-header__menu {
-				position: absolute;
-				right: $clickable-area / 2;
+				height: 44px;
+				width: 44px;
 				border-radius: $clickable-area / 2;
 				background-color: $action-background-hover;
 			}
 
+			&--editable {
+				.app-sidebar-header__maintitle-form {
+					margin-top: -2px;
+					margin-bottom: -2px;
+				}
+			}
+
 			// custom overrides
 			&--with-star {
-				padding-left: $clickable-area;
-			}
-			&--with-subtitle {
-				justify-content: space-between;
-				height: $desc-height;
-			}
-			&--editable {
-				height: $desc-height * .75;
+				padding-left: 0;
 			}
 			&--with-subtitle--editable {
-				height: $desc-height * 1.5;
-
-				.app-sidebar-header__subtitle {
-					margin-left: $desc-input-padding;
+				.app-sidebar-header__maintitle-form {
+					margin-top: -2px;
 				}
-
-				.app-sidebar-header__title-input {
-					margin-top: -$desc-vertical-padding / 2 - $desc-input-padding;
+				.app-sidebar-header__subtitle {
+					margin-top: -2px;
 				}
 			}
 		}
-		&--with-figure {
+		&:not(.app-sidebar-header--with-figure) {
 			.app-sidebar-header__desc {
-				padding-right: $clickable-area * 2;
+				padding-right: #{$clickable-area * 2 + $top-buttons-spacing};
 			}
-		}
-		&:not(.app-sidebar-header--with-figure) {
 			.app-sidebar-header__menu {
+				position: absolute;
 				top: $top-buttons-spacing;
-				right: $top-buttons-spacing * 2 + $clickable-area;
+				right: $top-buttons-spacing + $clickable-area;
 			}
 		}
 
@@ -577,13 +620,6 @@ $top-buttons-spacing: 6px;
 	opacity: 0;
 }
 
-.rename-form {
-	display: flex;
-	& .icon-confirm {
-		margin: 0;
-	}
-}
-
 </style>
 
 <style lang="scss">