Sid-nav is now responsive

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-focus-visible': {},
     autoprefixer: {},
   },
 }

src/app/App.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="min-h-full flex">
-		<side-nav class="flex-shrink-0"/>
-		<div class="min-h-full p-4 flex flex-col flex-grow">
+	<div class="h-full flex flex-col lg:flex-row">
+		<side-nav v-if="$store.getters.isAuthenticated"/>
+		<div class="h-full p-4 flex flex-col flex-grow overflow-y-auto">
 			<router-view/>
 		</div>
 	</div>

src/app/components/MovieList.vue

@@ -1,5 +1,5 @@
 <template>
-	<ul class="w-full grid gap-8 grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 self-center ">
+	<ul class="w-full grid gap-8 grid-cols-2 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 self-center ">
 		<li class="inline-block" v-for="(movie, index) in movies">
 			<movie-poster class="shadow-md hover:shadow-lg rounded-xl motion-safe:transform hover:scale-105 transition-transform ease-out cursor-pointer"
 				:src="movie.posterPath ?? undefined" size="w185" @click="$emit('onClickMovie', movie, index)"/>

src/app/components/SideNav.vue

@@ -1,38 +1,46 @@
 <template>
-	<nav v-if="$store.getters.isAuthenticated" class="w-72 flex flex-col bg-white shadow-lg">
-		<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>
-			<div class="font-black text-lg opacity-80">{{ userName }}</div>
-			<div class="text-xs opacity-60">{{ isAdmin ? "Admin" : "Plex Member" }}</div>
+	<div class="contents" ref="root">
+		<div class="lg:hidden bg-white shadow-md items-center flex">
+			<button class="nav-toggle-button" :class="{ 'active': isOpen }"
+				@click="isOpen = !isOpen">
+				<i class="fas fa-bars"></i>
+			</button>
 		</div>
-		<ul class="mt-4 text-gray-800 links">
-			<li v-if="isAdmin">
-				<router-link :to="{ name: 'Admin' }">
-					<span><i class="fas fa-cog"></i></span>
-					<div>Admin</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}">
+			<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>
+				<div class="font-black text-lg opacity-80">{{ userName }}</div>
+				<div class="text-xs opacity-60">{{ isAdmin ? "Admin" : "Plex Member" }}</div>
+			</div>
+			<ul class="mt-4 text-gray-800 links">
+				<li v-if="isAdmin">
+					<router-link :to="{ name: 'Admin' }">
+						<span><i class="fas fa-cog"></i></span>
+						<div>Admin</div>
+					</router-link>
+				</li>
+				<li>
+					<router-link :to="{ name: 'Dashboard' }">
+						<span><i class="fas fa-chart-pie"></i></span>
+						<div>Dashboard</div>
+					</router-link>
+				</li>
+				<li>
+					<router-link :to="{ name: 'Search' }">
+						<span><i class="fas fa-search"></i></span>
+						<div>Search</div>
+					</router-link>
+				</li>
+			</ul>
+			<div class="mt-auto p-4">
+				<router-link class="block p-2 text-center  rounded-full shadow-md text-white bg-indigo-500"
+					:to="{ name: 'Logout' }">
+					Logout
 				</router-link>
-			</li>
-			<li>
-				<router-link :to="{ name: 'Dashboard' }">
-					<span><i class="fas fa-chart-pie"></i></span>
-					<div>Dashboard</div>
-				</router-link>
-			</li>
-			<li>
-				<router-link :to="{ name: 'Search' }">
-					<span><i class="fas fa-search"></i></span>
-					<div>Search</div>
-				</router-link>
-			</li>
-		</ul>
-		<div class="mt-auto p-4">
-			<router-link class="block p-2 text-center  rounded-full shadow-md text-white bg-indigo-500"
-				:to="{ name: 'Logout' }">
-				Logout
-			</router-link>
-		</div>
-	</nav>
+			</div>
+		</nav>
+	</div>
 </template>
 
 <script lang="ts">
@@ -45,11 +53,54 @@ export default defineComponent({
 			"userName",
 			"isAdmin"
 		])
+	},
+	data() {
+		return {
+			isOpen: false
+		}
+	},
+	mounted() {
+		document.addEventListener("click", (event: any) => {
+			if (this.isOpen) {
+				if (-1 == event.path.indexOf(this.$refs["root"])) {
+					this.isOpen = false;
+				}
+			}
+		});
+	},
+	watch: {
+		$route(to, from) {
+			if (this.isOpen) {
+				this.isOpen = false;
+			}
+		}
 	}
 });
 </script>
 
 <style lang="postcss">
+.nav-toggle-button {
+	@apply w-14 h-14 flex items-center justify-center text-2xl focus:ring-0 focus:outline-none ring-indigo-500;
+	transition: margin 0.15s cubic-bezier(0.4, 0.0, 1, 1);
+
+}
+.nav-toggle-button.active {
+	@apply ml-72;
+	transition: margin 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+nav {
+	transform: translateX(-100%);
+	transition: transform 0.15s cubic-bezier(0.4, 0.0, 1, 1);
+}
+@media all and (min-width: 1024px) {
+	nav {
+		transform: none !important;
+	}
+}
+nav.active {
+	transform: none;
+	transition: transform 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
 nav > .brand {
 	@apply mt-4 h-12 flex justify-center items-center text-4xl font-thin;
 }

src/app/components/modals/MovieModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<transition appear name="fade">
-		<div v-if="tmdbId !== undefined" class="modal p-8 overflow-auto items-center" @click.self="close">
+		<div v-if="tmdbId !== undefined" class="modal p-8 overflow-auto items-center z-50" @click.self="close">
 			<transition name="slide" appear
 				@before-enter="lockScroll(true)" @enter-cancelled="lockScroll(false)"
 				@leave="lockScroll(false)" @leave-cancelled="lockScroll(true)">

src/app/styles/index.css

@@ -25,3 +25,13 @@ html, body {
 	transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.4, 0.0, 1, 1);
 	transform: translateY(10%);
 }
+
+.slide-left-enter-active, .slide-left-leave-active {
+	transform: none;
+	transition: transform 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.slide-left-enter-from, .slide-left-leave-to {
+	transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);
+	transform: translateX(-100%);
+}

tailwind.config.js

@@ -18,7 +18,8 @@ module.exports = {
       opacity: ["disabled"],
       borderWidth: ["disabled"],
       borderColor: ["disabled"],
-      transform: ["motion-safe"]
+      transform: ["motion-safe"],
+      ringWidth: ["focus-visible"]
     },
   },
   plugins: [],