Added modal to side nav

src/app/components/SideNav.vue

@@ -1,12 +1,15 @@
 <template>
+	<transition name="fade">
+		<div v-if="isOpen" class="modal md:hidden p-8 overflow-auto items-center z-30" @click.self="close"></div>
+	</transition>
 	<div class="contents" ref="root">
-		<div class="lg:hidden bg-white shadow-md items-center flex">
+		<div class="lg:hidden bg-white shadow-md items-center flex z-40">
 			<button class="nav-toggle-button" :class="{ 'active': isOpen }"
 				@click="isOpen = !isOpen">
 				<i class="fas fa-bars"></i>
 			</button>
 		</div>
-		<nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col bg-white shadow-lg z-40" :class="{'active': isOpen}">
+		<nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col bg-white shadow-lg z-50" :class="{'active': isOpen}">
 			<div class="brand">AUTOPLEX</div>
 			<div class="mt-4 text-center">
 				<div class="user"><i class="fas opacity-40" :class="{'fa-user': !isAdmin, 'fa-user-tie': isAdmin}"></i></div>

src/app/components/modals/MovieModal.vue

@@ -204,11 +204,6 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-.modal {
-	@apply fixed inset-0 flex flex-col h-screen;
-	background: rgba(0, 0, 0, 0.5);
-}
-
 .dot-separated > *:not(:first-child)::before {
 	@apply px-2;
 	content: '\2022'

src/app/styles/index.css

@@ -35,3 +35,8 @@ html, body {
 	transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);
 	transform: translateX(-100%);
 }
+
+.modal {
+	@apply fixed inset-0 flex flex-col h-screen;
+	background: rgba(0, 0, 0, 0.5);
+}