From 6b653f6b1874f7001f3d85cb19d90d210b1bbded Mon Sep 17 00:00:00 2001
From: David Ludwig <davidludwigii@gmail.com>
Date: Wed, 21 Apr 2021 04:23:23 -0500
Subject: [PATCH] Sid-nav is now responsive

---
 postcss.config.js                        |   1 +
 src/app/App.vue                          |   6 +-
 src/app/components/MovieList.vue         |   2 +-
 src/app/components/SideNav.vue           | 115 ++++++++++++++++-------
 src/app/components/modals/MovieModal.vue |   2 +-
 src/app/styles/index.css                 |  10 ++
 tailwind.config.js                       |   3 +-
 7 files changed, 101 insertions(+), 38 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..bf2df03 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-focus-visible': {},
     autoprefixer: {},
   },
 }
diff --git a/src/app/App.vue b/src/app/App.vue
index 1f40cfc..7b6c871 100644
--- a/src/app/App.vue
+++ b/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>
diff --git a/src/app/components/MovieList.vue b/src/app/components/MovieList.vue
index 7c9da9e..7354907 100644
--- a/src/app/components/MovieList.vue
+++ b/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)"/>
diff --git a/src/app/components/SideNav.vue b/src/app/components/SideNav.vue
index 7c19011..05d475c 100644
--- a/src/app/components/SideNav.vue
+++ b/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;
 }
diff --git a/src/app/components/modals/MovieModal.vue b/src/app/components/modals/MovieModal.vue
index 8ae16a7..866315f 100644
--- a/src/app/components/modals/MovieModal.vue
+++ b/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)">
diff --git a/src/app/styles/index.css b/src/app/styles/index.css
index 26dab05..1c1e254 100644
--- a/src/app/styles/index.css
+++ b/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%);
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ac9aaa..3e742dc 100644
--- a/tailwind.config.js
+++ b/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: [],