<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 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 flex-shrink-0 bg-white shadow-lg z-50" :class="{'active': isOpen}">
			<div class="brand font-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>
			</div>
		</nav>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapGetters } from "vuex";

export default defineComponent({
	computed: {
		...mapGetters([
			"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;
}
nav .user {
	@apply w-20 h-20 mx-auto rounded-full flex justify-center items-end bg-gray-200 text-6xl overflow-hidden shadow-sm;
}
nav .user > i {
	line-height: 3.7rem;
}
nav > .links a {
	@apply py-3 px-8 flex space-x-4 hover:bg-gray-100;
}
nav > .links .router-link-active {
	@apply bg-indigo-500 text-white shadow-md hover:bg-indigo-500 cursor-default;

}
nav > .links span {
	@apply w-5
}
</style>
