<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>
		<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>
</template>

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

export default defineComponent({
	computed: {
		...mapGetters([
			"userName",
			"isAdmin"
		])
	}
});
</script>

<style lang="postcss">
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>
