From e8bee549a2907839399d5039438f6c91627a5daf Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 11:53:20 -0400
Subject: [PATCH 01/13] Rename drawer to sidebar

---
 app/src/app.vue                               |  6 +-
 app/src/components/register.ts                |  8 +--
 app/src/layouts/cards/cards.vue               |  4 +-
 app/src/layouts/tabular/tabular.vue           |  4 +-
 .../modules/activity/routes/collection.vue    | 16 ++---
 .../modules/collections/routes/collection.vue | 20 +++---
 app/src/modules/collections/routes/item.vue   | 26 +++----
 .../modules/collections/routes/overview.vue   |  6 +-
 app/src/modules/docs/routes/static.vue        |  6 +-
 ...etail.vue => file-info-sidebar-detail.vue} |  0
 app/src/modules/files/routes/collection.vue   | 16 ++---
 app/src/modules/files/routes/item.vue         | 28 ++++----
 .../data-model/collections/collections.vue    | 10 +--
 .../components/collections-filter.vue         |  4 +-
 .../routes/data-model/fields/fields.vue       |  6 +-
 .../routes/presets/collection/collection.vue  |  8 +--
 ...il.vue => presets-info-sidebar-detail.vue} |  4 +-
 .../modules/settings/routes/presets/item.vue  | 20 +++---
 ...il.vue => project-info-sidebar-detail.vue} |  4 +-
 .../settings/routes/project/project.vue       |  8 +--
 .../settings/routes/roles/collection.vue      |  6 +-
 ...etail.vue => role-info-sidebar-detail.vue} |  4 +-
 .../settings/routes/roles/item/item.vue       | 12 ++--
 .../settings/routes/webhooks/collection.vue   | 14 ++--
 .../modules/settings/routes/webhooks/item.vue | 12 ++--
 ...etail.vue => user-info-sidebar-detail.vue} |  4 +-
 app/src/modules/users/routes/collection.vue   | 14 ++--
 app/src/modules/users/routes/item.vue         | 24 +++----
 app/src/stores/app.ts                         |  2 +-
 .../comments-drawer-detail/index.ts           |  4 --
 .../comments-drawer-detail/readme.md          |  9 ---
 .../comment-input.vue                         |  0
 .../comment-item-header.vue                   |  0
 .../comment-item.vue                          |  0
 .../comments-sidebar-detail.vue}              |  6 +-
 .../comments-sidebar-detail/index.ts          |  4 ++
 .../comments-sidebar-detail/readme.md         |  9 +++
 .../types.ts                                  |  0
 .../private/components/drawer-button/index.ts |  4 --
 .../components/drawer-detail-group/index.ts   |  4 --
 .../components/drawer-detail-group/readme.md  | 39 -----------
 .../private/components/drawer-detail/index.ts |  4 --
 .../components/export-drawer-detail/index.ts  |  4 --
 .../export-sidebar-detail.vue}                | 20 +++---
 .../components/export-sidebar-detail/index.ts |  4 ++
 .../components/filter-drawer-detail/index.ts  |  4 --
 .../field-filter.vue                          |  0
 .../field-list-item.vue                       |  0
 .../filter-input.vue                          |  0
 .../filter-sidebar-detail.vue}                |  4 +-
 .../get-available-operators-for-type.ts       |  0
 .../components/filter-sidebar-detail/index.ts |  4 ++
 .../types.ts                                  |  0
 .../header-bar-actions/header-bar-actions.vue |  7 +-
 .../components/header-bar-actions/readme.md   |  2 +-
 .../components/header-bar/header-bar.story.ts | 70 +++++++++----------
 .../components/header-bar/header-bar.test.ts  |  6 +-
 .../components/header-bar/header-bar.vue      |  4 +-
 .../private/components/header-bar/readme.md   |  2 +-
 .../components/layout-drawer-detail/index.ts  |  4 --
 .../components/layout-sidebar-detail/index.ts |  4 ++
 .../layout-sidebar-detail.vue}                |  4 +-
 .../notifications-preview.story.ts            |  6 +-
 .../notifications-preview.vue                 | 12 ++--
 .../revisions-drawer-detail/index.ts          |  4 --
 .../revisions-drawer-detail/readme.md         |  9 ---
 .../revisions-sidebar-detail/index.ts         |  4 ++
 .../revisions-sidebar-detail/readme.md        |  9 +++
 .../revision-item.vue                         |  0
 .../revisions-modal-current.vue               |  0
 .../revisions-modal-picker.vue                |  0
 .../revisions-modal-preview.vue               |  0
 .../revisions-modal-updates-change.vue        |  0
 .../revisions-modal-updates.vue               |  0
 .../revisions-modal.vue                       |  0
 .../revisions-sidebar-detail.vue}             |  6 +-
 .../types.ts                                  |  0
 .../components/sidebar-button/index.ts        |  4 ++
 .../readme.md                                 |  6 +-
 .../sidebar-button.story.ts}                  | 18 ++---
 .../sidebar-button.test.ts}                   | 10 +--
 .../sidebar-button.vue}                       | 10 +--
 .../components/sidebar-detail-group/index.ts  |  4 ++
 .../components/sidebar-detail-group/readme.md | 39 +++++++++++
 .../sidebar-detail-group.story.ts}            | 30 ++++----
 .../sidebar-detail-group.test.ts}             | 12 ++--
 .../sidebar-detail-group.vue}                 | 10 +--
 .../components/sidebar-detail/index.ts        |  4 ++
 .../readme.md                                 | 12 ++--
 .../sidebar-detail.story.ts}                  | 14 ++--
 .../sidebar-detail.test.ts}                   | 14 ++--
 .../sidebar-detail.vue}                       | 32 ++++-----
 app/src/views/private/private-view.vue        | 46 ++++++------
 93 files changed, 421 insertions(+), 416 deletions(-)
 rename app/src/modules/files/components/{file-info-drawer-detail.vue => file-info-sidebar-detail.vue} (100%)
 rename app/src/modules/settings/routes/presets/collection/components/{presets-info-drawer-detail.vue => presets-info-sidebar-detail.vue} (93%)
 rename app/src/modules/settings/routes/project/components/{project-info-drawer-detail.vue => project-info-sidebar-detail.vue} (94%)
 rename app/src/modules/settings/routes/roles/item/components/{role-info-drawer-detail.vue => role-info-sidebar-detail.vue} (87%)
 rename app/src/modules/users/components/{user-info-drawer-detail.vue => user-info-sidebar-detail.vue} (94%)
 delete mode 100644 app/src/views/private/components/comments-drawer-detail/index.ts
 delete mode 100644 app/src/views/private/components/comments-drawer-detail/readme.md
 rename app/src/views/private/components/{comments-drawer-detail => comments-sidebar-detail}/comment-input.vue (100%)
 rename app/src/views/private/components/{comments-drawer-detail => comments-sidebar-detail}/comment-item-header.vue (100%)
 rename app/src/views/private/components/{comments-drawer-detail => comments-sidebar-detail}/comment-item.vue (100%)
 rename app/src/views/private/components/{comments-drawer-detail/comments-drawer-detail.vue => comments-sidebar-detail/comments-sidebar-detail.vue} (97%)
 create mode 100644 app/src/views/private/components/comments-sidebar-detail/index.ts
 create mode 100644 app/src/views/private/components/comments-sidebar-detail/readme.md
 rename app/src/views/private/components/{comments-drawer-detail => comments-sidebar-detail}/types.ts (100%)
 delete mode 100644 app/src/views/private/components/drawer-button/index.ts
 delete mode 100644 app/src/views/private/components/drawer-detail-group/index.ts
 delete mode 100644 app/src/views/private/components/drawer-detail-group/readme.md
 delete mode 100644 app/src/views/private/components/drawer-detail/index.ts
 delete mode 100644 app/src/views/private/components/export-drawer-detail/index.ts
 rename app/src/views/private/components/{export-drawer-detail/export-drawer-detail.vue => export-sidebar-detail/export-sidebar-detail.vue} (83%)
 create mode 100644 app/src/views/private/components/export-sidebar-detail/index.ts
 delete mode 100644 app/src/views/private/components/filter-drawer-detail/index.ts
 rename app/src/views/private/components/{filter-drawer-detail => filter-sidebar-detail}/field-filter.vue (100%)
 rename app/src/views/private/components/{filter-drawer-detail => filter-sidebar-detail}/field-list-item.vue (100%)
 rename app/src/views/private/components/{filter-drawer-detail => filter-sidebar-detail}/filter-input.vue (100%)
 rename app/src/views/private/components/{filter-drawer-detail/filter-drawer-detail.vue => filter-sidebar-detail/filter-sidebar-detail.vue} (99%)
 rename app/src/views/private/components/{filter-drawer-detail => filter-sidebar-detail}/get-available-operators-for-type.ts (100%)
 create mode 100644 app/src/views/private/components/filter-sidebar-detail/index.ts
 rename app/src/views/private/components/{filter-drawer-detail => filter-sidebar-detail}/types.ts (100%)
 delete mode 100644 app/src/views/private/components/layout-drawer-detail/index.ts
 create mode 100644 app/src/views/private/components/layout-sidebar-detail/index.ts
 rename app/src/views/private/components/{layout-drawer-detail/layout-drawer-detail.vue => layout-sidebar-detail/layout-sidebar-detail.vue} (94%)
 delete mode 100644 app/src/views/private/components/revisions-drawer-detail/index.ts
 delete mode 100644 app/src/views/private/components/revisions-drawer-detail/readme.md
 create mode 100644 app/src/views/private/components/revisions-sidebar-detail/index.ts
 create mode 100644 app/src/views/private/components/revisions-sidebar-detail/readme.md
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revision-item.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal-current.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal-picker.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal-preview.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal-updates-change.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal-updates.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/revisions-modal.vue (100%)
 rename app/src/views/private/components/{revisions-drawer-detail/revisions-drawer-detail.vue => revisions-sidebar-detail/revisions-sidebar-detail.vue} (99%)
 rename app/src/views/private/components/{revisions-drawer-detail => revisions-sidebar-detail}/types.ts (100%)
 create mode 100644 app/src/views/private/components/sidebar-button/index.ts
 rename app/src/views/private/components/{drawer-button => sidebar-button}/readme.md (81%)
 rename app/src/views/private/components/{drawer-button/drawer-button.story.ts => sidebar-button/sidebar-button.story.ts} (63%)
 rename app/src/views/private/components/{drawer-button/drawer-button.test.ts => sidebar-button/sidebar-button.test.ts} (61%)
 rename app/src/views/private/components/{drawer-button/drawer-button.vue => sidebar-button/sidebar-button.vue} (87%)
 create mode 100644 app/src/views/private/components/sidebar-detail-group/index.ts
 create mode 100644 app/src/views/private/components/sidebar-detail-group/readme.md
 rename app/src/views/private/components/{drawer-detail-group/drawer-detail-group.story.ts => sidebar-detail-group/sidebar-detail-group.story.ts} (55%)
 rename app/src/views/private/components/{drawer-detail-group/drawer-detail-group.test.ts => sidebar-detail-group/sidebar-detail-group.test.ts} (59%)
 rename app/src/views/private/components/{drawer-detail-group/drawer-detail-group.vue => sidebar-detail-group/sidebar-detail-group.vue} (75%)
 create mode 100644 app/src/views/private/components/sidebar-detail/index.ts
 rename app/src/views/private/components/{drawer-detail => sidebar-detail}/readme.md (67%)
 rename app/src/views/private/components/{drawer-detail/drawer-detail.story.ts => sidebar-detail/sidebar-detail.story.ts} (78%)
 rename app/src/views/private/components/{drawer-detail/drawer-detail.test.ts => sidebar-detail/sidebar-detail.test.ts} (86%)
 rename app/src/views/private/components/{drawer-detail/drawer-detail.vue => sidebar-detail/sidebar-detail.vue} (76%)

diff --git a/app/src/app.vue b/app/src/app.vue
index 1af46b55dd..aac919bf04 100644
--- a/app/src/app.vue
+++ b/app/src/app.vue
@@ -48,7 +48,7 @@ export default defineComponent({
 		const userStore = useUserStore();
 		const settingsStore = useSettingsStore();
 
-		const { hydrating, drawerOpen } = toRefs(appStore.state);
+		const { hydrating, sidebarOpen } = toRefs(appStore.state);
 
 		const brandStyle = computed(() => {
 			return {
@@ -73,9 +73,9 @@ export default defineComponent({
 				if (newWidth === oldWidth) return;
 
 				if (newWidth >= 1424) {
-					if (drawerOpen.value === false) drawerOpen.value = true;
+					if (sidebarOpen.value === false) sidebarOpen.value = true;
 				} else {
-					if (drawerOpen.value === true) drawerOpen.value = false;
+					if (sidebarOpen.value === true) sidebarOpen.value = false;
 				}
 			},
 			{ immediate: true }
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index f7a3d66826..01b1ba079e 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -104,14 +104,14 @@ Vue.component('transition-expand', TransitionExpand);
 
 import RenderDisplay from '@/views/private/components/render-display';
 import RenderTemplate from '@/views/private/components/render-template';
-import DrawerDetail from '@/views/private/components/drawer-detail/';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
+import SidebarDetail from '@/views/private/components/sidebar-detail/';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
 import UserPopover from '@/views/private/components/user-popover';
 import ValueNull from '@/views/private/components/value-null';
 
 Vue.component('render-display', RenderDisplay);
 Vue.component('render-template', RenderTemplate);
-Vue.component('filter-drawer-detail', FilterDrawerDetail);
-Vue.component('drawer-detail', DrawerDetail);
+Vue.component('filter-sidebar-detail', FilterSidebarDetail);
+Vue.component('sidebar-detail', SidebarDetail);
 Vue.component('user-popover', UserPopover);
 Vue.component('value-null', ValueNull);
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 07f6e46ed4..6075f8b781 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -46,8 +46,8 @@
 			</v-detail>
 		</portal>
 
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="sidebar">
+			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index ea4f236ef1..5b44c8e8ea 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -49,8 +49,8 @@
 			</div>
 		</portal>
 
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="sidebar">
+			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">
diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue
index 88db83f952..295a2b47fd 100644
--- a/app/src/modules/activity/routes/collection.vue
+++ b/app/src/modules/activity/routes/collection.vue
@@ -31,12 +31,12 @@
 
 		<router-view name="detail" :primary-key="primaryKey" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_activity_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -47,8 +47,8 @@ import ActivityNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import usePreset from '@/composables/use-preset';
 import marked from 'marked';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import { nanoid } from 'nanoid';
 
@@ -58,7 +58,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'activity-collection',
-	components: { ActivityNavigation, FilterDrawerDetail, LayoutDrawerDetail, SearchInput },
+	components: { ActivityNavigation, FilterSidebarDetail, LayoutSidebarDetail, SearchInput },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index c6eea2e940..5d59d4de16 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -203,8 +203,8 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div
 					class="page-description"
 					v-html="
@@ -215,10 +215,10 @@
 						)
 					"
 				/>
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
-			<export-drawer-detail
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
+			<export-sidebar-detail
 				:layout-query="layoutQuery"
 				:search-query="searchQuery"
 				:collection="currentCollection"
@@ -247,8 +247,8 @@ import { LayoutComponent } from '@/layouts/types';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
 import usePreset from '@/composables/use-preset';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
-import ExportDrawerDetail from '@/views/private/components/export-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
+import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import BookmarkAdd from '@/views/private/components/bookmark-add';
 import BookmarkEdit from '@/views/private/components/bookmark-edit';
@@ -265,8 +265,8 @@ export default defineComponent({
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
-		LayoutDrawerDetail,
-		ExportDrawerDetail,
+		LayoutSidebarDetail,
+		ExportSidebarDetail,
 		SearchInput,
 		BookmarkAdd,
 		BookmarkEdit,
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index 567877a50e..5641ef50ad 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -176,11 +176,11 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_collections_item'))" />
-			</drawer-detail>
-			<revisions-drawer-detail
+			</sidebar-detail>
+			<revisions-sidebar-detail
 				v-if="
 					collectionInfo.meta &&
 					collectionInfo.meta.singleton === false &&
@@ -189,10 +189,10 @@
 				"
 				:collection="collection"
 				:primary-key="primaryKey"
-				ref="revisionsDrawerDetail"
+				ref="revisionsSidebarDetail"
 				@revert="refresh"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="
 					collectionInfo.meta &&
 					collectionInfo.meta.singleton === false &&
@@ -214,8 +214,8 @@ import CollectionsNavigation from '../components/navigation.vue';
 import router from '@/router';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import i18n from '@/lang';
@@ -235,8 +235,8 @@ export default defineComponent({
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
-		RevisionsDrawerDetail,
-		CommentsDrawerDetail,
+		RevisionsSidebarDetail,
+		CommentsSidebarDetail,
 		SaveOptions,
 	},
 	props: {
@@ -260,7 +260,7 @@ export default defineComponent({
 		const { collection, primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 
-		const revisionsDrawerDetail = ref<Vue | null>(null);
+		const revisionsSidebarDetail = ref<Vue | null>(null);
 
 		const { info: collectionInfo, primaryKeyField } = useCollection(collection);
 
@@ -355,7 +355,7 @@ export default defineComponent({
 			archiveTooltip,
 			breadcrumb,
 			title,
-			revisionsDrawerDetail,
+			revisionsSidebarDetail,
 			marked,
 			refresh,
 			confirmLeave,
@@ -395,7 +395,7 @@ export default defineComponent({
 
 			const savedItem: Record<string, any> = await save();
 
-			revisionsDrawerDetail.value?.$data?.refresh?.();
+			revisionsSidebarDetail.value?.$data?.refresh?.();
 
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/app/src/modules/collections/routes/overview.vue b/app/src/modules/collections/routes/overview.vue
index 9949152b92..eb3d0d28de 100644
--- a/app/src/modules/collections/routes/overview.vue
+++ b/app/src/modules/collections/routes/overview.vue
@@ -28,10 +28,10 @@
 			</template>
 		</v-info>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_collections_overview'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/docs/routes/static.vue b/app/src/modules/docs/routes/static.vue
index 7a8f4445de..bb95f4741d 100644
--- a/app/src/modules/docs/routes/static.vue
+++ b/app/src/modules/docs/routes/static.vue
@@ -16,10 +16,10 @@
 			<markdown>{{ markdownWithoutTitle }}</markdown>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_docs_global'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/files/components/file-info-drawer-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
similarity index 100%
rename from app/src/modules/files/components/file-info-drawer-detail.vue
rename to app/src/modules/files/components/file-info-sidebar-detail.vue
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index d2d471c748..98fe817c3e 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -126,12 +126,12 @@
 
 		<router-view name="addNew" :preset="queryFilters" @upload="refresh" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_files_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 
 		<template v-if="showDropEffect">
@@ -150,8 +150,8 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import AddFolder from '../components/add-folder.vue';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
@@ -171,7 +171,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-collection',
-	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
+	components: { FilesNavigation, FilterSidebarDetail, LayoutSidebarDetail, AddFolder, SearchInput, FolderPicker },
 	props: {
 		queryFilters: {
 			type: Object as PropType<Record<string, string>>,
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index 948867d66a..c30e86bac6 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -155,15 +155,15 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<file-info-drawer-detail :file="item" @move-folder="moveToDialogActive = true" />
-			<revisions-drawer-detail
+		<template #sidebar>
+			<file-info-sidebar-detail :file="item" @move-folder="moveToDialogActive = true" />
+			<revisions-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
-				ref="revisionsDrawerDetail"
+				ref="revisionsSidebarDetail"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
@@ -177,8 +177,8 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
 import FilesNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from '@/views/private/components/file-preview';
@@ -187,7 +187,7 @@ import { nanoid } from 'nanoid';
 import FileLightbox from '@/views/private/components/file-lightbox';
 import { useFieldsStore } from '@/stores/';
 import { Field } from '@/types';
-import FileInfoDrawerDetail from '../components/file-info-drawer-detail.vue';
+import FileInfoSidebarDetail from '../components/file-info-sidebar-detail.vue';
 import useFormFields from '@/composables/use-form-fields';
 import FolderPicker from '../components/folder-picker.vue';
 import api from '@/api';
@@ -215,13 +215,13 @@ export default defineComponent({
 	},
 	components: {
 		FilesNavigation,
-		RevisionsDrawerDetail,
-		CommentsDrawerDetail,
+		RevisionsSidebarDetail,
+		CommentsSidebarDetail,
 		SaveOptions,
 		FilePreview,
 		ImageEditor,
 		FileLightbox,
-		FileInfoDrawerDetail,
+		FileInfoSidebarDetail,
 		FolderPicker,
 		FilesNotFound,
 	},
@@ -237,7 +237,7 @@ export default defineComponent({
 		const { breadcrumb } = useBreadcrumb();
 		const fieldsStore = useFieldsStore();
 
-		const revisionsDrawerDetail = ref<Vue | null>(null);
+		const revisionsSidebarDetail = ref<Vue | null>(null);
 
 		const {
 			isNew,
@@ -322,7 +322,7 @@ export default defineComponent({
 			cacheBuster,
 			editActive,
 			previewActive,
-			revisionsDrawerDetail,
+			revisionsSidebarDetail,
 			formFields,
 			confirmLeave,
 			leaveTo,
@@ -375,7 +375,7 @@ export default defineComponent({
 
 		async function saveAndStay() {
 			await save();
-			revisionsDrawerDetail.value?.$data?.refresh?.();
+			revisionsSidebarDetail.value?.$data?.refresh?.();
 		}
 
 		async function saveAsCopyAndNavigate() {
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 01deac0f75..eb49a6ab36 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -40,7 +40,7 @@
 					<v-icon
 						class="icon"
 						:class="{
-							hidden: item.meta && item.meta.hidden || false,
+							hidden: (item.meta && item.meta.hidden) || false,
 							system: item.collection.startsWith('directus_'),
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
@@ -52,7 +52,7 @@
 					<span
 						class="collection"
 						:class="{
-							hidden: item.meta && item.meta.hidden || false,
+							hidden: (item.meta && item.meta.hidden) || false,
 							system: item.collection.startsWith('directus_'),
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
@@ -86,10 +86,10 @@
 
 		<router-view name="add" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_datamodel_collections'))" />
-			</drawer-detail>
+			</sidebar-detail>
 			<collections-filter v-model="activeTypes" />
 		</template>
 	</private-view>
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
index 14984957f8..a702ea7687 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
@@ -1,11 +1,11 @@
 <template>
-	<drawer-detail class="collections-filter" icon="filter_list" :title="$tc('collection', 2)">
+	<sidebar-detail class="collections-filter" icon="filter_list" :title="$tc('collection', 2)">
 		<div class="type-label label">{{ $t('collections_shown') }}</div>
 		<v-checkbox value="visible" v-model="_value" :label="$t('visible_collections')" />
 		<v-checkbox value="unmanaged" v-model="_value" :label="$t('unmanaged_collections')" />
 		<v-checkbox value="hidden" v-model="_value" :label="$t('hidden_collections')" />
 		<v-checkbox value="system" v-model="_value" :label="$t('system_collections')" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index 7efea758d9..71f9f43c0f 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -73,10 +73,10 @@
 			/>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_datamodel_fields'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index c2f96739e3..fefa474b4e 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -84,8 +84,8 @@
 			</v-table>
 		</div>
 
-		<template #drawer>
-			<presets-info-drawer-detail />
+		<template #sidebar>
+			<presets-info-sidebar-detail />
 		</template>
 	</private-view>
 </template>
@@ -102,7 +102,7 @@ import { getLayouts } from '@/layouts';
 import { TranslateResult } from 'vue-i18n';
 import router from '@/router';
 import ValueNull from '@/views/private/components/value-null';
-import PresetsInfoDrawerDetail from './components/presets-info-drawer-detail.vue';
+import PresetsInfoSidebarDetail from './components/presets-info-sidebar-detail.vue';
 
 type PresetRaw = {
 	id: number;
@@ -122,7 +122,7 @@ type Preset = {
 };
 
 export default defineComponent({
-	components: { SettingsNavigation, ValueNull, PresetsInfoDrawerDetail },
+	components: { SettingsNavigation, ValueNull, PresetsInfoSidebarDetail },
 	setup() {
 		const layouts = getLayouts();
 		const collectionsStore = useCollectionsStore();
diff --git a/app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
similarity index 93%
rename from app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue
rename to app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
index ef05eb673a..a01ee8c494 100644
--- a/app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl>
 			<div>
 				<dt>{{ $t('bookmarks') }}</dt>
@@ -14,7 +14,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_presets_collection'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index d5a8f645c2..b7047bdcff 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -75,18 +75,18 @@
 			</div>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_presets_item'))" />
-			</drawer-detail>
+			</sidebar-detail>
 
-			<portal-target class="layout-drawer" name="drawer" />
+			<portal-target class="layout-sidebar" name="sidebar" />
 
-			<drawer-detail class="layout-drawer" icon="layers" :title="$t('layout_options')">
+			<sidebar-detail class="layout-sidebar" icon="layers" :title="$t('layout_options')">
 				<div class="layout-options">
 					<portal-target name="layout-options" class="portal-contents" />
 				</div>
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
@@ -547,10 +547,10 @@ export default defineComponent({
 	overflow: auto;
 }
 
-.layout-drawer {
-	--drawer-detail-icon-color: var(--warning);
-	--drawer-detail-color: var(--warning);
-	--drawer-detail-color-active: var(--warning);
+.layout-sidebar {
+	--sidebar-detail-icon-color: var(--warning);
+	--sidebar-detail-color: var(--warning);
+	--sidebar-detail-color-active: var(--warning);
 	--v-form-vertical-gap: 24px;
 }
 
diff --git a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue b/app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
similarity index 94%
rename from app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
rename to app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
index 338c0e4410..583a5ba2bf 100644
--- a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="parsedInfo">
 			<div>
 				<dt>{{ $t('directus_version') }}</dt>
@@ -34,7 +34,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_project'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue
index f2aa8acdb3..014f6a7e4e 100644
--- a/app/src/modules/settings/routes/project/project.vue
+++ b/app/src/modules/settings/routes/project/project.vue
@@ -21,8 +21,8 @@
 			<v-form :initial-values="initialValues" v-model="edits" :fields="fields" :primary-key="1" />
 		</div>
 
-		<template #drawer>
-			<project-info-drawer-detail />
+		<template #sidebar>
+			<project-info-sidebar-detail />
 		</template>
 	</private-view>
 </template>
@@ -32,11 +32,11 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
 import useCollection from '@/composables/use-collection';
 import { useSettingsStore } from '@/stores';
-import ProjectInfoDrawerDetail from './components/project-info-drawer-detail.vue';
+import ProjectInfoSidebarDetail from './components/project-info-sidebar-detail.vue';
 import { clone } from 'lodash';
 
 export default defineComponent({
-	components: { SettingsNavigation, ProjectInfoDrawerDetail },
+	components: { SettingsNavigation, ProjectInfoSidebarDetail },
 	setup() {
 		const settingsStore = useSettingsStore();
 
diff --git a/app/src/modules/settings/routes/roles/collection.vue b/app/src/modules/settings/routes/roles/collection.vue
index 76fe7bfada..e52fac74e1 100644
--- a/app/src/modules/settings/routes/roles/collection.vue
+++ b/app/src/modules/settings/routes/roles/collection.vue
@@ -18,10 +18,10 @@
 			<settings-navigation />
 		</template>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_roles_collection'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 
 		<div class="roles">
diff --git a/app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
similarity index 87%
rename from app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue
rename to app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
index 6a00dfd7f5..750edb87da 100644
--- a/app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="!isNew && role">
 			<div>
 				<dt>{{ $t('primary_key') }}</dt>
@@ -10,7 +10,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_roles_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index d16638977c..fefe7bd374 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -71,9 +71,9 @@
 			/>
 		</div>
 
-		<template #drawer>
-			<role-info-drawer-detail :role="item" />
-			<revisions-drawer-detail collection="directus_roles" :primary-key="primaryKey" />
+		<template #sidebar>
+			<role-info-sidebar-detail :role="item" />
+			<revisions-sidebar-detail collection="directus_roles" :primary-key="primaryKey" />
 		</template>
 	</private-view>
 </template>
@@ -83,10 +83,10 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 
 import SettingsNavigation from '../../../components/navigation.vue';
 import router from '@/router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
+import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
 import useItem from '@/composables/use-item';
 import { useUserStore } from '@/stores/';
-import RoleInfoDrawerDetail from './components/role-info-drawer-detail.vue';
+import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
 import PermissionsOverview from './components/permissions-overview.vue';
 
 type Values = {
@@ -95,7 +95,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-item',
-	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoDrawerDetail, PermissionsOverview },
+	components: { SettingsNavigation, RevisionsSidebarDetail, RoleInfoSidebarDetail, PermissionsOverview },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index 26b450af95..260d627605 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -85,12 +85,12 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -98,7 +98,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import marked from 'marked';
 import { LayoutComponent } from '@/layouts/types';
 import { usePreset } from '@/composables/use-preset';
@@ -112,7 +112,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'webhooks-collection',
-	components: { SettingsNavigation, LayoutDrawerDetail, SearchInput },
+	components: { SettingsNavigation, LayoutSidebarDetail, SearchInput },
 	setup(props) {
 		const layoutRef = ref<LayoutComponent | null>(null);
 
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index 21e033bcae..592550e893 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -58,11 +58,11 @@
 			v-model="edits"
 		/>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_item'))" />
-			</drawer-detail>
-			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
+			</sidebar-detail>
+			<revisions-sidebar-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 		</template>
 	</private-view>
 </template>
@@ -72,7 +72,7 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 
 import SettingsNavigation from '../../components/navigation.vue';
 import router from '@/router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
+import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import marked from 'marked';
@@ -84,7 +84,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'webhooks-item',
-	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions },
+	components: { SettingsNavigation, RevisionsSidebarDetail, SaveOptions },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/users/components/user-info-drawer-detail.vue b/app/src/modules/users/components/user-info-sidebar-detail.vue
similarity index 94%
rename from app/src/modules/users/components/user-info-drawer-detail.vue
rename to app/src/modules/users/components/user-info-sidebar-detail.vue
index 86c21f2262..73cc5cdccd 100644
--- a/app/src/modules/users/components/user-info-drawer-detail.vue
+++ b/app/src/modules/users/components/user-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="isNew === false && user">
 			<div v-if="user.id">
 				<dt>{{ $t('key') }}</dt>
@@ -32,7 +32,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_users_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 517dabb072..7c8d18c863 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -91,12 +91,12 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_users_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -109,7 +109,7 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
 import useNavigation from '../composables/use-navigation';
@@ -120,7 +120,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'users-collection',
-	components: { UsersNavigation, LayoutDrawerDetail, SearchInput },
+	components: { UsersNavigation, LayoutSidebarDetail, SearchInput },
 	props: {
 		queryFilters: {
 			type: Object as PropType<Record<string, string>>,
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index f0e0436f68..1a363f48b7 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -143,15 +143,15 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<user-info-drawer-detail :is-new="isNew" :user="item" />
-			<revisions-drawer-detail
+		<template #sidebar>
+			<user-info-sidebar-detail :is-new="isNew" :user="item" />
+			<revisions-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
-				ref="revisionsDrawerDetail"
+				ref="revisionsSidebarDetail"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
@@ -166,15 +166,15 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
 import UsersNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import api from '@/api';
 import { useFieldsStore, useUserStore } from '@/stores/';
 import useFormFields from '@/composables/use-form-fields';
 import { Field } from '@/types';
-import UserInfoDrawerDetail from '../components/user-info-drawer-detail.vue';
+import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
 import { getRootPath } from '@/utils/get-root-path';
 import useShortcut from '@/composables/use-shortcut';
 import { isAllowed } from '@/utils/is-allowed';
@@ -198,7 +198,7 @@ export default defineComponent({
 
 		return next();
 	},
-	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsDrawerDetail, UserInfoDrawerDetail },
+	components: { UsersNavigation, RevisionsSidebarDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
 	props: {
 		primaryKey: {
 			type: String,
@@ -219,7 +219,7 @@ export default defineComponent({
 
 		const { info: collectionInfo } = useCollection(ref('directus_users'));
 
-		const revisionsDrawerDetail = ref<Vue | null>(null);
+		const revisionsSidebarDetail = ref<Vue | null>(null);
 
 		const {
 			isNew,
@@ -315,7 +315,7 @@ export default defineComponent({
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
 			isBatch,
-			revisionsDrawerDetail,
+			revisionsSidebarDetail,
 			previewLoading,
 			avatarSrc,
 			roleName,
@@ -356,7 +356,7 @@ export default defineComponent({
 		async function saveAndStay() {
 			const savedItem: Record<string, any> = await save();
 
-			revisionsDrawerDetail.value?.$data?.refresh?.();
+			revisionsSidebarDetail.value?.$data?.refresh?.();
 
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/app/src/stores/app.ts b/app/src/stores/app.ts
index a96f52eb2a..6eab2083a6 100644
--- a/app/src/stores/app.ts
+++ b/app/src/stores/app.ts
@@ -3,7 +3,7 @@ import { createStore } from 'pinia';
 export const useAppStore = createStore({
 	id: 'appStore',
 	state: () => ({
-		drawerOpen: false,
+		sidebarOpen: false,
 		hydrated: false,
 		hydrating: false,
 		error: null,
diff --git a/app/src/views/private/components/comments-drawer-detail/index.ts b/app/src/views/private/components/comments-drawer-detail/index.ts
deleted file mode 100644
index c7fae8a3a3..0000000000
--- a/app/src/views/private/components/comments-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import CommentsDrawerDetail from './comments-drawer-detail.vue';
-
-export { CommentsDrawerDetail };
-export default CommentsDrawerDetail;
diff --git a/app/src/views/private/components/comments-drawer-detail/readme.md b/app/src/views/private/components/comments-drawer-detail/readme.md
deleted file mode 100644
index 0f2f3b0fa9..0000000000
--- a/app/src/views/private/components/comments-drawer-detail/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Comments Drawer
-
-Renders an comment timeline in a drawer section meant to be used in the drawer sidebar.
-
-## Usage
-
-```html
-<comments-drawer-detail collection="authors" primary-key="15" />
-```
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-input.vue b/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-input.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-input.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item.vue b/app/src/views/private/components/comments-sidebar-detail/comment-item.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-item.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-item.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue b/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
similarity index 97%
rename from app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
rename to app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
index 19511c653f..e1102f4757 100644
--- a/app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
+++ b/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail :title="$t('comments')" icon="chat_bubble_outline" :badge="count || null">
+	<sidebar-detail :title="$t('comments')" icon="chat_bubble_outline" :badge="count || null">
 		<comment-input :refresh="refresh" :collection="collection" :primary-key="primaryKey" />
 
 		<v-progress-linear indeterminate v-if="loading" />
@@ -15,7 +15,7 @@
 				<comment-item :refresh="refresh" :activity="item" :key="item.id" />
 			</template>
 		</template>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -138,7 +138,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-background-color: var(--foreground-normal);
 }
 
diff --git a/app/src/views/private/components/comments-sidebar-detail/index.ts b/app/src/views/private/components/comments-sidebar-detail/index.ts
new file mode 100644
index 0000000000..a3963bb569
--- /dev/null
+++ b/app/src/views/private/components/comments-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import CommentsSidebarDetail from './comments-sidebar-detail.vue';
+
+export { CommentsSidebarDetail };
+export default CommentsSidebarDetail;
diff --git a/app/src/views/private/components/comments-sidebar-detail/readme.md b/app/src/views/private/components/comments-sidebar-detail/readme.md
new file mode 100644
index 0000000000..0284f91019
--- /dev/null
+++ b/app/src/views/private/components/comments-sidebar-detail/readme.md
@@ -0,0 +1,9 @@
+# Comments Sidebar
+
+Renders an comment timeline in a sidebar section meant to be used in the sidebar sidebar.
+
+## Usage
+
+```html
+<comments-sidebar-detail collection="authors" primary-key="15" />
+```
diff --git a/app/src/views/private/components/comments-drawer-detail/types.ts b/app/src/views/private/components/comments-sidebar-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/types.ts
rename to app/src/views/private/components/comments-sidebar-detail/types.ts
diff --git a/app/src/views/private/components/drawer-button/index.ts b/app/src/views/private/components/drawer-button/index.ts
deleted file mode 100644
index 625da53f01..0000000000
--- a/app/src/views/private/components/drawer-button/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerButton from './drawer-button.vue';
-
-export { DrawerButton };
-export default DrawerButton;
diff --git a/app/src/views/private/components/drawer-detail-group/index.ts b/app/src/views/private/components/drawer-detail-group/index.ts
deleted file mode 100644
index 6f734301d1..0000000000
--- a/app/src/views/private/components/drawer-detail-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerDetailGroup from './drawer-detail-group.vue';
-
-export { DrawerDetailGroup };
-export default DrawerDetailGroup;
diff --git a/app/src/views/private/components/drawer-detail-group/readme.md b/app/src/views/private/components/drawer-detail-group/readme.md
deleted file mode 100644
index 5e135bab86..0000000000
--- a/app/src/views/private/components/drawer-detail-group/readme.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Drawer Detail Group
-
-Used in the private view to manage the active state of [the nested `drawer-detail` components](../drawer-detail/).
-
-## Usage
-
-```html
-<drawer-detail-group :drawer-open="drawerOpen">
-	<drawer-detail icon="person" title="Users" >
-		<!-- section content -->
-	</drawer-detail>
-	<drawer-detail icon="settings" title="Settings" >
-		<!-- section content -->
-	</drawer-detail>
-	<drawer-detail icon="map" title="Routes" >
-		<!-- section content -->
-	</drawer-detail>
-</drawer-detail-group>
-```
-
-## Drawer open state
-
-Once the drawer closes, all open drawer details should be closed. By watching the `drawer-open` prop, we can dynamically close all details.
-
-## Props
-| Prop          | Description                                              | Default |
-|---------------|----------------------------------------------------------|---------|
-| `drawer-open` | If the drawer sidebar in the private view is open or not | `false` |
-
-## Slots
-| Slot      | Description |
-|-----------|-------------|
-| _default_ |             |
-
-## Events
-n/a
-
-## CSS Variables
-n/a
diff --git a/app/src/views/private/components/drawer-detail/index.ts b/app/src/views/private/components/drawer-detail/index.ts
deleted file mode 100644
index 4763e379e1..0000000000
--- a/app/src/views/private/components/drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerDetail from './drawer-detail.vue';
-
-export { DrawerDetail };
-export default DrawerDetail;
diff --git a/app/src/views/private/components/export-drawer-detail/index.ts b/app/src/views/private/components/export-drawer-detail/index.ts
deleted file mode 100644
index 2599026d19..0000000000
--- a/app/src/views/private/components/export-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ExportDrawerDetail from './export-drawer-detail.vue';
-
-export { ExportDrawerDetail };
-export default ExportDrawerDetail;
diff --git a/app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
similarity index 83%
rename from app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue
rename to app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
index a299228595..55f3935402 100644
--- a/app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="save_alt" :title="$t('export_data')">
+	<sidebar-detail icon="save_alt" :title="$t('export_data')">
 		<div class="fields">
 			<div class="field full">
 				<p class="type-label">{{ $t('format') }}</p>
@@ -20,10 +20,12 @@
 			</div>
 
 			<div class="field full">
-				<v-button full-width @click="exportData">{{ $t('export_collection', { collection: collection.name }) }}</v-button>
+				<v-button full-width @click="exportData">
+					{{ $t('export_collection', { collection: collection.name }) }}
+				</v-button>
 			</div>
 		</div>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -35,7 +37,7 @@ export default defineComponent({
 	props: {
 		layoutQuery: {
 			type: Object,
-			default: () => ({})
+			default: () => ({}),
 		},
 		searchQuery: {
 			type: String,
@@ -44,7 +46,7 @@ export default defineComponent({
 		collection: {
 			type: Object as PropType<Collection>,
 			required: true,
-		}
+		},
 	},
 	setup(props, { emit }) {
 		const format = ref('csv');
@@ -56,7 +58,7 @@ export default defineComponent({
 			const url = `/items/${props.collection.collection}`;
 
 			let params: Record<string, any> = {
-				access_token: api.defaults.headers.Authorization.substring(7)
+				access_token: api.defaults.headers.Authorization.substring(7),
 			};
 
 			if (format.value === 'csv') {
@@ -69,14 +71,16 @@ export default defineComponent({
 				params = {
 					...params,
 					...props.layoutQuery,
-				}
+				};
 
 				if (props.searchQuery) {
 					params.search = props.searchQuery;
 				}
 			}
 
-			const qs = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+			const qs = Object.keys(params)
+				.map((key) => `${key}=${params[key]}`)
+				.join('&');
 			window.open(`${url}?${qs}`);
 		}
 	},
diff --git a/app/src/views/private/components/export-sidebar-detail/index.ts b/app/src/views/private/components/export-sidebar-detail/index.ts
new file mode 100644
index 0000000000..853ea70ed9
--- /dev/null
+++ b/app/src/views/private/components/export-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import ExportSidebarDetail from './export-sidebar-detail.vue';
+
+export { ExportSidebarDetail };
+export default ExportSidebarDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/index.ts b/app/src/views/private/components/filter-drawer-detail/index.ts
deleted file mode 100644
index 16e78b47e7..0000000000
--- a/app/src/views/private/components/filter-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import FilterDrawerDetail from './filter-drawer-detail.vue';
-
-export { FilterDrawerDetail };
-export default FilterDrawerDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/field-filter.vue b/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/field-filter.vue
rename to app/src/views/private/components/filter-sidebar-detail/field-filter.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/field-list-item.vue b/app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/field-list-item.vue
rename to app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-input.vue b/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/filter-input.vue
rename to app/src/views/private/components/filter-sidebar-detail/filter-input.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
similarity index 99%
rename from app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
rename to app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
index 56f41cff68..9bd23fff36 100644
--- a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail
+	<sidebar-detail
 		:badge="filters.length > 0 ? filters.length : null"
 		icon="filter_list"
 		:title="$t('advanced_filter')"
@@ -39,7 +39,7 @@
 
 			<v-checkbox v-model="archived" :label="$t('show_archived_items')" />
 		</template>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/filter-drawer-detail/get-available-operators-for-type.ts b/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/get-available-operators-for-type.ts
rename to app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
diff --git a/app/src/views/private/components/filter-sidebar-detail/index.ts b/app/src/views/private/components/filter-sidebar-detail/index.ts
new file mode 100644
index 0000000000..5d49ccb85b
--- /dev/null
+++ b/app/src/views/private/components/filter-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import FilterSidebarDetail from './filter-sidebar-detail.vue';
+
+export { FilterSidebarDetail };
+export default FilterSidebarDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/types.ts b/app/src/views/private/components/filter-sidebar-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/types.ts
rename to app/src/views/private/components/filter-sidebar-detail/types.ts
diff --git a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
index afef56f127..2bade5aa77 100644
--- a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
+++ b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
@@ -5,7 +5,7 @@
 		</v-button>
 
 		<div class="action-buttons">
-			<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
+			<v-button class="sidebar-toggle" icon rounded secondary outlined @click="$emit('toggle:sidebar')">
 				<v-icon name="info" outline />
 			</v-button>
 
@@ -40,6 +40,7 @@ export default defineComponent({
 
 	.expand {
 		--v-icon-color: var(--foreground-normal);
+
 		flex-shrink: 0;
 		margin-right: 8px;
 
@@ -61,7 +62,7 @@ export default defineComponent({
 			margin-right: 8px;
 		}
 
-		.drawer-toggle {
+		.sidebar-toggle {
 			flex-shrink: 0;
 
 			@include breakpoint(medium) {
@@ -94,7 +95,7 @@ export default defineComponent({
 
 	@include breakpoint(medium) {
 		.action-buttons ::v-deep {
-			> *:not(.drawer-toggle) {
+			> *:not(.sidebar-toggle) {
 				display: inherit !important;
 			}
 		}
diff --git a/app/src/views/private/components/header-bar-actions/readme.md b/app/src/views/private/components/header-bar-actions/readme.md
index bd822dc18d..b65d1b8c6a 100644
--- a/app/src/views/private/components/header-bar-actions/readme.md
+++ b/app/src/views/private/components/header-bar-actions/readme.md
@@ -33,7 +33,7 @@ n/a
 ## Events
 | Event           | Description                                           | Value |
 |-----------------|-------------------------------------------------------|-------|
-| `toggle:drawer` | Emitted when the user clicks the toggle drawer button | --    |
+| `toggle:sidebar` | Emitted when the user clicks the toggle sidebar button | --    |
 
 ## CSS Variables
 n/a
diff --git a/app/src/views/private/components/header-bar/header-bar.story.ts b/app/src/views/private/components/header-bar/header-bar.story.ts
index f91096f55d..a56033793b 100644
--- a/app/src/views/private/components/header-bar/header-bar.story.ts
+++ b/app/src/views/private/components/header-bar/header-bar.story.ts
@@ -22,8 +22,8 @@ export const basic = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -31,19 +31,19 @@ export const basic = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			/>
 		`,
 	});
@@ -56,8 +56,8 @@ export const withBreadcrumb = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -65,19 +65,19 @@ export const withBreadcrumb = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #headline>
 					<v-breadcrumb :items="[
@@ -103,8 +103,8 @@ export const withBackButton = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -112,19 +112,19 @@ export const withBackButton = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #title-outer:prepend>
 					<v-button icon rounded secondary>
@@ -146,8 +146,8 @@ export const slots = () => {
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -155,19 +155,19 @@ export const slots = () => {
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #title-outer:prepend>
 					<slot-label>title-outer:prepend</slot-label>
@@ -205,8 +205,8 @@ export const withActions = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -214,19 +214,19 @@ export const withActions = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #actions>
 					<v-button rounded icon style="--v-button-background-color: var(--success);">
diff --git a/app/src/views/private/components/header-bar/header-bar.test.ts b/app/src/views/private/components/header-bar/header-bar.test.ts
index 504417f2bc..82dbfb848e 100644
--- a/app/src/views/private/components/header-bar/header-bar.test.ts
+++ b/app/src/views/private/components/header-bar/header-bar.test.ts
@@ -35,9 +35,9 @@ describe('Views / Private / Header Bar', () => {
 
 		expect(component.emitted('toggle:nav')?.[0]).toBeTruthy();
 
-		const drawerToggle = component.find('.drawer-toggle > .button');
-		drawerToggle.trigger('click');
+		const sidebarToggle = component.find('.sidebar-toggle > .button');
+		sidebarToggle.trigger('click');
 
-		expect(component.emitted('toggle:drawer')?.[0]).toBeTruthy();
+		expect(component.emitted('toggle:sidebar')?.[0]).toBeTruthy();
 	});
 });
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index fea44c6f36..1481112d62 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -26,7 +26,7 @@
 		<div class="spacer" />
 
 		<slot name="actions:prepend" />
-		<header-bar-actions @toggle:drawer="$emit('toggle:drawer')">
+		<header-bar-actions @toggle:sidebar="$emit('toggle:sidebar')">
 			<slot name="actions" />
 		</header-bar-actions>
 		<slot name="actions:append" />
@@ -169,7 +169,7 @@ export default defineComponent({
 		flex-grow: 1;
 	}
 
-	.drawer-toggle {
+	.sidebar-toggle {
 		flex-shrink: 0;
 		margin-left: 8px;
 
diff --git a/app/src/views/private/components/header-bar/readme.md b/app/src/views/private/components/header-bar/readme.md
index 5dd25628a7..4849844192 100644
--- a/app/src/views/private/components/header-bar/readme.md
+++ b/app/src/views/private/components/header-bar/readme.md
@@ -43,7 +43,7 @@ put any view critical actions in this slot.
 | Event           | Description                              | Value |
 |-----------------|------------------------------------------|-------|
 | `toggle:nav`    | When the nav toggle button is clicked    | --    |
-| `toggle:drawer` | When the drawer toggle button is clicked | --    |
+| `toggle:sidebar` | When the sidebar toggle button is clicked | --    |
 
 ## CSS Variables
 n/a
diff --git a/app/src/views/private/components/layout-drawer-detail/index.ts b/app/src/views/private/components/layout-drawer-detail/index.ts
deleted file mode 100644
index ae9cf53b4d..0000000000
--- a/app/src/views/private/components/layout-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LayoutDrawerDetail from './layout-drawer-detail.vue';
-
-export { LayoutDrawerDetail };
-export default LayoutDrawerDetail;
diff --git a/app/src/views/private/components/layout-sidebar-detail/index.ts b/app/src/views/private/components/layout-sidebar-detail/index.ts
new file mode 100644
index 0000000000..b6e404ba4f
--- /dev/null
+++ b/app/src/views/private/components/layout-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import LayoutSidebarDetail from './layout-sidebar-detail.vue';
+
+export { LayoutSidebarDetail };
+export default LayoutSidebarDetail;
diff --git a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue b/app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
similarity index 94%
rename from app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
rename to app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
index 01be008d31..76a5e2e181 100644
--- a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
+++ b/app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="layers" :title="$t('layout_options')">
+	<sidebar-detail icon="layers" :title="$t('layout_options')">
 		<div class="layout-options">
 			<div class="field">
 				<div class="type-label">{{ $t('layout') }}</div>
@@ -12,7 +12,7 @@
 
 			<portal-target name="layout-options" class="portal-contents" />
 		</div>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/notifications-preview/notifications-preview.story.ts b/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
index 34ee398a0d..39456baec9 100644
--- a/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
+++ b/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
@@ -2,7 +2,7 @@ import readme from './readme.md';
 import { defineComponent, ref } from '@vue/composition-api';
 import NotificationsPreview from './notifications-preview.vue';
 import NotificationItem from '../notification-item/';
-import DrawerButton from '../drawer-button/';
+import SidebarButton from '../sidebar-button/';
 import { NotificationRaw } from '@/types';
 import { i18n } from '@/lang';
 import withPadding from '../../../../../.storybook/decorators/with-padding';
@@ -47,13 +47,13 @@ export const basic = () =>
 	defineComponent({
 		i18n,
 		router: new VueRouter(),
-		components: { NotificationsPreview, NotificationItem, DrawerButton },
+		components: { NotificationsPreview, NotificationItem, SidebarButton },
 		setup() {
 			const notificationsStore = useNotificationsStore({});
 			const active = ref(false);
 
 			const appStore = useAppStore({});
-			appStore.state.drawerOpen = true;
+			appStore.state.sidebarOpen = true;
 
 			return { add, active };
 
diff --git a/app/src/views/private/components/notifications-preview/notifications-preview.vue b/app/src/views/private/components/notifications-preview/notifications-preview.vue
index efbe473682..8cd1471bcc 100644
--- a/app/src/views/private/components/notifications-preview/notifications-preview.vue
+++ b/app/src/views/private/components/notifications-preview/notifications-preview.vue
@@ -17,7 +17,7 @@
 			</div>
 		</transition-expand>
 
-		<drawer-button
+		<sidebar-button
 			:active="active"
 			@click="$emit('input', !active)"
 			v-tooltip.left="$t('notifications')"
@@ -25,23 +25,23 @@
 			icon="notifications"
 		>
 			{{ $t('notifications') }}
-		</drawer-button>
+		</sidebar-button>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref, watch } from '@vue/composition-api';
-import DrawerButton from '../drawer-button';
+import SidebarButton from '../sidebar-button';
 import NotificationItem from '../notification-item';
 import { useNotificationsStore } from '@/stores/';
 
 export default defineComponent({
-	components: { DrawerButton, NotificationItem },
+	components: { SidebarButton, NotificationItem },
 	model: {
 		prop: 'active',
 	},
 	props: {
-		drawerOpen: {
+		sidebarOpen: {
 			type: Boolean,
 			default: false,
 		},
@@ -82,7 +82,7 @@ export default defineComponent({
 	width: 100%;
 }
 
-.drawer-button {
+.sidebar-button {
 	background-color: var(--background-normal-alt);
 }
 
diff --git a/app/src/views/private/components/revisions-drawer-detail/index.ts b/app/src/views/private/components/revisions-drawer-detail/index.ts
deleted file mode 100644
index 304e56cfbe..0000000000
--- a/app/src/views/private/components/revisions-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RevisionsDrawerDetail from './revisions-drawer-detail.vue';
-
-export { RevisionsDrawerDetail };
-export default RevisionsDrawerDetail;
diff --git a/app/src/views/private/components/revisions-drawer-detail/readme.md b/app/src/views/private/components/revisions-drawer-detail/readme.md
deleted file mode 100644
index 3ef03bfc73..0000000000
--- a/app/src/views/private/components/revisions-drawer-detail/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Activity Drawer
-
-Renders an activity timeline in a drawer section meant to be used in the drawer sidebar.
-
-## Usage
-
-```html
-<activity-drawer-detail collection="authors" primary-key="15" />
-```
diff --git a/app/src/views/private/components/revisions-sidebar-detail/index.ts b/app/src/views/private/components/revisions-sidebar-detail/index.ts
new file mode 100644
index 0000000000..167fa9383c
--- /dev/null
+++ b/app/src/views/private/components/revisions-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import RevisionsSidebarDetail from './revisions-sidebar-detail.vue';
+
+export { RevisionsSidebarDetail };
+export default RevisionsSidebarDetail;
diff --git a/app/src/views/private/components/revisions-sidebar-detail/readme.md b/app/src/views/private/components/revisions-sidebar-detail/readme.md
new file mode 100644
index 0000000000..77250d016e
--- /dev/null
+++ b/app/src/views/private/components/revisions-sidebar-detail/readme.md
@@ -0,0 +1,9 @@
+# Activity Sidebar
+
+Renders an activity timeline in a sidebar section meant to be used in the sidebar sidebar.
+
+## Usage
+
+```html
+<activity-sidebar-detail collection="authors" primary-key="15" />
+```
diff --git a/app/src/views/private/components/revisions-drawer-detail/revision-item.vue b/app/src/views/private/components/revisions-sidebar-detail/revision-item.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revision-item.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revision-item.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-picker.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal-picker.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates-change.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates-change.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue
similarity index 99%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
rename to app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue
index 15fbbb8256..03ce468b3d 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail
+	<sidebar-detail
 		:title="$t('revisions')"
 		icon="change_history"
 		:badge="!loading && revisions ? revisions.length : null"
@@ -33,7 +33,7 @@
 			:active.sync="modalActive"
 			@revert="onRevert"
 		/>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -191,7 +191,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-color: var(--background-normal);
 	--v-badge-background-color: var(--foreground-normal);
 }
diff --git a/app/src/views/private/components/revisions-drawer-detail/types.ts b/app/src/views/private/components/revisions-sidebar-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/types.ts
rename to app/src/views/private/components/revisions-sidebar-detail/types.ts
diff --git a/app/src/views/private/components/sidebar-button/index.ts b/app/src/views/private/components/sidebar-button/index.ts
new file mode 100644
index 0000000000..80d49fdf08
--- /dev/null
+++ b/app/src/views/private/components/sidebar-button/index.ts
@@ -0,0 +1,4 @@
+import SidebarButton from './sidebar-button.vue';
+
+export { SidebarButton };
+export default SidebarButton;
diff --git a/app/src/views/private/components/drawer-button/readme.md b/app/src/views/private/components/sidebar-button/readme.md
similarity index 81%
rename from app/src/views/private/components/drawer-button/readme.md
rename to app/src/views/private/components/sidebar-button/readme.md
index 21895de97c..094d8de540 100644
--- a/app/src/views/private/components/drawer-button/readme.md
+++ b/app/src/views/private/components/sidebar-button/readme.md
@@ -1,11 +1,11 @@
-# Drawer Button
+# Sidebar Button
 
-Looks the same as a drawer detail, but can be used as a button / router link.
+Looks the same as a sidebar detail, but can be used as a button / router link.
 
 ## Usage
 
 ```html
-<drawer-button icon="info">Close Sidebar</drawer-button>
+<sidebar-button icon="info">Close Sidebar</sidebar-button>
 ```
 
 ## Props
diff --git a/app/src/views/private/components/drawer-button/drawer-button.story.ts b/app/src/views/private/components/sidebar-button/sidebar-button.story.ts
similarity index 63%
rename from app/src/views/private/components/drawer-button/drawer-button.story.ts
rename to app/src/views/private/components/sidebar-button/sidebar-button.story.ts
index 44009414c9..a58f701c8f 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.story.ts
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.story.ts
@@ -5,10 +5,10 @@ import withPadding from '../../../../../.storybook/decorators/with-padding';
 import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 import { useAppStore } from '@/stores';
 
-import DrawerButton from './drawer-button.vue';
+import SidebarButton from './sidebar-button.vue';
 
 export default {
-	title: 'Views / Private / Components / Drawer Button',
+	title: 'Views / Private / Components / Sidebar Button',
 	parameters: {
 		notes: markdown,
 	},
@@ -17,25 +17,25 @@ export default {
 
 export const basic = () =>
 	defineComponent({
-		components: { DrawerButton },
+		components: { SidebarButton },
 		props: {
-			drawerOpen: {
-				default: boolean('Drawer Open', true),
+			sidebarOpen: {
+				default: boolean('Sidebar Open', true),
 			},
 		},
 		setup(props) {
 			const appStore = useAppStore();
 
-			appStore.state.drawerOpen = props.drawerOpen;
+			appStore.state.sidebarOpen = props.sidebarOpen;
 
 			watch(
-				() => props.drawerOpen,
+				() => props.sidebarOpen,
 				(newOpen) => {
-					appStore.state.drawerOpen = newOpen;
+					appStore.state.sidebarOpen = newOpen;
 				}
 			);
 		},
 		template: `
-			<drawer-button icon="info">Close Drawer</drawer-button>
+			<sidebar-button icon="info">Close Sidebar</sidebar-button>
 		`,
 	});
diff --git a/app/src/views/private/components/drawer-button/drawer-button.test.ts b/app/src/views/private/components/sidebar-button/sidebar-button.test.ts
similarity index 61%
rename from app/src/views/private/components/drawer-button/drawer-button.test.ts
rename to app/src/views/private/components/sidebar-button/sidebar-button.test.ts
index 1cdcb4fd6d..5bcd204fc4 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.test.ts
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.test.ts
@@ -1,19 +1,19 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import VIcon from '@/components/v-icon/';
-import DrawerButton from './drawer-button.vue';
+import SidebarButton from './sidebar-button.vue';
 import { useAppStore } from '@/stores';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-icon', VIcon);
 
-describe('Views / Private / Components / Drawer Button', () => {
-	it('Does not render the title when the drawer is closed', () => {
+describe('Views / Private / Components / Sidebar Button', () => {
+	it('Does not render the title when the sidebar is closed', () => {
 		const appStore = useAppStore();
 
-		appStore.state.drawerOpen = false;
-		const component = shallowMount(DrawerButton, {
+		appStore.state.sidebarOpen = false;
+		const component = shallowMount(SidebarButton, {
 			localVue,
 		});
 
diff --git a/app/src/views/private/components/drawer-button/drawer-button.vue b/app/src/views/private/components/sidebar-button/sidebar-button.vue
similarity index 87%
rename from app/src/views/private/components/drawer-button/drawer-button.vue
rename to app/src/views/private/components/sidebar-button/sidebar-button.vue
index b28f57b6eb..5a85a3f0de 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.vue
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		class="drawer-button"
+		class="sidebar-button"
 		:is="to ? 'router-link' : 'button'"
 		:class="{ active }"
 		@click="$emit('click', $event)"
@@ -8,7 +8,7 @@
 		<div class="icon">
 			<v-icon :name="icon" outline />
 		</div>
-		<div class="title" v-if="drawerOpen">
+		<div class="title" v-if="sidebarOpen">
 			<slot />
 		</div>
 	</component>
@@ -35,15 +35,15 @@ export default defineComponent({
 	},
 	setup() {
 		const appStore = useAppStore();
-		const { drawerOpen } = toRefs(appStore.state);
+		const { sidebarOpen } = toRefs(appStore.state);
 
-		return { drawerOpen };
+		return { sidebarOpen };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.drawer-button {
+.sidebar-button {
 	position: relative;
 	flex-shrink: 0;
 	width: 100%;
diff --git a/app/src/views/private/components/sidebar-detail-group/index.ts b/app/src/views/private/components/sidebar-detail-group/index.ts
new file mode 100644
index 0000000000..f24c5228a8
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail-group/index.ts
@@ -0,0 +1,4 @@
+import SidebarDetailGroup from './sidebar-detail-group.vue';
+
+export { SidebarDetailGroup };
+export default SidebarDetailGroup;
diff --git a/app/src/views/private/components/sidebar-detail-group/readme.md b/app/src/views/private/components/sidebar-detail-group/readme.md
new file mode 100644
index 0000000000..74530d1c4d
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail-group/readme.md
@@ -0,0 +1,39 @@
+# Sidebar Detail Group
+
+Used in the private view to manage the active state of [the nested `sidebar-detail` components](../sidebar-detail/).
+
+## Usage
+
+```html
+<sidebar-detail-group :sidebar-open="sidebarOpen">
+	<sidebar-detail icon="person" title="Users" >
+		<!-- section content -->
+	</sidebar-detail>
+	<sidebar-detail icon="settings" title="Settings" >
+		<!-- section content -->
+	</sidebar-detail>
+	<sidebar-detail icon="map" title="Routes" >
+		<!-- section content -->
+	</sidebar-detail>
+</sidebar-detail-group>
+```
+
+## Sidebar open state
+
+Once the sidebar closes, all open sidebar details should be closed. By watching the `sidebar-open` prop, we can dynamically close all details.
+
+## Props
+| Prop          | Description                                              | Default |
+|---------------|----------------------------------------------------------|---------|
+| `sidebar-open` | If the sidebar sidebar in the private view is open or not | `false` |
+
+## Slots
+| Slot      | Description |
+|-----------|-------------|
+| _default_ |             |
+
+## Events
+n/a
+
+## CSS Variables
+n/a
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
similarity index 55%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
index 987dc63045..dda3e3485a 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
@@ -4,12 +4,12 @@ import withPadding from '../../../../../.storybook/decorators/with-padding';
 import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 
 import { defineComponent } from '@vue/composition-api';
-import DrawerDetailGroup from './drawer-detail-group.vue';
-import DrawerDetail from '../drawer-detail';
+import SidebarDetailGroup from './sidebar-detail-group.vue';
+import SidebarDetail from '../sidebar-detail';
 import { useAppStore } from '@/stores';
 
 export default {
-	title: 'Views / Private / Components / Drawer Detail Group',
+	title: 'Views / Private / Components / Sidebar Detail Group',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown,
@@ -18,26 +18,26 @@ export default {
 
 export const basic = () =>
 	defineComponent({
-		components: { DrawerDetailGroup, DrawerDetail },
+		components: { SidebarDetailGroup, SidebarDetail },
 		setup() {
 			const appStore = useAppStore({});
-			appStore.state.drawerOpen = false;
+			appStore.state.sidebarOpen = false;
 		},
 		template: `
-		<drawer-detail-group>
-			<drawer-detail icon="person" title="People">
+		<sidebar-detail-group>
+			<sidebar-detail icon="person" title="People">
 				Hi there!
-			</drawer-detail>
-			<drawer-detail icon="settings" title="Settings">
+			</sidebar-detail>
+			<sidebar-detail icon="settings" title="Settings">
 				These sections can be whatever you want them to be
-			</drawer-detail>
-			<drawer-detail icon="sentiment_satisfied_alt" title="Fun times">
+			</sidebar-detail>
+			<sidebar-detail icon="sentiment_satisfied_alt" title="Fun times">
 				This is a third section in the sidebar
-			</drawer-detail>
-			<drawer-detail icon="forum" title="Comments">
+			</sidebar-detail>
+			<sidebar-detail icon="forum" title="Comments">
 				These sections can hold any markup:
 
 				<v-input placeholder="I'm an input" />
-			</drawer-detail>
-		</drawer-detail-group>`,
+			</sidebar-detail>
+		</sidebar-detail-group>`,
 	});
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
similarity index 59%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
index e3a0ebd12f..84be109b1b 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
@@ -1,24 +1,24 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
-import DrawerDetailGroup from './drawer-detail-group.vue';
+import SidebarDetailGroup from './sidebar-detail-group.vue';
 import VItemGroup from '@/components/v-item-group';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-item-group', VItemGroup);
 
-describe('Views / Private / Drawer Detail Group', () => {
-	it('Resets the opened child details when the drawer closes', async () => {
-		const component = shallowMount(DrawerDetailGroup, {
+describe('Views / Private / Sidebar Detail Group', () => {
+	it('Resets the opened child details when the sidebar closes', async () => {
+		const component = shallowMount(SidebarDetailGroup, {
 			localVue,
 			propsData: {
-				drawerOpen: true,
+				sidebarOpen: true,
 			},
 		});
 
 		(component.vm as any).openDetail = ['test'];
 
-		component.setProps({ drawerOpen: false });
+		component.setProps({ sidebarOpen: false });
 		await component.vm.$nextTick();
 		expect((component.vm as any).openDetail).toEqual([]);
 	});
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
similarity index 75%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
index 70be0ece27..b88f4d3ade 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-item-group class="drawer-detail-group" v-model="openDetail" scope="drawer-detail">
+	<v-item-group class="sidebar-detail-group" v-model="openDetail" scope="sidebar-detail">
 		<slot />
 	</v-item-group>
 </template>
@@ -9,17 +9,17 @@ import { defineComponent, ref, watch } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
-		drawerOpen: {
+		sidebarOpen: {
 			type: Boolean,
 			default: false,
 		},
 	},
 	setup(props) {
-		// By syncing the opened item here, we can force close the module once the drawer closes
+		// By syncing the opened item here, we can force close the module once the sidebar closes
 		const openDetail = ref<string[]>([]);
 
 		watch(
-			() => props.drawerOpen,
+			() => props.sidebarOpen,
 			(newOpenState) => {
 				if (newOpenState === false) {
 					openDetail.value = [];
@@ -35,7 +35,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail-group {
+.sidebar-detail-group {
 	display: contents;
 }
 </style>
diff --git a/app/src/views/private/components/sidebar-detail/index.ts b/app/src/views/private/components/sidebar-detail/index.ts
new file mode 100644
index 0000000000..901c0e2f65
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import SidebarDetail from './sidebar-detail.vue';
+
+export { SidebarDetail };
+export default SidebarDetail;
diff --git a/app/src/views/private/components/drawer-detail/readme.md b/app/src/views/private/components/sidebar-detail/readme.md
similarity index 67%
rename from app/src/views/private/components/drawer-detail/readme.md
rename to app/src/views/private/components/sidebar-detail/readme.md
index 723c0700cf..74b16e03e5 100644
--- a/app/src/views/private/components/drawer-detail/readme.md
+++ b/app/src/views/private/components/sidebar-detail/readme.md
@@ -1,20 +1,20 @@
-# Drawer Detail
+# Sidebar Detail
 
-Meant to be used in the drawer sidebar of the private view. Is used to register multiple sections in the drawer.
+Meant to be used in the sidebar sidebar of the private view. Is used to register multiple sections in the sidebar.
 
 ## Usage
 
 ```html
-<drawer-detail icon="person" title="Users" >
+<sidebar-detail icon="person" title="Users" >
 	<p>Users:</p>
 	<ul>
 		<li>Admin</li>
 	</ul>
-</drawer-detail>
+</sidebar-detail>
 ```
 
-The active state is managed by the same logic as v-item-group. The drawer detail state is managed by
-the private `drawer-detail-group` component in `private-view`.
+The active state is managed by the same logic as v-item-group. The sidebar detail state is managed by
+the private `sidebar-detail-group` component in `private-view`.
 
 ## Props
 | Prop     | Description                               | Default    |
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.story.ts b/app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
similarity index 78%
rename from app/src/views/private/components/drawer-detail/drawer-detail.story.ts
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
index 24cfad6fa0..bb626ffea4 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.story.ts
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
@@ -6,7 +6,7 @@ import withAltColors from '../../../../../.storybook/decorators/with-alt-colors'
 import { useAppStore } from '@/stores';
 
 export default {
-	title: 'Views / Private / Components / Drawer Detail',
+	title: 'Views / Private / Components / Sidebar Detail',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown,
@@ -16,8 +16,8 @@ export default {
 export const basic = () =>
 	defineComponent({
 		props: {
-			drawerOpen: {
-				default: boolean('Drawer open', true),
+			sidebarOpen: {
+				default: boolean('Sidebar open', true),
 			},
 			icon: {
 				default: text('Icon', 'person'),
@@ -30,10 +30,10 @@ export const basic = () =>
 			const open = ref(false);
 			const appStore = useAppStore();
 
-			appStore.state.drawerOpen = true;
+			appStore.state.sidebarOpen = true;
 
 			watch(
-				() => props.drawerOpen,
+				() => props.sidebarOpen,
 				(newOpen) => (open.value = newOpen)
 			);
 
@@ -44,8 +44,8 @@ export const basic = () =>
 			});
 		},
 		template: `
-			<drawer-detail :title="title" :icon="icon">
+			<sidebar-detail :title="title" :icon="icon">
 				Content
-			</drawer-detail>
+			</sidebar-detail>
 		`,
 	});
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.test.ts b/app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
similarity index 86%
rename from app/src/views/private/components/drawer-detail/drawer-detail.test.ts
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
index b8a7480a97..2d75e6c344 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.test.ts
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI, { ref } from '@vue/composition-api';
-import DrawerDetail from './drawer-detail.vue';
+import SidebarDetail from './sidebar-detail.vue';
 import * as GroupableComposable from '@/composables/groupable/groupable';
 import VIcon from '@/components/v-icon';
 import VDivider from '@/components/v-divider';
@@ -15,14 +15,14 @@ localVue.component('transition-expand', TransitionExpand);
 localVue.component('v-divider', VDivider);
 localVue.component('v-badge', VBadge);
 
-describe('Drawer Detail', () => {
+describe('Sidebar Detail', () => {
 	it('Uses the useGroupable composition', () => {
 		jest.spyOn(GroupableComposable, 'useGroupable');
 
 		const appStore = useAppStore({});
-		appStore.state.drawerOpen = false;
+		appStore.state.sidebarOpen = false;
 
-		mount(DrawerDetail, {
+		mount(SidebarDetail, {
 			localVue,
 			propsData: {
 				icon: 'person',
@@ -43,9 +43,9 @@ describe('Drawer Detail', () => {
 		jest.spyOn(GroupableComposable, 'useGroupable');
 
 		const appStore = useAppStore({});
-		appStore.state.drawerOpen = false;
+		appStore.state.sidebarOpen = false;
 
-		mount(DrawerDetail, {
+		mount(SidebarDetail, {
 			localVue,
 			propsData: {
 				icon: 'person',
@@ -59,6 +59,6 @@ describe('Drawer Detail', () => {
 				},
 			},
 		});
-		expect(GroupableComposable.useGroupable).toHaveBeenCalledWith('Users', 'drawer-detail');
+		expect(GroupableComposable.useGroupable).toHaveBeenCalledWith('Users', 'sidebar-detail');
 	});
 });
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.vue b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
similarity index 76%
rename from app/src/views/private/components/drawer-detail/drawer-detail.vue
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.vue
index d9adffca68..f9c5246f28 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
@@ -1,16 +1,16 @@
 <template>
-	<div class="drawer-detail" :class="{ open: drawerOpen }">
+	<div class="sidebar-detail" :class="{ open: sidebarOpen }">
 		<button class="toggle" @click="toggle" :class="{ open: active }">
 			<div class="icon">
 				<v-badge bordered :value="badge" :disabled="!badge">
 					<v-icon :name="icon" outline />
 				</v-badge>
 			</div>
-			<div class="title" v-show="drawerOpen">
+			<div class="title" v-show="sidebarOpen">
 				{{ title }}
 			</div>
 		</button>
-		<div v-if="close" v-show="drawerOpen" class="close" @click="drawerOpen = false">
+		<div v-if="close" v-show="sidebarOpen" class="close" @click="sidebarOpen = false">
 			<v-icon name="close" />
 		</div>
 		<transition-expand class="scroll-container">
@@ -50,25 +50,25 @@ export default defineComponent({
 	setup(props) {
 		const { active, toggle } = useGroupable({
 			value: props.title,
-			group: 'drawer-detail',
+			group: 'sidebar-detail',
 		});
 		const appStore = useAppStore();
-		const { drawerOpen } = toRefs(appStore.state);
-		return { active, toggle, drawerOpen };
+		const { sidebarOpen } = toRefs(appStore.state);
+		return { active, toggle, sidebarOpen };
 	},
 });
 </script>
 
 <style>
 body {
-	--drawer-detail-icon-color: var(--foreground-normal);
-	--drawer-detail-color: var(--foreground-normal);
-	--drawer-detail-color-active: var(--primary);
+	--sidebar-detail-icon-color: var(--foreground-normal);
+	--sidebar-detail-color: var(--foreground-normal);
+	--sidebar-detail-color-active: var(--primary);
 }
 </style>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-offset-x: 2px;
 	--v-badge-offset-y: 4px;
 	--v-badge-border-color: var(--background-normal-alt);
@@ -80,11 +80,11 @@ body {
 		flex-shrink: 0;
 		width: 100%;
 		height: 64px;
-		color: var(--drawer-detail-color);
+		color: var(--sidebar-detail-color);
 		background-color: var(--background-normal-alt);
 
 		.icon {
-			--v-icon-color: var(--drawer-detail-icon-color);
+			--v-icon-color: var(--sidebar-detail-icon-color);
 
 			display: flex;
 			align-items: center;
@@ -95,9 +95,9 @@ body {
 
 		&.open,
 		&:hover {
-			color: var(--drawer-detail-color-active);
+			color: var(--sidebar-detail-color-active);
 			.icon {
-				--v-icon-color: var(--drawer-detail-color-active);
+				--v-icon-color: var(--sidebar-detail-color-active);
 			}
 		}
 	}
@@ -121,7 +121,7 @@ body {
 		}
 
 		&:hover {
-			color: var(--drawer-detail-color-active);
+			color: var(--sidebar-detail-color-active);
 		}
 	}
 
@@ -152,8 +152,8 @@ body {
 		padding: 16px;
 		::v-deep {
 			.page-description {
-				color: var(--foreground-subdued);
 				margin-bottom: 8px;
+				color: var(--foreground-subdued);
 
 				a {
 					color: var(--primary);
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 16c7306b28..1340e7b011 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -11,7 +11,7 @@
 			</div>
 		</aside>
 		<div class="content" ref="contentEl">
-			<header-bar :title="title" @toggle:drawer="drawerOpen = !drawerOpen" @toggle:nav="navOpen = !navOpen">
+			<header-bar :title="title" @toggle:sidebar="sidebarOpen = !sidebarOpen" @toggle:nav="navOpen = !navOpen">
 				<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
 					<slot :name="scopedSlotName" v-bind="slotData" />
 				</template>
@@ -23,36 +23,36 @@
 		</div>
 		<aside
 			role="contentinfo"
-			class="drawer alt-colors"
-			aria-label="Module Drawer"
-			:class="{ 'is-open': drawerOpen }"
-			@click="openDrawer"
+			class="sidebar alt-colors"
+			aria-label="Module Sidebar"
+			:class="{ 'is-open': sidebarOpen }"
+			@click="openSidebar"
 		>
 			<div class="flex-container">
-				<drawer-detail-group :drawer-open="drawerOpen">
-					<slot name="drawer" />
-				</drawer-detail-group>
+				<sidebar-detail-group :sidebar-open="sidebarOpen">
+					<slot name="sidebar" />
+				</sidebar-detail-group>
 
 				<div class="spacer" />
 
-				<notifications-preview v-model="notificationsPreviewActive" :drawer-open="drawerOpen" />
+				<notifications-preview v-model="notificationsPreviewActive" :sidebar-open="sidebarOpen" />
 			</div>
 		</aside>
 
 		<v-overlay class="nav-overlay" :active="navOpen" @click="navOpen = false" />
-		<v-overlay class="drawer-overlay" :active="drawerOpen" @click="drawerOpen = false" />
+		<v-overlay class="sidebar-overlay" :active="sidebarOpen" @click="sidebarOpen = false" />
 
-		<notifications-group v-if="notificationsPreviewActive === false" :dense="drawerOpen === false" />
+		<notifications-group v-if="notificationsPreviewActive === false" :dense="sidebarOpen === false" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, provide, toRefs, computed } from '@vue/composition-api';
 import ModuleBar from './components/module-bar/';
-import DrawerDetailGroup from './components/drawer-detail-group/';
+import SidebarDetailGroup from './components/sidebar-detail-group/';
 import HeaderBar from './components/header-bar';
 import ProjectInfo from './components/project-info';
-import DrawerButton from './components/drawer-button/';
+import SidebarButton from './components/sidebar-button/';
 import NotificationsGroup from './components/notifications-group/';
 import NotificationsPreview from './components/notifications-preview/';
 import { useUserStore, useAppStore } from '@/stores';
@@ -62,10 +62,10 @@ import emitter, { Events } from '@/events';
 export default defineComponent({
 	components: {
 		ModuleBar,
-		DrawerDetailGroup,
+		SidebarDetailGroup,
 		HeaderBar,
 		ProjectInfo,
-		DrawerButton,
+		SidebarButton,
 		NotificationsGroup,
 		NotificationsPreview,
 	},
@@ -83,7 +83,7 @@ export default defineComponent({
 
 		const notificationsPreviewActive = ref(false);
 
-		const { drawerOpen } = toRefs(appStore.state);
+		const { sidebarOpen } = toRefs(appStore.state);
 
 		const theme = computed(() => {
 			return userStore.state.currentUser?.theme || 'auto';
@@ -95,14 +95,14 @@ export default defineComponent({
 			navOpen,
 			contentEl,
 			theme,
-			drawerOpen,
-			openDrawer,
+			sidebarOpen,
+			openSidebar,
 			notificationsPreviewActive,
 		};
 
-		function openDrawer(event: PointerEvent) {
+		function openSidebar(event: PointerEvent) {
 			if (event.target && (event.target as HTMLElement).classList.contains('close') === false) {
-				drawerOpen.value = true;
+				sidebarOpen.value = true;
 			}
 		}
 	},
@@ -129,7 +129,7 @@ export default defineComponent({
 		}
 	}
 
-	.drawer-overlay {
+	.sidebar-overlay {
 		--v-overlay-z-index: 29;
 
 		@include breakpoint(large) {
@@ -185,7 +185,7 @@ export default defineComponent({
 			display: contents;
 		}
 
-		// Offset for partially visible drawer
+		// Offset for partially visible sidebar
 		@include breakpoint(medium) {
 			margin-right: 64px;
 		}
@@ -195,7 +195,7 @@ export default defineComponent({
 		}
 	}
 
-	.drawer {
+	.sidebar {
 		position: fixed;
 		top: 0;
 		right: 0;

From 6d76cf6737929341af2bf17a16697ec704aa5f4e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 12:14:31 -0400
Subject: [PATCH 02/13] Rename modal to drawer

---
 app/src/components/register.ts                |   8 +-
 .../transition/dialog/transition-dialog.vue   |  34 +++---
 app/src/components/v-dialog/v-dialog.vue      |  19 +++-
 app/src/components/v-drawer/index.ts          |   4 +
 .../v-drawer-heading.vue}                     |   4 +-
 .../v-modal.vue => v-drawer/v-drawer.vue}     | 102 ++++++------------
 app/src/components/v-modal/index.ts           |   4 -
 app/src/components/v-modal/readme.md          |  73 -------------
 app/src/components/v-modal/v-modal.story.ts   |  84 ---------------
 app/src/components/v-modal/v-modal.test.ts    |  24 -----
 app/src/components/v-upload/v-upload.vue      |   6 +-
 app/src/interfaces/file/file.vue              |   6 +-
 app/src/interfaces/files/files.vue            |  10 +-
 .../interfaces/many-to-many/many-to-many.vue  |  10 +-
 .../interfaces/many-to-one/many-to-one.vue    |  10 +-
 .../interfaces/one-to-many/one-to-many.vue    |  10 +-
 app/src/interfaces/user/user.vue              |  10 +-
 app/src/modules/activity/routes/item.vue      |   4 +-
 app/src/modules/collections/routes/item.vue   |  14 +--
 app/src/modules/files/routes/item.vue         |  14 +--
 .../data-model/field-detail/field-detail.vue  |   4 +-
 .../routes/data-model/new-collection.vue      |   4 +-
 .../settings/routes/roles/item/item.vue       |   6 +-
 .../permissions-detail/components/fields.vue  |   2 +-
 .../components/permissions.vue                |   2 +-
 .../permissions-detail/components/presets.vue |   2 +-
 .../components/validation.vue                 |   2 +-
 .../permissions-detail/permissions-detail.vue |   4 +-
 .../modules/settings/routes/webhooks/item.vue |   6 +-
 app/src/modules/users/routes/item.vue         |  14 +--
 .../drawer-collection.vue}                    |   4 +-
 .../components/drawer-collection/index.ts     |   4 +
 .../drawer-item.vue}                          |   4 +-
 .../private/components/drawer-item/index.ts   |   4 +
 .../components/image-editor/image-editor.vue  |   8 +-
 .../components/modal-collection/index.ts      |   4 -
 .../private/components/modal-item/index.ts    |   4 -
 .../revisions-drawer-detail/index.ts          |   4 +
 .../readme.md                                 |   0
 .../revision-item.vue                         |   0
 .../revisions-drawer-detail.vue}              |   6 +-
 .../revisions-drawer-picker.vue}              |   0
 .../revisions-drawer-preview.vue}             |   2 +-
 .../revisions-drawer-updates-change.vue}      |   0
 .../revisions-drawer-updates.vue}             |  10 +-
 .../revisions-drawer.vue}                     |  18 ++--
 .../types.ts                                  |   0
 .../revisions-sidebar-detail/index.ts         |   4 -
 .../revisions-modal-current.vue               |   0
 49 files changed, 185 insertions(+), 387 deletions(-)
 create mode 100644 app/src/components/v-drawer/index.ts
 rename app/src/components/{v-modal/v-modal-heading.vue => v-drawer/v-drawer-heading.vue} (91%)
 rename app/src/components/{v-modal/v-modal.vue => v-drawer/v-drawer.vue} (67%)
 delete mode 100644 app/src/components/v-modal/index.ts
 delete mode 100644 app/src/components/v-modal/readme.md
 delete mode 100644 app/src/components/v-modal/v-modal.story.ts
 delete mode 100644 app/src/components/v-modal/v-modal.test.ts
 rename app/src/views/private/components/{modal-collection/modal-collection.vue => drawer-collection/drawer-collection.vue} (97%)
 create mode 100644 app/src/views/private/components/drawer-collection/index.ts
 rename app/src/views/private/components/{modal-item/modal-item.vue => drawer-item/drawer-item.vue} (98%)
 create mode 100644 app/src/views/private/components/drawer-item/index.ts
 delete mode 100644 app/src/views/private/components/modal-collection/index.ts
 delete mode 100644 app/src/views/private/components/modal-item/index.ts
 create mode 100644 app/src/views/private/components/revisions-drawer-detail/index.ts
 rename app/src/views/private/components/{revisions-sidebar-detail => revisions-drawer-detail}/readme.md (100%)
 rename app/src/views/private/components/{revisions-sidebar-detail => revisions-drawer-detail}/revision-item.vue (100%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-sidebar-detail.vue => revisions-drawer-detail/revisions-drawer-detail.vue} (97%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-modal-picker.vue => revisions-drawer-detail/revisions-drawer-picker.vue} (100%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-modal-preview.vue => revisions-drawer-detail/revisions-drawer-preview.vue} (81%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-modal-updates-change.vue => revisions-drawer-detail/revisions-drawer-updates-change.vue} (100%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-modal-updates.vue => revisions-drawer-detail/revisions-drawer-updates.vue} (85%)
 rename app/src/views/private/components/{revisions-sidebar-detail/revisions-modal.vue => revisions-drawer-detail/revisions-drawer.vue} (83%)
 rename app/src/views/private/components/{revisions-sidebar-detail => revisions-drawer-detail}/types.ts (100%)
 delete mode 100644 app/src/views/private/components/revisions-sidebar-detail/index.ts
 delete mode 100644 app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 01b1ba079e..1298c4ff93 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -22,8 +22,8 @@ import VInput from './v-input/';
 import VItemGroup, { VItem } from './v-item-group';
 import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
 import VMenu from './v-menu/';
-import VModal from './v-modal/';
-import VModalHeading from './v-modal/v-modal-heading.vue';
+import VDrawer from './v-drawer/';
+import VDrawerHeading from './v-drawer/v-drawer-heading.vue';
 import VNotice from './v-notice/';
 import VOverlay from './v-overlay/';
 import VPagination from './v-pagination/';
@@ -73,8 +73,8 @@ Vue.component('v-list-item-text', VListItemText);
 Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
-Vue.component('v-modal', VModal);
-Vue.component('v-modal-heading', VModalHeading);
+Vue.component('v-drawer', VDrawer);
+Vue.component('v-drawer-heading', VDrawerHeading);
 Vue.component('v-notice', VNotice);
 Vue.component('v-overlay', VOverlay);
 Vue.component('v-pagination', VPagination);
diff --git a/app/src/components/transition/dialog/transition-dialog.vue b/app/src/components/transition/dialog/transition-dialog.vue
index 41ba222234..74e1e393fc 100644
--- a/app/src/components/transition/dialog/transition-dialog.vue
+++ b/app/src/components/transition/dialog/transition-dialog.vue
@@ -5,24 +5,24 @@
 </template>
 
 <style lang="scss">
-/** @NOTE this is not scoped on purpose. The children are outsisde of the tree (portal) */
-.dialog-enter-active,
-.dialog-leave-active {
-	transition: opacity var(--slow) var(--transition);
+/** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
+// .dialog-enter-active,
+// .dialog-leave-active {
+// 	transition: opacity var(--slow) var(--transition);
 
-	& > *:not(.v-overlay) {
-		transform: translateY(0px);
-		transition: transform var(--slow) var(--transition-in);
-	}
-}
+// 	& > *:not(.v-overlay) {
+// 		transform: translateY(0px);
+// 		transition: transform var(--slow) var(--transition-in);
+// 	}
+// }
 
-.dialog-enter,
-.dialog-leave-to {
-	opacity: 0;
+// .dialog-enter,
+// .dialog-leave-to {
+// 	opacity: 0;
 
-	& > *:not(.v-overlay) {
-		transform: translateY(50px);
-		transition: transform var(--slow) var(--transition-out);
-	}
-}
+// 	& > *:not(.v-overlay) {
+// 		transform: translateY(50px);
+// 		transition: transform var(--slow) var(--transition-out);
+// 	}
+// }
 </style>
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 0a734c2630..3fe4cf11d6 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -3,7 +3,7 @@
 		<slot name="activator" v-bind="{ on: () => (_active = true) }" />
 
 		<portal to="dialog-outlet">
-			<div v-if="_active" class="container" :class="[className]" :key="id">
+			<div v-if="_active" class="container" :class="[className, placement]" :key="id">
 				<v-overlay active absolute @click="emitToggle" />
 				<slot />
 			</div>
@@ -30,6 +30,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		placement: {
+			type: String,
+			default: 'center',
+			validator: (val: string) => ['center', 'right'].includes(val),
+		},
 	},
 	setup(props, { emit }) {
 		const dialog = ref<HTMLElement | null>(null);
@@ -92,12 +97,20 @@ export default defineComponent({
 	left: 0;
 	z-index: 500;
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	width: 100%;
 	height: 100%;
 	transition: opacity var(--medium) var(--transition);
 
+	&.center {
+		align-items: center;
+		justify-content: center;
+	}
+
+	&.right {
+		align-items: center;
+		justify-content: flex-end;
+	}
+
 	::v-deep .v-card {
 		--v-card-min-width: 540px;
 		--v-card-padding: 20px;
diff --git a/app/src/components/v-drawer/index.ts b/app/src/components/v-drawer/index.ts
new file mode 100644
index 0000000000..789569bf51
--- /dev/null
+++ b/app/src/components/v-drawer/index.ts
@@ -0,0 +1,4 @@
+import VDrawer from './v-drawer.vue';
+
+export { VDrawer };
+export default VDrawer;
diff --git a/app/src/components/v-modal/v-modal-heading.vue b/app/src/components/v-drawer/v-drawer-heading.vue
similarity index 91%
rename from app/src/components/v-modal/v-modal-heading.vue
rename to app/src/components/v-drawer/v-drawer-heading.vue
index 87e523381e..302d207845 100644
--- a/app/src/components/v-modal/v-modal-heading.vue
+++ b/app/src/components/v-drawer/v-drawer-heading.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="v-modal-heading">
+	<div class="v-drawer-heading">
 		<div class="type-title">{{ heading }}</div>
 		<div v-if="subheading" class="subheading">{{ subheading }}</div>
 	</div>
@@ -23,7 +23,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-modal-heading {
+.v-drawer-heading {
 	margin-bottom: 48px;
 
 	.subheading {
diff --git a/app/src/components/v-modal/v-modal.vue b/app/src/components/v-drawer/v-drawer.vue
similarity index 67%
rename from app/src/components/v-modal/v-modal.vue
rename to app/src/components/v-drawer/v-drawer.vue
index fcce7ff4c3..bc97b55495 100644
--- a/app/src/components/v-modal/v-modal.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -1,11 +1,11 @@
 <template>
-	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent">
+	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent" placement="right">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
 
-		<article class="v-modal" :class="{ 'form-width': formWidth }">
-			<header class="header">
+		<article class="v-drawer">
+			<!-- <header class="header">
 				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
 				<h2 class="title">{{ title }}</h2>
 				<slot name="subtitle">
@@ -13,7 +13,8 @@
 				</slot>
 				<div class="spacer" />
 				<slot name="header:append" />
-			</header>
+			</header> -->
+
 			<div class="content" :class="{ 'no-padding': noPadding }">
 				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
@@ -28,9 +29,6 @@
 					<slot />
 				</main>
 			</div>
-			<footer class="footer" v-if="$slots.footer || $scopedSlots.footer">
-				<slot name="footer" v-bind="{ close: () => (_active = false) }" />
-			</footer>
 		</article>
 	</v-dialog>
 </template>
@@ -64,12 +62,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		formWidth: {
-			// If the modal is used to just render a form, it needs to be a little smaller to
-			// allow the form to be rendered in it's correct full size
-			type: Boolean,
-			default: false,
-		},
 	},
 	setup(props, { emit }) {
 		const sidebarActive = ref(false);
@@ -96,57 +88,54 @@ export default defineComponent({
 
 <style>
 body {
-	--v-modal-max-width: 916px;
+	--v-drawer-max-width: 856px;
 }
 </style>
 
 <style lang="scss" scoped>
 @import '@/styles/mixins/breakpoint';
 
-.v-modal {
+.v-drawer {
 	display: flex;
 	flex-direction: column;
-	width: calc(100% - 16px);
-	max-width: var(--v-modal-max-width);
-	height: calc(100% - 16px);
-	max-height: 800px;
+	max-width: var(--v-drawer-max-width);
+	height: 100%;
 	background-color: var(--background-page);
-	border-radius: 4px;
 
 	.spacer {
 		flex-grow: 1;
 	}
 
-	.header {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		height: 60px;
-		padding: 0 16px;
-		border-bottom: 2px solid var(--background-normal);
+	// .header {
+	// 	display: flex;
+	// 	flex-shrink: 0;
+	// 	align-items: center;
+	// 	height: 60px;
+	// 	padding: 0 16px;
+	// 	border-bottom: 2px solid var(--background-normal);
 
-		.title {
-			margin-right: 12px;
-			font-size: 16px;
-		}
+	// 	.title {
+	// 		margin-right: 12px;
+	// 		font-size: 16px;
+	// 	}
 
-		.subtitle {
-			color: var(--foreground-subdued);
-			font-size: 16px;
-		}
+	// 	.subtitle {
+	// 		color: var(--foreground-subdued);
+	// 		font-size: 16px;
+	// 	}
 
-		.menu-toggle {
-			margin-right: 8px;
+	// 	.menu-toggle {
+	// 		margin-right: 8px;
 
-			@include breakpoint(medium) {
-				display: none;
-			}
-		}
+	// 		@include breakpoint(medium) {
+	// 			display: none;
+	// 		}
+	// 	}
 
-		@include breakpoint(medium) {
-			padding: 0 24px;
-		}
-	}
+	// 	@include breakpoint(medium) {
+	// 		padding: 0 24px;
+	// 	}
+	// }
 
 	.content {
 		position: relative;
@@ -204,31 +193,8 @@ body {
 		}
 	}
 
-	.footer {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: flex-end;
-		height: 60px;
-		padding: 0 16px;
-		border-top: 2px solid var(--background-normal);
-
-		::v-deep > *:not(:last-child) {
-			margin-right: 8px;
-		}
-
-		@include breakpoint(medium) {
-			padding: 0 24px;
-		}
-	}
-
 	@include breakpoint(medium) {
 		width: calc(100% - 64px);
-		height: calc(100% - 64px);
 	}
 }
-
-.form-width {
-	--v-modal-max-width: 856px;
-}
 </style>
diff --git a/app/src/components/v-modal/index.ts b/app/src/components/v-modal/index.ts
deleted file mode 100644
index c3a4ca2b16..0000000000
--- a/app/src/components/v-modal/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VModal from './v-modal.vue';
-
-export { VModal };
-export default VModal;
diff --git a/app/src/components/v-modal/readme.md b/app/src/components/v-modal/readme.md
deleted file mode 100644
index 9818b9ca27..0000000000
--- a/app/src/components/v-modal/readme.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Modal
-
-A modal is basically an elaborate pre-configured dialog. It supports an optional left sidebar that allows for easier tab usage.
-
-## Usage
-
-```html
-<v-modal title="My Modal" v-modal="active">
-	Hello, world!
-</v-modal>
-```
-
-```html
-<v-modal title="My Modal">
-	<template #activator="{ on }">
-		<v-button @click="on">Open modal</v-button>
-	</template>
-
-	Hello, world!
-</v-modal>
-```
-
-```html
-<v-modal title="My Modal" v-model="active">
-	<template #activator="{ on }">
-		<v-button @click="on">Open modal</v-button>
-	</template>
-
-	<template #sidebar>
-		<v-tabs vertical>
-			<v-tab>Hello</v-tab>
-			<v-tab>Page 2</v-tab>
-			<v-tab>Page 3</v-tab>
-		</v-tabs>
-	</template>
-
-	<v-tabs-items>
-		<v-tab-item>Hello, world!</v-tab-item>
-		<v-tab-item>I'm page 2!</v-tab-item>
-		<v-tab-item>I'm page 3!</v-tab-item>
-	</v-tabs-items>
-
-	<template #footer="{ close }">
-		<v-button @click="close">Close modal</v-button>
-	</template>
-</v-modal>
-```
-
-## Props
-
-| Prop         | Description                                                     | Default |
-|--------------|-----------------------------------------------------------------|---------|
-| `title`*     | Title for the modal                                             |         |
-| `subtitle`   | Optional subtitle for the modal                                 |         |
-| `active`     | If the modal is active. Used in `v-model`                       | `false` |
-| `persistent` | Prevent the user from exiting the modal by clicking the overlay | `false` |
-
-## Events
-
-| Event    | Description              | Value     |
-|----------|--------------------------|-----------|
-| `toggle` | Sync the `v-model` value | `boolean` |
-
-## Slots
-| Slot        | Description                                            | Data                    |
-|-------------|--------------------------------------------------------|-------------------------|
-| _default_   | Modal content                                          |                         |
-| `activator` | Element to enable the modal                            | `{ on: () => void }`    |
-| `sidebar`   | Sidebar content for the modal. Often used for `v-tabs` |                         |
-| `footer`    | Footer content. Often used for action buttons          | `{ close: () => void }` |
-
-## CSS Variables
-n/a
diff --git a/app/src/components/v-modal/v-modal.story.ts b/app/src/components/v-modal/v-modal.story.ts
deleted file mode 100644
index c9d9ba61b4..0000000000
--- a/app/src/components/v-modal/v-modal.story.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import readme from './readme.md';
-import { defineComponent, ref } from '@vue/composition-api';
-
-export default {
-	title: 'Components / Modal',
-	parameters: {
-		notes: readme,
-	},
-	decorators: [withPadding],
-};
-
-export const basic = () =>
-	defineComponent({
-		setup() {
-			const active = ref(false);
-			return { active };
-		},
-		template: `
-			<div>
-				<v-modal
-					v-model="active"
-					title="Creating New Collection"
-					subtitle="called Customers"
-				>
-					<template #activator="{ on }">
-						<v-button @click="on">Enable modal</v-button>
-					</template>
-
-					<p>Hello world!</p>
-
-					<template #footer="{ close }">
-						<v-button @click="close">Close modal</v-button>
-					</template>
-				</v-modal>
-				<portal-target name="outlet" />
-			</div>
-		`,
-	});
-
-export const withNav = () =>
-	defineComponent({
-		setup() {
-			const active = ref(false);
-			const current = ref(['hello']);
-			return { active, current };
-		},
-		template: `
-			<div>
-				<v-modal
-					v-model="active"
-					title="Creating New Collection"
-					subtitle="called Customers"
-				>
-					<template #activator="{ on }">
-						<v-button @click="on">Enable modal</v-button>
-					</template>
-
-					<template #sidebar>
-						<v-tabs v-model="current" vertical>
-							<v-tab value="hello">Hello</v-tab>
-							<v-tab value="introduce">Modal</v-tab>
-						</v-tabs>
-					</template>
-
-					<v-tabs-items v-model="current">
-						<v-tab-item value="hello">
-							<p>Hello world!</p>
-						</v-tab-item>
-
-						<v-tab-item value="introduce">
-							<p>I'm a modal with tabs</p>
-						</v-tab-item>
-					</v-tabs-items>
-
-
-					<template #footer="{ close }">
-						<v-button @click="close">Close modal</v-button>
-					</template>
-				</v-modal>
-				<portal-target name="outlet" />
-			</div>
-		`,
-	});
diff --git a/app/src/components/v-modal/v-modal.test.ts b/app/src/components/v-modal/v-modal.test.ts
deleted file mode 100644
index 944a497925..0000000000
--- a/app/src/components/v-modal/v-modal.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-
-import VModal from './v-modal.vue';
-import VDialog from '@/components/v-dialog/';
-import VIcon from '@/components/v-icon/';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.component('v-dialog', VDialog);
-localVue.component('v-icon', VIcon);
-
-describe('Components / Modal', () => {
-	it('Renders', () => {
-		const component = shallowMount(VModal, {
-			localVue,
-			propsData: {
-				title: 'My Modal',
-			},
-		});
-
-		expect(component.isVueInstance()).toBe(true);
-	});
-});
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload/v-upload.vue
index 0b7a9ef4a7..0b0d3b69e8 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -52,7 +52,7 @@
 					</v-list>
 				</v-menu>
 
-				<modal-collection
+				<drawer-collection
 					collection="directus_files"
 					:active="activeDialog === 'choose'"
 					@update:active="activeDialog = null"
@@ -88,12 +88,12 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import uploadFiles from '@/utils/upload-files';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import api from '@/api';
 import useItem from '@/composables/use-item';
 
 export default defineComponent({
-	components: { ModalCollection },
+	components: { DrawerCollection },
 	props: {
 		multiple: {
 			type: Boolean,
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index a44af12941..f1ef5bd0f6 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<modal-collection
+		<drawer-collection
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
 			@update:active="activeDialog = null"
@@ -112,7 +112,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, computed } from '@vue/composition-api';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import getRootPath from '@/utils/get-root-path';
@@ -124,7 +124,7 @@ type FileInfo = {
 };
 
 export default defineComponent({
-	components: { ModalCollection },
+	components: { DrawerCollection },
 	props: {
 		value: {
 			type: String,
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 816816208f..78daf1b616 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -34,7 +34,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="editModalActive"
 			:collection="relationInfo.junctionCollection"
@@ -46,7 +46,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relationInfo.relationCollection"
@@ -71,8 +71,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRefs, PropType } from '@vue/composition-api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalCollection from '@/views/private/components/modal-collection';
-import ModalItem from '@/views/private/components/modal-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
 import { get } from 'lodash';
 import i18n from '@/lang';
 
@@ -83,7 +83,7 @@ import usePreview from '@/interfaces/many-to-many/use-preview';
 import useEdit from '@/interfaces/many-to-many/use-edit';
 
 export default defineComponent({
-	components: { ModalCollection, ModalItem },
+	components: { DrawerCollection, DrawerItem },
 	props: {
 		primaryKey: {
 			type: [Number, String],
diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index 76f944c5a4..b7d55d7990 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="editModalActive"
 			:collection="relationInfo.junctionCollection"
@@ -50,7 +50,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relationCollection.collection"
@@ -64,8 +64,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch, PropType, toRefs } from '@vue/composition-api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import { get } from 'lodash';
 
 import useActions from './use-actions';
@@ -75,7 +75,7 @@ import useEdit from './use-edit';
 import useSelection from './use-selection';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: Array as PropType<(number | string | Record<string, any>)[] | null>,
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 7691ea4c1a..b1ebb701be 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -82,7 +82,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active.sync="editModalActive"
 			:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
 			@input="stageEdits"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import api from '@/api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 
 /**
  * @NOTE
@@ -119,7 +119,7 @@ import ModalCollection from '@/views/private/components/modal-collection';
  */
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: [Number, String, Object],
diff --git a/app/src/interfaces/one-to-many/one-to-many.vue b/app/src/interfaces/one-to-many/one-to-many.vue
index cf10f5c55f..73f2a4e05c 100644
--- a/app/src/interfaces/one-to-many/one-to-many.vue
+++ b/app/src/interfaces/one-to-many/one-to-many.vue
@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
 			:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -65,14 +65,14 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
 import api from '@/api';
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import { Filter, Field } from '@/types';
 import { Header } from '@/components/v-table/types';
 import { isEqual } from 'lodash';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: Array as PropType<(number | string | Record<string, any>)[] | null>,
diff --git a/app/src/interfaces/user/user.vue b/app/src/interfaces/user/user.vue
index d27b434db9..a8da9f1a2d 100644
--- a/app/src/interfaces/user/user.vue
+++ b/app/src/interfaces/user/user.vue
@@ -72,7 +72,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-item
+		<drawer-item
 			:active.sync="editModalActive"
 			collection="directus_users"
 			:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
 			v-if="!disabled"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			:active.sync="selectModalActive"
 			collection="directus_users"
 			:selection="selection"
@@ -95,11 +95,11 @@
 import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
 import useCollection from '@/composables/use-collection';
 import api from '@/api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: String,
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index 7be7b344a8..b6dad9e2c3 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal active title="Activity Item" @toggle="close" @esc="close">
+	<v-drawer active title="Activity Item" @toggle="close" @esc="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
 		<template v-else-if="error">
@@ -42,7 +42,7 @@
 
 			<v-button to="/activity">{{ $t('done') }}</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index 5641ef50ad..916317e30b 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -180,7 +180,7 @@
 			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_collections_item'))" />
 			</sidebar-detail>
-			<revisions-sidebar-detail
+			<revisions-drawer-detail
 				v-if="
 					collectionInfo.meta &&
 					collectionInfo.meta.singleton === false &&
@@ -189,7 +189,7 @@
 				"
 				:collection="collection"
 				:primary-key="primaryKey"
-				ref="revisionsSidebarDetail"
+				ref="revisionsDrawerDetail"
 				@revert="refresh"
 			/>
 			<comments-sidebar-detail
@@ -214,7 +214,7 @@ import CollectionsNavigation from '../components/navigation.vue';
 import router from '@/router';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
-import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
@@ -235,7 +235,7 @@ export default defineComponent({
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
-		RevisionsSidebarDetail,
+		RevisionsDrawerDetail,
 		CommentsSidebarDetail,
 		SaveOptions,
 	},
@@ -260,7 +260,7 @@ export default defineComponent({
 		const { collection, primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 
-		const revisionsSidebarDetail = ref<Vue | null>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const { info: collectionInfo, primaryKeyField } = useCollection(collection);
 
@@ -355,7 +355,7 @@ export default defineComponent({
 			archiveTooltip,
 			breadcrumb,
 			title,
-			revisionsSidebarDetail,
+			revisionsDrawerDetail,
 			marked,
 			refresh,
 			confirmLeave,
@@ -395,7 +395,7 @@ export default defineComponent({
 
 			const savedItem: Record<string, any> = await save();
 
-			revisionsSidebarDetail.value?.$data?.refresh?.();
+			revisionsDrawerDetail.value?.$data?.refresh?.();
 
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index c30e86bac6..61288d4a08 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -157,11 +157,11 @@
 
 		<template #sidebar>
 			<file-info-sidebar-detail :file="item" @move-folder="moveToDialogActive = true" />
-			<revisions-sidebar-detail
+			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
-				ref="revisionsSidebarDetail"
+				ref="revisionsDrawerDetail"
 			/>
 			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
@@ -177,7 +177,7 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
 import FilesNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
-import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
@@ -215,7 +215,7 @@ export default defineComponent({
 	},
 	components: {
 		FilesNavigation,
-		RevisionsSidebarDetail,
+		RevisionsDrawerDetail,
 		CommentsSidebarDetail,
 		SaveOptions,
 		FilePreview,
@@ -237,7 +237,7 @@ export default defineComponent({
 		const { breadcrumb } = useBreadcrumb();
 		const fieldsStore = useFieldsStore();
 
-		const revisionsSidebarDetail = ref<Vue | null>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const {
 			isNew,
@@ -322,7 +322,7 @@ export default defineComponent({
 			cacheBuster,
 			editActive,
 			previewActive,
-			revisionsSidebarDetail,
+			revisionsDrawerDetail,
 			formFields,
 			confirmLeave,
 			leaveTo,
@@ -375,7 +375,7 @@ export default defineComponent({
 
 		async function saveAndStay() {
 			await save();
-			revisionsSidebarDetail.value?.$data?.refresh?.();
+			revisionsDrawerDetail.value?.$data?.refresh?.();
 		}
 
 		async function saveAsCopyAndNavigate() {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index d3c58b5cfe..45d72cd7f8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -28,7 +28,7 @@
 		</v-card>
 	</v-dialog>
 
-	<v-modal
+	<v-drawer
 		v-else
 		:active="true"
 		@toggle="cancelField"
@@ -98,7 +98,7 @@
 				@cancel="cancelField"
 			/>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c588dc59d2..c1fa276624 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal
+	<v-drawer
 		:title="$t('creating_new_collection')"
 		:active="true"
 		class="new-collection"
@@ -122,7 +122,7 @@
 				{{ $t('finish_setup') }}
 			</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index fefe7bd374..a4f6cda2ad 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -73,7 +73,7 @@
 
 		<template #sidebar>
 			<role-info-sidebar-detail :role="item" />
-			<revisions-sidebar-detail collection="directus_roles" :primary-key="primaryKey" />
+			<revisions-drawer-detail collection="directus_roles" :primary-key="primaryKey" />
 		</template>
 	</private-view>
 </template>
@@ -83,7 +83,7 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 
 import SettingsNavigation from '../../../components/navigation.vue';
 import router from '@/router';
-import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import { useUserStore } from '@/stores/';
 import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
@@ -95,7 +95,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-item',
-	components: { SettingsNavigation, RevisionsSidebarDetail, RoleInfoSidebarDetail, PermissionsOverview },
+	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoSidebarDetail, PermissionsOverview },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index 79a9c11456..cd3fe9a108 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal-heading
+		<v-drawer-heading
 			:heading="
 				$t('fields_for_role', {
 					role: role ? role.name : $t('public'),
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 33141e5053..54fc896a8d 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal-heading
+		<v-drawer-heading
 			:heading="
 				$t('permissions_for_role', {
 					action: $t(permission.action).toLowerCase(),
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
index 0a56ffef5c..650b95a251 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal-heading
+		<v-drawer-heading
 			:heading="
 				$t('presets_for_role', {
 					action: $t(permission.action).toLowerCase(),
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index 50f9a34c52..fda197ca25 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal-heading
+		<v-drawer-heading
 			:heading="
 				$t('validation_for_role', {
 					action: $t(permission.action).toLowerCase(),
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index 5f125fc8b4..d5de6f2c70 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal :title="modalTitle" :active="true" class="new-collection" persistent>
+	<v-drawer :title="modalTitle" :active="true" class="new-collection" persistent>
 		<template #sidebar v-if="!loading">
 			<tabs :current-tab.sync="currentTab" :tabs="tabs" />
 		</template>
@@ -14,7 +14,7 @@
 		<template #footer v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index 592550e893..bbcb6bd156 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -62,7 +62,7 @@
 			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_item'))" />
 			</sidebar-detail>
-			<revisions-sidebar-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
+			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 		</template>
 	</private-view>
 </template>
@@ -72,7 +72,7 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 
 import SettingsNavigation from '../../components/navigation.vue';
 import router from '@/router';
-import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import marked from 'marked';
@@ -84,7 +84,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'webhooks-item',
-	components: { SettingsNavigation, RevisionsSidebarDetail, SaveOptions },
+	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index 1a363f48b7..136b560334 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -145,11 +145,11 @@
 
 		<template #sidebar>
 			<user-info-sidebar-detail :is-new="isNew" :user="item" />
-			<revisions-sidebar-detail
+			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
-				ref="revisionsSidebarDetail"
+				ref="revisionsDrawerDetail"
 			/>
 			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
@@ -166,7 +166,7 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
 import UsersNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
-import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
@@ -198,7 +198,7 @@ export default defineComponent({
 
 		return next();
 	},
-	components: { UsersNavigation, RevisionsSidebarDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
+	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
 	props: {
 		primaryKey: {
 			type: String,
@@ -219,7 +219,7 @@ export default defineComponent({
 
 		const { info: collectionInfo } = useCollection(ref('directus_users'));
 
-		const revisionsSidebarDetail = ref<Vue | null>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const {
 			isNew,
@@ -315,7 +315,7 @@ export default defineComponent({
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
 			isBatch,
-			revisionsSidebarDetail,
+			revisionsDrawerDetail,
 			previewLoading,
 			avatarSrc,
 			roleName,
@@ -356,7 +356,7 @@ export default defineComponent({
 		async function saveAndStay() {
 			const savedItem: Record<string, any> = await save();
 
-			revisionsSidebarDetail.value?.$data?.refresh?.();
+			revisionsDrawerDetail.value?.$data?.refresh?.();
 
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/app/src/views/private/components/modal-collection/modal-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
similarity index 97%
rename from app/src/views/private/components/modal-collection/modal-collection.vue
rename to app/src/views/private/components/drawer-collection/drawer-collection.vue
index 1521557baa..cb02087526 100644
--- a/app/src/views/private/components/modal-collection/modal-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
@@ -24,7 +24,7 @@
 			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
 			<v-button @click="save">{{ $t('save') }}</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/drawer-collection/index.ts b/app/src/views/private/components/drawer-collection/index.ts
new file mode 100644
index 0000000000..2a1bf970b9
--- /dev/null
+++ b/app/src/views/private/components/drawer-collection/index.ts
@@ -0,0 +1,4 @@
+import DrawerCollection from './drawer-collection.vue';
+
+export { DrawerCollection };
+export default DrawerCollection;
diff --git a/app/src/views/private/components/modal-item/modal-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
similarity index 98%
rename from app/src/views/private/components/modal-item/modal-item.vue
rename to app/src/views/private/components/drawer-item/drawer-item.vue
index 13cd56cc1a..75c317e188 100644
--- a/app/src/views/private/components/modal-item/modal-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="title" persistent form-width @esc="cancel">
+	<v-drawer v-model="_active" :title="title" persistent @esc="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
@@ -25,7 +25,7 @@
 			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
 			<v-button @click="save">{{ $t('save') }}</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/drawer-item/index.ts b/app/src/views/private/components/drawer-item/index.ts
new file mode 100644
index 0000000000..59f5de9096
--- /dev/null
+++ b/app/src/views/private/components/drawer-item/index.ts
@@ -0,0 +1,4 @@
+import DrawerItem from './drawer-item.vue';
+
+export { DrawerItem };
+export default DrawerItem;
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 5fa96c1958..11534e9911 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
+	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
@@ -110,7 +110,7 @@
 			<v-button @click="close" secondary>{{ $t('cancel') }}</v-button>
 			<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -425,8 +425,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .modal {
-	--v-modal-content-padding-small: 0px;
-	--v-modal-content-padding: 0px;
+	--v-drawer-content-padding-small: 0px;
+	--v-drawer-content-padding: 0px;
 }
 
 .editor-container {
diff --git a/app/src/views/private/components/modal-collection/index.ts b/app/src/views/private/components/modal-collection/index.ts
deleted file mode 100644
index 6dcda1e3c7..0000000000
--- a/app/src/views/private/components/modal-collection/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalCollection from './modal-collection.vue';
-
-export { ModalCollection };
-export default ModalCollection;
diff --git a/app/src/views/private/components/modal-item/index.ts b/app/src/views/private/components/modal-item/index.ts
deleted file mode 100644
index 63677ebcd9..0000000000
--- a/app/src/views/private/components/modal-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalItem from './modal-item.vue';
-
-export { ModalItem };
-export default ModalItem;
diff --git a/app/src/views/private/components/revisions-drawer-detail/index.ts b/app/src/views/private/components/revisions-drawer-detail/index.ts
new file mode 100644
index 0000000000..304e56cfbe
--- /dev/null
+++ b/app/src/views/private/components/revisions-drawer-detail/index.ts
@@ -0,0 +1,4 @@
+import RevisionsDrawerDetail from './revisions-drawer-detail.vue';
+
+export { RevisionsDrawerDetail };
+export default RevisionsDrawerDetail;
diff --git a/app/src/views/private/components/revisions-sidebar-detail/readme.md b/app/src/views/private/components/revisions-drawer-detail/readme.md
similarity index 100%
rename from app/src/views/private/components/revisions-sidebar-detail/readme.md
rename to app/src/views/private/components/revisions-drawer-detail/readme.md
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revision-item.vue b/app/src/views/private/components/revisions-drawer-detail/revision-item.vue
similarity index 100%
rename from app/src/views/private/components/revisions-sidebar-detail/revision-item.vue
rename to app/src/views/private/components/revisions-drawer-detail/revision-item.vue
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
similarity index 97%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index 03ce468b3d..757efa1ee8 100644
--- a/app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
@@ -26,7 +26,7 @@
 			</div>
 		</template>
 
-		<revisions-modal
+		<revisions-drawer
 			v-if="revisions"
 			:revisions="revisions"
 			:current.sync="modalCurrentRevision"
@@ -47,10 +47,10 @@ import { TranslateResult } from 'vue-i18n';
 import i18n from '@/lang';
 import formatLocalized from '@/utils/localized-format';
 import RevisionItem from './revision-item.vue';
-import RevisionsModal from './revisions-modal.vue';
+import RevisionsDrawer from './revisions-drawer.vue';
 
 export default defineComponent({
-	components: { RevisionItem, RevisionsModal },
+	components: { RevisionItem, RevisionsDrawer },
 	props: {
 		collection: {
 			type: String,
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-picker.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
similarity index 100%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-modal-picker.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
similarity index 81%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
index f535273d77..ca2fa8a215 100644
--- a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
+		<v-drawer-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
 		<v-form
 			disabled
 			:collection="revision.collection"
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates-change.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
similarity index 100%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates-change.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
similarity index 85%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
index b80d9aa515..8497f7082c 100644
--- a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="updates">
-		<v-modal-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
+		<v-drawer-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
 
 		<div class="change" v-for="change in changes" :key="change.name">
 			<div class="type-label">{{ change.name }}</div>
-			<revisions-modal-updates-change deleted :changes="change.changes" />
-			<revisions-modal-updates-change added :changes="change.changes" />
+			<revisions-drawer-updates-change deleted :changes="change.changes" />
+			<revisions-drawer-updates-change added :changes="change.changes" />
 		</div>
 	</div>
 </template>
@@ -15,10 +15,10 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
 import { Revision } from './types';
 import { useFieldsStore } from '@/stores';
 import { diffWordsWithSpace, diffJson, diffArrays } from 'diff';
-import RevisionsModalUpdatesChange from './revisions-modal-updates-change.vue';
+import RevisionsDrawerUpdatesChange from './revisions-drawer-updates-change.vue';
 
 export default defineComponent({
-	components: { RevisionsModalUpdatesChange },
+	components: { RevisionsDrawerUpdatesChange },
 	props: {
 		revision: {
 			type: Object as PropType<Revision>,
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
similarity index 83%
rename from app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index a1b6ac71bd..e09785f8bc 100644
--- a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<v-modal v-model="_active" :title="$t('item_revision')" @esc="_active = false">
+		<v-drawer v-model="_active" :title="$t('item_revision')" @esc="_active = false">
 			<template #subtitle>
-				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
+				<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
 			</template>
 
 			<template #sidebar>
@@ -14,8 +14,8 @@
 			</template>
 
 			<div class="content">
-				<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
-				<revisions-modal-updates
+				<revisions-drawer-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
+				<revisions-drawer-updates
 					v-if="currentTab[0] === 'updates'"
 					:revision="currentRevision"
 					:revisions="revisions"
@@ -28,7 +28,7 @@
 				</v-button>
 				<v-button @click="close">{{ $t('done') }}</v-button>
 			</template>
-		</v-modal>
+		</v-drawer>
 
 		<v-dialog v-model="confirmRevert" :persistent="reverting" @esc="confirmRevert = false">
 			<v-card>
@@ -52,13 +52,13 @@ import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
 import useSync from '@/composables/use-sync';
 import { Revision } from './types';
 import i18n from '@/lang';
-import RevisionsModalPicker from './revisions-modal-picker.vue';
-import RevisionsModalPreview from './revisions-modal-preview.vue';
-import RevisionsModalUpdates from './revisions-modal-updates.vue';
+import RevisionsDrawerPicker from './revisions-drawer-picker.vue';
+import RevisionsDrawerPreview from './revisions-drawer-preview.vue';
+import RevisionsDrawerUpdates from './revisions-drawer-updates.vue';
 import api from '@/api';
 
 export default defineComponent({
-	components: { RevisionsModalPicker, RevisionsModalPreview, RevisionsModalUpdates },
+	components: { RevisionsDrawerPicker, RevisionsDrawerPreview, RevisionsDrawerUpdates },
 	props: {
 		revisions: {
 			type: Array as PropType<Revision[]>,
diff --git a/app/src/views/private/components/revisions-sidebar-detail/types.ts b/app/src/views/private/components/revisions-drawer-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/revisions-sidebar-detail/types.ts
rename to app/src/views/private/components/revisions-drawer-detail/types.ts
diff --git a/app/src/views/private/components/revisions-sidebar-detail/index.ts b/app/src/views/private/components/revisions-sidebar-detail/index.ts
deleted file mode 100644
index 167fa9383c..0000000000
--- a/app/src/views/private/components/revisions-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RevisionsSidebarDetail from './revisions-sidebar-detail.vue';
-
-export { RevisionsSidebarDetail };
-export default RevisionsSidebarDetail;
diff --git a/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue b/app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue
deleted file mode 100644
index e69de29bb2..0000000000

From 38440e229b1b4ce0bc19fe7c7c65eef1bb102e6d Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:13:05 -0400
Subject: [PATCH 03/13] Add right placement transition for dialog

---
 .../transition/dialog/transition-dialog.vue   | 42 ++++++++++++-------
 app/src/components/v-dialog/v-dialog.vue      | 38 ++++++++++++-----
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/app/src/components/transition/dialog/transition-dialog.vue b/app/src/components/transition/dialog/transition-dialog.vue
index 74e1e393fc..451d0ed13b 100644
--- a/app/src/components/transition/dialog/transition-dialog.vue
+++ b/app/src/components/transition/dialog/transition-dialog.vue
@@ -6,23 +6,33 @@
 
 <style lang="scss">
 /** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
-// .dialog-enter-active,
-// .dialog-leave-active {
-// 	transition: opacity var(--slow) var(--transition);
+.dialog-enter-active,
+.dialog-leave-active {
+	transition: opacity var(--slow) var(--transition);
 
-// 	& > *:not(.v-overlay) {
-// 		transform: translateY(0px);
-// 		transition: transform var(--slow) var(--transition-in);
-// 	}
-// }
+	&.center > *:not(.v-overlay) {
+		transform: translateY(0px);
+		transition: transform var(--slow) var(--transition-in);
+	}
 
-// .dialog-enter,
-// .dialog-leave-to {
-// 	opacity: 0;
+	&.right > *:not(.v-overlay) {
+		transform: translateX(0px);
+		transition: transform var(--slow) var(--transition-in);
+	}
+}
 
-// 	& > *:not(.v-overlay) {
-// 		transform: translateY(50px);
-// 		transition: transform var(--slow) var(--transition-out);
-// 	}
-// }
+.dialog-enter,
+.dialog-leave-to {
+	opacity: 0;
+
+	&.center > *:not(.v-overlay) {
+		transform: translateY(50px);
+		transition: transform var(--slow) var(--transition-out);
+	}
+
+	&.right > *:not(.v-overlay) {
+		transform: translateX(50px);
+		transition: transform var(--slow) var(--transition-out);
+	}
+}
 </style>
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 3fe4cf11d6..a411cd4d69 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -99,16 +99,29 @@ export default defineComponent({
 	display: flex;
 	width: 100%;
 	height: 100%;
-	transition: opacity var(--medium) var(--transition);
+
+	::v-deep > * {
+		z-index: 2;
+		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
+	}
 
 	&.center {
 		align-items: center;
 		justify-content: center;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			animation: nudge 200ms;
+		}
 	}
 
 	&.right {
 		align-items: center;
 		justify-content: flex-end;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			transform-origin: right;
+			animation: shake 200ms;
+		}
 	}
 
 	::v-deep .v-card {
@@ -125,15 +138,6 @@ export default defineComponent({
 	.v-overlay {
 		--v-overlay-z-index: 1;
 	}
-
-	&.nudge {
-		animation: nudge 200ms;
-	}
-
-	::v-deep > * {
-		z-index: 2;
-		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
-	}
 }
 
 @keyframes nudge {
@@ -149,4 +153,18 @@ export default defineComponent({
 		transform: scale(1);
 	}
 }
+
+@keyframes shake {
+	0% {
+		transform: scaleX(1);
+	}
+
+	50% {
+		transform: scaleX(0.98);
+	}
+
+	100% {
+		transform: scaleX(1);
+	}
+}
 </style>

From c601b790c78730252beecd760020da99a901a10f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:21:28 -0400
Subject: [PATCH 04/13] Add cancel button

---
 app/src/components/v-drawer/v-drawer.vue             | 12 +++++++++++-
 app/src/modules/activity/routes/item.vue             |  2 +-
 .../routes/data-model/field-detail/field-detail.vue  |  2 +-
 .../settings/routes/data-model/new-collection.vue    |  2 +-
 .../drawer-collection/drawer-collection.vue          |  2 +-
 .../private/components/drawer-item/drawer-item.vue   |  2 +-
 .../private/components/image-editor/image-editor.vue |  9 ++++++++-
 .../revisions-drawer-detail/revisions-drawer.vue     |  2 +-
 8 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index bc97b55495..2f8c787b15 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -1,10 +1,13 @@
 <template>
-	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent" placement="right">
+	<v-dialog v-model="_active" @esc="$emit('cancel')" :persistent="persistent" placement="right">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
 
 		<article class="v-drawer">
+			<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
+				<v-icon name="close" />
+			</v-button>
 			<!-- <header class="header">
 				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
 				<h2 class="title">{{ title }}</h2>
@@ -96,12 +99,19 @@ body {
 @import '@/styles/mixins/breakpoint';
 
 .v-drawer {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	max-width: var(--v-drawer-max-width);
 	height: 100%;
 	background-color: var(--background-page);
 
+	.cancel {
+		position: absolute;
+		top: 32px;
+		left: -76px;
+	}
+
 	.spacer {
 		flex-grow: 1;
 	}
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index b6dad9e2c3..68ac108d18 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer active title="Activity Item" @toggle="close" @esc="close">
+	<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
 		<template v-else-if="error">
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 45d72cd7f8..e4f85d2e4e 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -32,7 +32,7 @@
 		v-else
 		:active="true"
 		@toggle="cancelField"
-		@esc="cancelField"
+		@cancel="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c1fa276624..dc99bac6e5 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -4,7 +4,7 @@
 		:active="true"
 		class="new-collection"
 		persistent
-		@esc="$router.push('/settings/data-model')"
+		@cancel="$router.push('/settings/data-model')"
 	>
 		<v-dialog :active="saveError !== null" @toggle="saveError = null" @esc="saveError = null">
 			<v-card class="selectable">
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index cb02087526..aa6baa8fd9 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @cancel="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 75c317e188..9404e1616f 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="title" persistent @esc="cancel">
+	<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 11534e9911..30995e0944 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,5 +1,12 @@
 <template>
-	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
+	<v-drawer
+		v-model="_active"
+		class="modal"
+		:title="$t('editing_image')"
+		persistent
+		no-padding
+		@cancel="_active = false"
+	>
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index e09785f8bc..dc20fb034f 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-drawer v-model="_active" :title="$t('item_revision')" @esc="_active = false">
+		<v-drawer v-model="_active" :title="$t('item_revision')" @cancel="_active = false">
 			<template #subtitle>
 				<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
 			</template>

From 298d1c29a4a2c4fe88c6dc1706535c77455affe2 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:29:54 -0400
Subject: [PATCH 05/13] Add header bar to drawer

---
 app/src/components/v-drawer/v-drawer.vue      | 64 ++++++++++---------
 .../modules/collections/routes/collection.vue |  8 +--
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index 2f8c787b15..fa34673669 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -8,6 +8,7 @@
 			<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
 				<v-icon name="close" />
 			</v-button>
+
 			<!-- <header class="header">
 				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
 				<h2 class="title">{{ title }}</h2>
@@ -29,6 +30,21 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
+					<header-bar :title="title">
+						<template #headline>
+							<slot name="subtitle">
+								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+							</slot>
+						</template>
+						<template #title-outer:prepend>
+							<v-button class="header-icon" rounded icon secondary disabled>
+								<v-icon :name="icon" />
+							</v-button>
+						</template>
+						<template #actions><slot name="actions" /></template>
+						<template #title:append><slot name="header:append" /></template>
+					</header-bar>
+
 					<slot />
 				</main>
 			</div>
@@ -38,8 +54,12 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
+import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
 
 export default defineComponent({
+	components: {
+		HeaderBar,
+	},
 	model: {
 		prop: 'active',
 		event: 'toggle',
@@ -65,6 +85,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		icon: {
+			type: String,
+			default: 'box',
+		},
 	},
 	setup(props, { emit }) {
 		const sidebarActive = ref(false);
@@ -116,36 +140,16 @@ body {
 		flex-grow: 1;
 	}
 
-	// .header {
-	// 	display: flex;
-	// 	flex-shrink: 0;
-	// 	align-items: center;
-	// 	height: 60px;
-	// 	padding: 0 16px;
-	// 	border-bottom: 2px solid var(--background-normal);
+	.header-icon {
+		--v-button-background-color: var(--background-normal);
+		--v-button-background-color-activated: var(--background-normal);
+		--v-button-background-color-hover: var(--background-normal-alt);
+		--v-button-color-disabled: var(--foreground-normal);
+	}
 
-	// 	.title {
-	// 		margin-right: 12px;
-	// 		font-size: 16px;
-	// 	}
-
-	// 	.subtitle {
-	// 		color: var(--foreground-subdued);
-	// 		font-size: 16px;
-	// 	}
-
-	// 	.menu-toggle {
-	// 		margin-right: 8px;
-
-	// 		@include breakpoint(medium) {
-	// 			display: none;
-	// 		}
-	// 	}
-
-	// 	@include breakpoint(medium) {
-	// 		padding: 0 24px;
-	// 	}
-	// }
+	.header-bar {
+		padding: 0 !important;
+	}
 
 	.content {
 		position: relative;
@@ -191,10 +195,12 @@ body {
 		.main {
 			flex-grow: 1;
 			padding: 16px 16px 32px;
+			padding-top: 0;
 			overflow: auto;
 
 			@include breakpoint(medium) {
 				padding: 32px;
+				padding-top: 0;
 			}
 		}
 
diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index 5d59d4de16..1755c46524 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -591,14 +591,14 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--background-normal-alt);
 }
 
-.layout {
-	--layout-offset-top: 64px;
-}
-
 .header-icon {
 	--v-button-color-disabled: var(--foreground-normal);
 }
 
+.layout {
+	--layout-offset-top: 64px;
+}
+
 .bookmark-controls {
 	.add,
 	.save,

From 2b1395b5fcb2d95d6a53d0dd28becd6b69f65c2c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:46:52 -0400
Subject: [PATCH 06/13] Update drawer actions

---
 app/src/modules/activity/routes/item.vue      | 11 +++++-----
 .../components/file-info-sidebar-detail.vue   |  4 ++--
 .../field-detail/components/actions.vue       | 20 ++++++++++-------
 .../data-model/field-detail/field-detail.vue  |  2 +-
 .../routes/data-model/new-collection.vue      | 22 ++++++++++++-------
 .../permissions-detail/components/actions.vue |  4 +++-
 .../permissions-detail/permissions-detail.vue |  2 +-
 .../drawer-collection/drawer-collection.vue   |  7 +++---
 .../components/drawer-item/drawer-item.vue    |  7 +++---
 .../revisions-drawer.vue                      | 10 +++++----
 10 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index 68ac108d18..c87bb44235 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -34,13 +34,14 @@
 			<p>{{ item.item }}</p>
 		</template>
 
-		<template #footer>
-			<v-button v-if="openItemLink" :to="openItemLink">
-				<v-icon name="launch" left />
-				{{ $t('open') }}
+		<template #actions>
+			<v-button v-if="openItemLink" :to="openItemLink" icon rounded v-tooltip.bottom="$t('open')">
+				<v-icon name="launch" />
 			</v-button>
 
-			<v-button to="/activity">{{ $t('done') }}</v-button>
+			<v-button to="/activity" icon rounded v-tooltip.bottom="$t('done')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/modules/files/components/file-info-sidebar-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
index 347c6255d8..36bbc48655 100644
--- a/app/src/modules/files/components/file-info-sidebar-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('file_details')" close>
+	<sidebar-detail icon="info_outline" :title="$t('file_details')" close>
 		<dl v-if="file">
 			<div v-if="file.type">
 				<dt>{{ $t('type') }}</dt>
@@ -104,7 +104,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_files_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
index 70638f2dff..d532e745ac 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
@@ -1,14 +1,18 @@
 <template>
 	<div class="actions">
-		<v-button secondary @click="$emit('cancel')">
-			{{ $t('cancel') }}
+		<v-button
+			v-if="!isExisting && currentTabIndex < tabs.length - 1"
+			@click="nextTab"
+			:disabled="nextDisabled"
+			icon
+			rounded
+			v-tooltip.bottom="$t('next')"
+		>
+			<v-icon name="arrow_forward" />
 		</v-button>
-		<div class="spacer" />
-		<v-button v-if="!isExisting && currentTabIndex < tabs.length - 1" @click="nextTab" :disabled="nextDisabled">
-			{{ $t('next') }}
-		</v-button>
-		<v-button v-else @click="$emit('save')" :loading="saving">
-			{{ $t('save') }}
+
+		<v-button v-else @click="$emit('save')" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
 		</v-button>
 	</div>
 </template>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index e4f85d2e4e..86dff8c5b9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -87,7 +87,7 @@
 			:type="localType"
 		/>
 
-		<template #footer>
+		<template #actions>
 			<setup-actions
 				:saving="saving"
 				:collection="collection"
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index dc99bac6e5..c8e05c5fc4 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -106,20 +106,26 @@
 			</v-tab-item>
 		</v-tabs-items>
 
-		<template #footer>
-			<v-button secondary to="/settings/data-model">
-				{{ $t('cancel') }}
-			</v-button>
-			<div class="spacer" />
+		<template #actions>
 			<v-button
 				:disabled="!collectionName || collectionName.length === 0"
 				v-if="currentTab[0] === 'collection'"
 				@click="currentTab = ['system']"
+				v-tooltip.bottom="$t('next')"
+				icon
+				rounded
 			>
-				{{ $t('next') }}
+				<v-icon name="arrow_forward" />
 			</v-button>
-			<v-button v-if="currentTab[0] === 'system'" @click="save" :loading="saving">
-				{{ $t('finish_setup') }}
+			<v-button
+				v-if="currentTab[0] === 'system'"
+				@click="save"
+				:loading="saving"
+				v-tooltip.bottom="$t('finish_setup')"
+				icon
+				rounded
+			>
+				<v-icon name="check" />
 			</v-button>
 		</template>
 	</v-drawer>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
index 0dd5aa45cc..e19b68bfde 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="actions">
-		<v-button @click="save" :loading="loading">{{ $t('save') }}</v-button>
+		<v-button @click="save" :loading="loading" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
+		</v-button>
 	</div>
 </template>
 
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index d5de6f2c70..ed631d1c00 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -11,7 +11,7 @@
 			<presets v-if="currentTab[0] === 'presets'" :permission.sync="permission" :role="role" />
 		</template>
 
-		<template #footer v-if="!loading">
+		<template #actions v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
 		</template>
 	</v-drawer>
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index aa6baa8fd9..32873a63c0 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -20,9 +20,10 @@
 			</template>
 		</component>
 
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 9404e1616f..54177655a6 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -21,9 +21,10 @@
 			v-model="_edits"
 		/>
 
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index dc20fb034f..71ffd81360 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -22,11 +22,13 @@
 				/>
 			</div>
 
-			<template #footer="{ close }">
-				<v-button @click="confirmRevert = true" class="revert">
-					{{ $t('revert') }}
+			<template #actions>
+				<v-button @click="confirmRevert = true" class="revert" icon rounded v-tooltip.bottom="$t('revert')">
+					<v-icon name="restore" />
+				</v-button>
+				<v-button @click="_active = false" icon rounded v-tooltip.bottom="$t('done')">
+					<v-icon name="check" />
 				</v-button>
-				<v-button @click="close">{{ $t('done') }}</v-button>
 			</template>
 		</v-drawer>
 

From 4fe77447c1b2c891a8eea26abc1d6d0825354bc9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:48:39 -0400
Subject: [PATCH 07/13] Fix wrong reference in file info

---
 .../files/components/file-info-sidebar-detail.vue    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/modules/files/components/file-info-sidebar-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
index 36bbc48655..18081a21b1 100644
--- a/app/src/modules/files/components/file-info-sidebar-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -41,11 +41,11 @@
 				<dd>{{ file.checksum }}</dd>
 			</div>
 
-			<div v-if="user_created">
+			<div v-if="userCreated">
 				<dt>{{ $t('owner') }}</dt>
 				<dd>
-					<user-popover :user="user_created.id">
-						<router-link :to="user_created.link">{{ user_created.name }}</router-link>
+					<user-popover :user="userCreated.id">
+						<router-link :to="userCreated.link">{{ userCreated.name }}</router-link>
 					</user-popover>
 				</dd>
 			</div>
@@ -55,11 +55,11 @@
 				<dd>{{ modificationDate }}</dd>
 			</div>
 
-			<div v-if="user_modified">
+			<div v-if="userModified">
 				<dt>{{ $t('edited_by') }}</dt>
 				<dd>
-					<user-popover :user="user_modified.id">
-						<router-link :to="user_modified.link">{{ user_modified.name }}</router-link>
+					<user-popover :user="userModified.id">
+						<router-link :to="userModified.link">{{ userModified.name }}</router-link>
 					</user-popover>
 				</dd>
 			</div>

From d2cfc12fd3480e44d4b2af1a8932dccd12bbe5a0 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:57:05 -0400
Subject: [PATCH 08/13] Fix padding on lists

---
 app/src/components/v-drawer/v-drawer.vue | 30 ++++++++++--------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index fa34673669..ccef2461be 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -9,16 +9,6 @@
 				<v-icon name="close" />
 			</v-button>
 
-			<!-- <header class="header">
-				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
-				<h2 class="title">{{ title }}</h2>
-				<slot name="subtitle">
-					<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
-				</slot>
-				<div class="spacer" />
-				<slot name="header:append" />
-			</header> -->
-
 			<div class="content" :class="{ 'no-padding': noPadding }">
 				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
@@ -36,16 +26,21 @@
 								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
 							</slot>
 						</template>
+
 						<template #title-outer:prepend>
 							<v-button class="header-icon" rounded icon secondary disabled>
 								<v-icon :name="icon" />
 							</v-button>
 						</template>
+
 						<template #actions><slot name="actions" /></template>
+
 						<template #title:append><slot name="header:append" /></template>
 					</header-bar>
 
-					<slot />
+					<div class="padding-box">
+						<slot />
+					</div>
 				</main>
 			</div>
 		</article>
@@ -147,10 +142,6 @@ body {
 		--v-button-color-disabled: var(--foreground-normal);
 	}
 
-	.header-bar {
-		padding: 0 !important;
-	}
-
 	.content {
 		position: relative;
 		display: flex;
@@ -194,9 +185,12 @@ body {
 
 		.main {
 			flex-grow: 1;
+			overflow: auto;
+		}
+
+		.padding-box {
 			padding: 16px 16px 32px;
 			padding-top: 0;
-			overflow: auto;
 
 			@include breakpoint(medium) {
 				padding: 32px;
@@ -204,8 +198,8 @@ body {
 			}
 		}
 
-		&.no-padding .main {
-			padding: 0px;
+		&.no-padding .padding-box {
+			padding: 0px !important;
 		}
 	}
 

From 2f48feb52cbb976fdcb9c98b8bb8194b629e9bfc Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 14:00:56 -0400
Subject: [PATCH 09/13] Fix french language code

---
 .../modules/settings/routes/data-model/field-detail/store.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 8d4fb7eb03..33e0a73a6a 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -474,7 +474,7 @@ function initLocalStore(collection: string, field: string, type: typeof localTyp
 								name: 'German',
 							},
 							{
-								code: 'fr-Fr',
+								code: 'fr-FR',
 								name: 'French',
 							},
 							{

From c8a176cdb126265cb6b60e6d07546dd659eed84c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 14:37:01 -0400
Subject: [PATCH 10/13] Cleanup image editor

---
 app/src/components/v-drawer/v-drawer.vue       | 16 ++++++++++++++--
 .../use-element-size/use-element-size.ts       | 18 ++++++++++++++----
 .../components/image-editor/image-editor.vue   | 14 ++++++++------
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index ccef2461be..07725a9b86 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -20,7 +20,7 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
-					<header-bar :title="title">
+					<header-bar ref="headerBarEl" :title="title">
 						<template #headline>
 							<slot name="subtitle">
 								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
@@ -33,6 +33,7 @@
 							</v-button>
 						</template>
 
+						<template #actions:prepend><slot name="actions:prepend" /></template>
 						<template #actions><slot name="actions" /></template>
 
 						<template #title:append><slot name="header:append" /></template>
@@ -50,6 +51,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
 import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
+import useElementSize from '@/composables/use-element-size';
 
 export default defineComponent({
 	components: {
@@ -89,6 +91,7 @@ export default defineComponent({
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
+		const headerBarEl = ref<Vue>();
 		const mainEl = ref<Element>();
 
 		provide('main-element', mainEl);
@@ -103,7 +106,9 @@ export default defineComponent({
 			},
 		});
 
-		return { sidebarActive, _active, mainEl };
+		const { height } = useElementSize(mainEl);
+
+		return { sidebarActive, _active, mainEl, headerBarEl, headerHeight: height };
 	},
 });
 </script>
@@ -189,10 +194,17 @@ body {
 		}
 
 		.padding-box {
+			--content-padding: 16px;
+			--content-padding-bottom: 32px;
+
+			height: 1px; // allow height: 100% children
+			min-height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
 			padding: 16px 16px 32px;
 			padding-top: 0;
 
 			@include breakpoint(medium) {
+				--content-padding: 32px;
+
 				padding: 32px;
 				padding-top: 0;
 			}
diff --git a/app/src/composables/use-element-size/use-element-size.ts b/app/src/composables/use-element-size/use-element-size.ts
index 776d47f305..f8270bdb3f 100644
--- a/app/src/composables/use-element-size/use-element-size.ts
+++ b/app/src/composables/use-element-size/use-element-size.ts
@@ -1,6 +1,7 @@
 import { Ref, ref, isRef, onMounted, onUnmounted } from '@vue/composition-api';
 import { notEmpty } from '@/utils/is-empty';
 import { ResizeObserver as ResizeObserverPolyfill } from 'resize-observer';
+import Vue from 'vue';
 
 declare global {
 	interface Window {
@@ -8,7 +9,7 @@ declare global {
 	}
 }
 
-export default function useElementSize<T extends Element>(target: T | Ref<T> | Ref<null>) {
+export default function useElementSize<T extends Element>(target: T | Ref<undefined | null | T | Vue>) {
 	const width = ref(0);
 	const height = ref(0);
 
@@ -24,10 +25,19 @@ export default function useElementSize<T extends Element>(target: T | Ref<T> | R
 	});
 
 	onMounted(() => {
-		const t = isRef(target) ? target.value : target;
+		const deref = isRef(target) ? target.value : target;
+		console.log(deref);
 
-		if (notEmpty(t)) {
-			resizeObserver.observe(t);
+		let targetElement: Element;
+
+		if (deref instanceof Vue) {
+			targetElement = (deref as Vue).$el;
+		} else {
+			targetElement = deref as Element;
+		}
+
+		if (notEmpty(targetElement)) {
+			resizeObserver.observe(targetElement);
 		}
 	});
 
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 30995e0944..f584ddd126 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -11,7 +11,7 @@
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
 
-		<template #header:append>
+		<template #subtitle>
 			<span class="warning">{{ $t('changes_are_immediate_and_permanent') }}</span>
 		</template>
 
@@ -103,19 +103,20 @@
 			</div>
 		</div>
 
-		<template #footer="{ close }">
+		<template #actions:prepend>
 			<div class="dimensions" v-if="imageData">
-				<v-icon name="info_outline" />
 				{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
 				<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 					->
 					{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
 				</template>
 			</div>
+		</template>
 
-			<div class="spacer" />
-			<v-button @click="close" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
@@ -482,6 +483,7 @@ export default defineComponent({
 }
 
 .dimensions {
+	margin-right: 12px;
 	color: var(--foreground-subdued);
 	font-feature-settings: 'tnum';
 }

From d65af412583d134806be1629e51ea3f36460f80e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 15:10:27 -0400
Subject: [PATCH 11/13] Use notices instead of drawer heading

---
 app/src/components/register.ts                |   2 -
 .../components/v-drawer/v-drawer-heading.vue  |  34 ----
 app/src/components/v-drawer/v-drawer.vue      |  36 +----
 app/src/components/v-form/v-form.vue          |   6 +-
 .../use-element-size/use-element-size.ts      |  18 +--
 .../field-detail/components/display.vue       |   6 +-
 .../field-detail/components/field.vue         |   6 +-
 .../field-detail/components/interface.vue     |   6 +-
 .../field-detail/components/languages.vue     | 145 ------------------
 .../components/relationship-m2m.vue           |   7 +-
 .../components/relationship-m2o.vue           |   7 +-
 .../components/relationship-o2m.vue           |   7 +-
 .../field-detail/components/schema.vue        |  12 +-
 .../field-detail/components/translations.vue  |   7 +-
 .../data-model/field-detail/field-detail.vue  |  80 +++++-----
 .../routes/data-model/new-collection.vue      |  18 ++-
 .../permissions-detail/components/fields.vue  |  13 +-
 .../components/permissions.vue                |  15 +-
 .../permissions-detail/components/presets.vue |  14 +-
 .../components/validation.vue                 |  15 +-
 .../drawer-collection/drawer-collection.vue   |   2 +-
 .../components/drawer-item/drawer-item.vue    |  49 +++---
 .../components/image-editor/image-editor.vue  |  11 +-
 .../revisions-drawer-preview.vue              |  13 +-
 .../revisions-drawer-updates.vue              |  10 +-
 .../revisions-drawer.vue                      |   6 +
 26 files changed, 217 insertions(+), 328 deletions(-)
 delete mode 100644 app/src/components/v-drawer/v-drawer-heading.vue
 delete mode 100644 app/src/modules/settings/routes/data-model/field-detail/components/languages.vue

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 1298c4ff93..53c643919b 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -23,7 +23,6 @@ import VItemGroup, { VItem } from './v-item-group';
 import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
 import VMenu from './v-menu/';
 import VDrawer from './v-drawer/';
-import VDrawerHeading from './v-drawer/v-drawer-heading.vue';
 import VNotice from './v-notice/';
 import VOverlay from './v-overlay/';
 import VPagination from './v-pagination/';
@@ -74,7 +73,6 @@ Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
 Vue.component('v-drawer', VDrawer);
-Vue.component('v-drawer-heading', VDrawerHeading);
 Vue.component('v-notice', VNotice);
 Vue.component('v-overlay', VOverlay);
 Vue.component('v-pagination', VPagination);
diff --git a/app/src/components/v-drawer/v-drawer-heading.vue b/app/src/components/v-drawer/v-drawer-heading.vue
deleted file mode 100644
index 302d207845..0000000000
--- a/app/src/components/v-drawer/v-drawer-heading.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<div class="v-drawer-heading">
-		<div class="type-title">{{ heading }}</div>
-		<div v-if="subheading" class="subheading">{{ subheading }}</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-
-export default defineComponent({
-	props: {
-		heading: {
-			type: String,
-			required: true,
-		},
-		subheading: {
-			type: String,
-			default: null,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-drawer-heading {
-	margin-bottom: 48px;
-
-	.subheading {
-		margin-top: 4px;
-		color: var(--foreground-subdued);
-	}
-}
-</style>
diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index 07725a9b86..436bb7f07f 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -9,7 +9,7 @@
 				<v-icon name="close" />
 			</v-button>
 
-			<div class="content" :class="{ 'no-padding': noPadding }">
+			<div class="content">
 				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
 					v-if="$slots.sidebar"
@@ -20,7 +20,7 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
-					<header-bar ref="headerBarEl" :title="title">
+					<header-bar :title="title">
 						<template #headline>
 							<slot name="subtitle">
 								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
@@ -39,9 +39,7 @@
 						<template #title:append><slot name="header:append" /></template>
 					</header-bar>
 
-					<div class="padding-box">
-						<slot />
-					</div>
+					<slot />
 				</main>
 			</div>
 		</article>
@@ -51,7 +49,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
 import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
-import useElementSize from '@/composables/use-element-size';
 
 export default defineComponent({
 	components: {
@@ -78,10 +75,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		noPadding: {
-			type: Boolean,
-			default: false,
-		},
 		icon: {
 			type: String,
 			default: 'box',
@@ -91,7 +84,6 @@ export default defineComponent({
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
-		const headerBarEl = ref<Vue>();
 		const mainEl = ref<Element>();
 
 		provide('main-element', mainEl);
@@ -106,9 +98,7 @@ export default defineComponent({
 			},
 		});
 
-		const { height } = useElementSize(mainEl);
-
-		return { sidebarActive, _active, mainEl, headerBarEl, headerHeight: height };
+		return { sidebarActive, _active, mainEl };
 	},
 });
 </script>
@@ -189,30 +179,16 @@ body {
 		}
 
 		.main {
-			flex-grow: 1;
-			overflow: auto;
-		}
-
-		.padding-box {
 			--content-padding: 16px;
 			--content-padding-bottom: 32px;
 
-			height: 1px; // allow height: 100% children
-			min-height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
-			padding: 16px 16px 32px;
-			padding-top: 0;
+			flex-grow: 1;
+			overflow: auto;
 
 			@include breakpoint(medium) {
 				--content-padding: 32px;
-
-				padding: 32px;
-				padding-top: 0;
 			}
 		}
-
-		&.no-padding .padding-box {
-			padding: 0px !important;
-		}
 	}
 
 	@include breakpoint(medium) {
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 959e66f79b..8535bb817b 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -139,10 +139,10 @@ export default defineComponent({
 			const gridClass = computed<string | null>(() => {
 				if (el.value === null) return null;
 
-				if (width.value > 588 && width.value <= 792) {
-					return 'grid';
-				} else {
+				if (width.value > 792) {
 					return 'grid with-fill';
+				} else {
+					return 'grid';
 				}
 
 				return null;
diff --git a/app/src/composables/use-element-size/use-element-size.ts b/app/src/composables/use-element-size/use-element-size.ts
index f8270bdb3f..776d47f305 100644
--- a/app/src/composables/use-element-size/use-element-size.ts
+++ b/app/src/composables/use-element-size/use-element-size.ts
@@ -1,7 +1,6 @@
 import { Ref, ref, isRef, onMounted, onUnmounted } from '@vue/composition-api';
 import { notEmpty } from '@/utils/is-empty';
 import { ResizeObserver as ResizeObserverPolyfill } from 'resize-observer';
-import Vue from 'vue';
 
 declare global {
 	interface Window {
@@ -9,7 +8,7 @@ declare global {
 	}
 }
 
-export default function useElementSize<T extends Element>(target: T | Ref<undefined | null | T | Vue>) {
+export default function useElementSize<T extends Element>(target: T | Ref<T> | Ref<null>) {
 	const width = ref(0);
 	const height = ref(0);
 
@@ -25,19 +24,10 @@ export default function useElementSize<T extends Element>(target: T | Ref<undefi
 	});
 
 	onMounted(() => {
-		const deref = isRef(target) ? target.value : target;
-		console.log(deref);
+		const t = isRef(target) ? target.value : target;
 
-		let targetElement: Element;
-
-		if (deref instanceof Vue) {
-			targetElement = (deref as Vue).$el;
-		} else {
-			targetElement = deref as Element;
-		}
-
-		if (notEmpty(targetElement)) {
-			resizeObserver.observe(targetElement);
+		if (notEmpty(t)) {
+			resizeObserver.observe(t);
 		}
 	});
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
index c593e38846..3451e1e38f 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('display_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('display_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.display" />
 
@@ -130,4 +130,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
index d8a7dff43c..a6f81fa891 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_field_title') }}</h2>
+		<v-notice type="info">{{ $t('schema_field_title') }}</v-notice>
 
 		<div class="form">
 			<div class="field half-left" v-if="fieldData.meta">
@@ -103,4 +103,8 @@ export default defineComponent({
 .required {
 	--v-icon-color: var(--primary);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index 6382a4d26e..7f3b4206a1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('interface_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('interface_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.interface" />
 
@@ -139,4 +139,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
deleted file mode 100644
index 8ce52a6edd..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<div>
-		<h2 class="type-title">{{ $t('configure_languages') }}</h2>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ $t('translations_collection') }}</div>
-				<v-input disabled :value="relations[1].many_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ $t('languages_collection') }}</div>
-				<v-input :class="{ matches: languagesCollectionExists }" db-safe key="languages-collection" v-model="relations[1].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="item in items"
-									:key="item.value"
-									:active="relations[1].one_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[1].one_collection = item.value"
-								>
-									<v-list-item-content>
-										{{ item.text }}
-									</v-list-item-content>
-								</v-list-item>
-							</v-list>
-						</v-menu>
-					</template>
-				</v-input>
-			</div>
-			<v-input :value="relations[1].many_field" :placeholder="$t('foreign_key') + '...'"/>
-			<v-input db-safe :disabled="languagesCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
-			<v-icon class="arrow" name="arrow_back" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, watch } from '@vue/composition-api';
-import { Relation } from '@/types';
-import { Field } from '@/types';
-import { orderBy } from 'lodash';
-import useSync from '@/composables/use-sync';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
-import i18n from '@/lang';
-
-import { state } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const { items } = useRelation();
-
-		const languagesCollectionExists = computed(() => {
-			return !!collectionsStore.getCollection(state.relations[1].one_collection);
-		});
-
-		return {
-			relations: state.relations,
-			items,
-			fieldData: state.fieldData,
-			languagesCollectionExists,
-		};
-
-		function useRelation() {
-			const availableCollections = computed(() => {
-				return orderBy(
-					collectionsStore.state.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					['collection'],
-					['asc']
-				);
-			});
-
-			const items = computed(() =>
-				availableCollections.value.map((collection) => ({
-					text: collection.collection,
-					value: collection.collection,
-				}))
-			);
-
-			return { items };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.v-input.matches {
-		--v-input-color: var(--primary);
-	}
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 14px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 34b7c18f5a..fd734b9fd2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -452,4 +453,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 53811a0266..ec286e0878 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2o') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2o') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -255,4 +256,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 336545a623..7f28918315 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_o2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_o2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -380,4 +381,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index e154ef6bb7..d7d105de09 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -1,6 +1,8 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_setup_title') }}</h2>
+		<v-notice type="info">
+			{{ $t('schema_setup_title') }}
+		</v-notice>
 
 		<div class="form">
 			<div class="field">
@@ -392,10 +394,6 @@ export default defineComponent({
 @import '@/styles/mixins/breakpoint';
 @import '@/styles/mixins/form-grid';
 
-.type-title {
-	margin-bottom: 32px;
-}
-
 .form {
 	--v-form-vertical-gap: 32px;
 	--v-form-horizontal-gap: 32px;
@@ -416,4 +414,8 @@ export default defineComponent({
 	grid-gap: 12px;
 	grid-template-columns: 1fr 1fr;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
index 84255e1cd5..4b5535c4f7 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -349,4 +350,8 @@ export default defineComponent({
 .v-list {
 	--v-list-item-content-font-family: var(--family-monospace);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 86dff8c5b9..d4096792d8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -45,47 +45,49 @@
 			<setup-tabs :current.sync="currentTab" :tabs="tabs" :type="localType" />
 		</template>
 
-		<setup-schema
-			v-if="currentTab[0] === 'schema'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+		<div class="content">
+			<setup-schema
+				v-if="currentTab[0] === 'schema'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-field
-			v-if="currentTab[0] === 'field'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-field
+				v-if="currentTab[0] === 'field'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-relationship
-			v-if="currentTab[0] === 'relationship'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-relationship
+				v-if="currentTab[0] === 'relationship'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-translations
-			v-if="currentTab[0] === 'translations'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-translations
+				v-if="currentTab[0] === 'translations'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-interface
-			v-if="currentTab[0] === 'interface'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-interface
+				v-if="currentTab[0] === 'interface'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-display
-			v-if="currentTab[0] === 'display'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-display
+				v-if="currentTab[0] === 'display'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
+		</div>
 
 		<template #actions>
 			<setup-actions
@@ -404,4 +406,10 @@ export default defineComponent({
 		color: var(--primary);
 	}
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c8e05c5fc4..5edb0c38b8 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -29,9 +29,10 @@
 			</v-tabs>
 		</template>
 
-		<v-tabs-items v-model="currentTab">
+		<v-tabs-items class="content" v-model="currentTab">
 			<v-tab-item value="collection">
-				<h2 class="type-title">{{ $t('creating_collection_info') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_info') }}</v-notice>
+
 				<div class="grid">
 					<div>
 						<div class="type-label">
@@ -83,7 +84,8 @@
 				</div>
 			</v-tab-item>
 			<v-tab-item value="system">
-				<h2 class="type-title">{{ $t('creating_collection_system') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_system') }}</v-notice>
+
 				<div class="grid system">
 					<div v-for="(info, field) in systemFields" :key="field">
 						<div class="type-label">{{ $t(info.label) }}</div>
@@ -475,4 +477,14 @@ export default defineComponent({
 .required {
 	color: var(--primary);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index cd3fe9a108..5577e8ac50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('fields_for_role', {
 					role: role ? role.name : $t('public'),
 					action: $t(permission.action).toLowerCase(),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<p class="type-label">{{ $tc('field', 0) }}</p>
 		<interface-checkboxes v-model="fields" type="json" :choices="fieldsInCollection" />
 	</div>
@@ -83,4 +84,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 54fc896a8d..f473b64a51 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('permissions_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="permissions" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
index 650b95a251..8057e67b50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
@@ -1,13 +1,13 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('presets_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
 		<interface-code v-model="presets" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +47,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index fda197ca25..b83a80aceb 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('validation_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="validation" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index 32873a63c0..2ef3754287 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @cancel="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" @cancel="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 54177655a6..7cff5a1c8c 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,31 +1,33 @@
 <template>
 	<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
-		<template v-if="junctionField">
-			<v-form
-				:loading="loading"
-				:initial-values="item && item[junctionField]"
-				:collection="junctionRelatedCollection"
-				:primary-key="relatedPrimaryKey"
-				:edits="_edits[junctionField]"
-				@input="setJunctionEdits"
-			/>
-
-			<v-divider v-if="showDivider" />
-		</template>
-
-		<v-form
-			:loading="loading"
-			:initial-values="item"
-			:collection="collection"
-			:primary-key="primaryKey"
-			v-model="_edits"
-		/>
-
 		<template #actions>
 			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 			</v-button>
 		</template>
+
+		<div class="drawer-item-content">
+			<template v-if="junctionField">
+				<v-form
+					:loading="loading"
+					:initial-values="item && item[junctionField]"
+					:collection="junctionRelatedCollection"
+					:primary-key="relatedPrimaryKey"
+					:edits="_edits[junctionField]"
+					@input="setJunctionEdits"
+				/>
+
+				<v-divider v-if="showDivider" />
+			</template>
+
+			<v-form
+				:loading="loading"
+				:initial-values="item"
+				:collection="collection"
+				:primary-key="primaryKey"
+				v-model="_edits"
+			/>
+		</div>
 	</v-drawer>
 </template>
 
@@ -289,4 +291,9 @@ export default defineComponent({
 .v-divider {
 	margin: 52px 0;
 }
+
+.drawer-item-content {
+	padding: var(--content-padding);
+	padding-bottom: var(--content-padding-bottom);
+}
 </style>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index f584ddd126..0479664a6e 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,12 +1,5 @@
 <template>
-	<v-drawer
-		v-model="_active"
-		class="modal"
-		:title="$t('editing_image')"
-		persistent
-		no-padding
-		@cancel="_active = false"
-	>
+	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent @cancel="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
@@ -439,7 +432,7 @@ export default defineComponent({
 
 .editor-container {
 	width: 100%;
-	height: 100%;
+	height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
 	overflow: hidden;
 	background-color: var(--background-subdued);
 
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
index ca2fa8a215..aa4ad78931 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<v-drawer-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('revision_post_update') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
+
 		<v-form
 			disabled
 			:collection="revision.collection"
@@ -23,3 +28,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
index 8497f7082c..7f79ca90bb 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="updates">
-		<v-drawer-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('changes_made') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
 
 		<div class="change" v-for="change in changes" :key="change.name">
 			<div class="type-label">{{ change.name }}</div>
@@ -92,4 +96,8 @@ export default defineComponent({
 .change-line {
 	margin-bottom: 4px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index 71ffd81360..1da32cf910 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -141,4 +141,10 @@ export default defineComponent({
 	--v-button-background-color: var(--warning);
 	--v-button-background-color-hover: var(--warning-125);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>

From 8eebc6e950f1eb49ce5eb35558b5c2fa5fec9bc1 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 15:15:13 -0400
Subject: [PATCH 12/13] Fix permissions drawer

---
 app/src/components/v-drawer/v-drawer.vue       | 18 +++++++++++++++---
 app/src/modules/activity/routes/item.vue       | 14 ++++++++++----
 .../permissions-detail/permissions-detail.vue  | 12 ++++++++++--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index 436bb7f07f..1a5cb99bfd 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -5,7 +5,15 @@
 		</template>
 
 		<article class="v-drawer">
-			<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
+			<v-button
+				v-if="showCancel"
+				class="cancel"
+				@click="$emit('cancel')"
+				icon
+				rounded
+				secondary
+				v-tooltip.bottom="$t('cancel')"
+			>
 				<v-icon name="close" />
 			</v-button>
 
@@ -80,7 +88,7 @@ export default defineComponent({
 			default: 'box',
 		},
 	},
-	setup(props, { emit }) {
+	setup(props, { emit, listeners }) {
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
@@ -98,7 +106,11 @@ export default defineComponent({
 			},
 		});
 
-		return { sidebarActive, _active, mainEl };
+		const showCancel = computed(() => {
+			return listeners.hasOwnProperty('cancel');
+		});
+
+		return { sidebarActive, _active, mainEl, showCancel };
 	},
 });
 </script>
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index c87bb44235..dbe60c6285 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -2,13 +2,13 @@
 	<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
-		<template v-else-if="error">
+		<div class="content" v-else-if="error">
 			<v-notice type="danger">
 				{{ error }}
 			</v-notice>
-		</template>
+		</div>
 
-		<template v-else>
+		<div class="content" v-else>
 			<!-- @TODO add final design -->
 			<p class="type-label">User:</p>
 			<user-popover v-if="item.user" :user="item.user.id">
@@ -32,7 +32,7 @@
 
 			<p class="type-label">Item:</p>
 			<p>{{ item.item }}</p>
-		</template>
+		</div>
 
 		<template #actions>
 			<v-button v-if="openItemLink" :to="openItemLink" icon rounded v-tooltip.bottom="$t('open')">
@@ -138,4 +138,10 @@ export default defineComponent({
 .type-label:not(:first-child) {
 	margin-top: 24px;
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index ed631d1c00..8f88f260c2 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -4,12 +4,12 @@
 			<tabs :current-tab.sync="currentTab" :tabs="tabs" />
 		</template>
 
-		<template v-if="!loading">
+		<div class="content" v-if="!loading">
 			<permissions v-if="currentTab[0] === 'permissions'" :permission.sync="permission" :role="role" />
 			<fields v-if="currentTab[0] === 'fields'" :permission.sync="permission" :role="role" />
 			<validation v-if="currentTab[0] === 'validation'" :permission.sync="permission" :role="role" />
 			<presets v-if="currentTab[0] === 'presets'" :permission.sync="permission" :role="role" />
-		</template>
+		</div>
 
 		<template #actions v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
@@ -149,3 +149,11 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+</style>

From b2adfde3fe3ea7fca66e7982a478f22b891dfb2e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 15:17:55 -0400
Subject: [PATCH 13/13] Fix public role permissions

---
 .../item/components/permissions-overview.vue   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index 40c3ce5753..c15e055126 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -136,15 +136,15 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get('/permissions', {
-						params: {
-							filter: {
-								role: {
-									_eq: props.role,
-								},
-							},
-						},
-					});
+					const params: any = { filter: { role: {} } };
+
+					if (props.role === null) {
+						params.filter.role = { _null: true };
+					} else {
+						params.filter.role = { _eq: props.role };
+					}
+
+					const response = await api.get('/permissions', params);
 
 					permissions.value = response.data.data;
 				} catch (err) {