You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.8 KiB
72 lines
1.8 KiB
<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>
|