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] 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