<template>
<nav
class="
relative
shadow
top-0
flex flex-wrap
items-center
justify-between
px-2
py-3
mb-3
"
>
<div class="text-right px-8 w-full">
Last updated: 30-06-2022
</div>
<div class="px-4 flex mb-2 flex-wrap w-full items-center justify-between">
<div class="ml-4">
<a href="/">
<img
alt="logo"
class="w-36 object-contain rounded-lg"
src="@/assets/cd-code-logo.png"
>
</a>
</div>
<div class="flex items-center space-x-4">
<router-link
to="/"
exact
:class="{ active: $route.name === 'home' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
flex
items-center
text-4xl
font-semibold
hover:text-pink-base
"
>Home</span>
</router-link>
<router-link
to="/about"
:class="{ active: $route.name === 'about' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
flex
items-center
hover:text-pink-base
text-4xl
font-semibold
"
>About</span>
</router-link>
<router-link
to="/proteins"
:class="{ active: $route.name === 'proteins' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
flex
items-center
hover:text-pink-base
text-4xl
font-semibold
leading-snug
"
>Proteins</span>
</router-link>
<div class="relative rounded-lg">
<router-link
to="/condensates"
:class="{
active:
$route.name === 'condensates' ||
$route.name === 'biomolecular' ||
$route.name === 'synthetic' ||
$route.name === 'addCondensate',
}"
class="rounded-lg"
@mouseover.native="openCondensateMenu"
>
<span
class="
px-4
py-4
flex
items-center
hover:text-pink-base
text-4xl
font-semibold
leading-snug
"
>Condensates</span>
</router-link>
<div
v-if="openCondensateSubMenu"
class="
absolute
z-50
grid grid-cols-1
left-0
bg-white
min-w-max
rounded-lg
shadow-lg
border border-gray-200
divide-y divide-gray-200
"
@mouseleave="openCondensateSubMenu = false"
>
<div>
<router-link
to="/biomolecular"
class="rounded-lg"
>
<span
class="
px-4
py-4
flex
rounded-t-lg
text-black
hover:text-pink-base
items-center
text-4xl
font-semibold
"
:class="
$route.name === 'biomolecular' ? 'text-pink-base' : ''
"
>
Biomolecular Condensates</span>
</router-link>
</div>
<div>
<router-link
to="/synthetic"
class="rounded-lg"
>
<span
class="
px-4
py-4
text-black
hover:text-pink-base
flex
items-center
text-4xl
font-semibold
"
:class="$route.name === 'synthetic' ? 'text-pink-base' : ''"
>Synthetic Condensates</span>
</router-link>
</div>
<!-- should uncomment later -->
<div>
<router-link
v-if="
userRole !== null &&
(userRole === 'Maintainer' || userRole === 'Contributor')
"
to="/addCondensate"
class="rounded-lg"
>
<span
class="
px-4
py-4
rounded-b-lg
text-black
hover:text-pink-base
flex
items-center
text-4xl
font-semibold
"
:class="
$route.name === 'addCondensate' ? 'text-pink-base' : ''
"
>Add New Condensate</span>
</router-link>
</div>
</div>
</div>
<router-link
to="/statistics"
:class="{ active: $route.name === 'statistics' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
hover:text-pink-base
flex
items-center
text-4xl
font-semibold
"
>Statistics</span>
</router-link>
<a
href="https://wiki.cd-code.org"
class="rounded-lg"
target="wiki"
@mouseover="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
hover:text-pink-base
flex
items-center
text-4xl
font-semibold
"
>Encyclopedia</span>
</a>
<router-link
to="/help"
:class="{ active: $route.name === 'help' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
hover:text-pink-base
flex
items-center
text-4xl
font-semibold
"
>Help</span>
</router-link>
</div>
<div class="relative z-10 mr-4">
<div class="flex space-x-2">
<router-link
v-if="userData === null"
to="/login"
role="presentation"
:class="
$route.name === 'login' ? 'text-pink-base border-pink-base' : ''
"
class="rounded-lg border-2 border-gray-500 hover:border-pink-base"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-2
hover:text-pink-base
flex
items-center
text-3xl
font-medium
"
>Sign in</span>
</router-link>
<router-link
v-if="userData === null"
to="/signup"
role="presentation"
:class="
$route.name === 'signup' ? 'text-pink-base border-pink-base' : ''
"
class="rounded-lg border-2 border-gray-500 hover:border-pink-base"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-2
hover:text-pink-base
flex
items-center
text-3xl
font-medium
"
>Sign up</span>
</router-link>
</div>
<button
v-if="userData !== null"
type="button"
class="
relative
z-10
rounded-full
text-gray-400
ring-1 ring-black
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray
"
@click="openProfileMenu"
>
<div
class="
w-20
h-20
p-1
flex
hover:text-pink-base
items-center
overflow-hidden
rounded-full
"
>
<!-- <img
class="
object-cover object-center
w-full
h-full
visible
rounded-full
group-hover:hidden
"
src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="RG"
/> -->
<div
class="
w-full
h-full
flex
place-content-center
bg-white-base
align-center
text-center
items-center
visible
text-black text-center
rounded-full
font-bold
align-middle
"
>
<span>{{ userInitials }}</span>
</div>
</div>
</button>
<button
v-if="profileMenuOpen"
tabindex="-1"
class="fixed inset-0 cursor-default h-full w-full"
@click="profileMenuOpen = false"
/>
<div
v-if="profileMenuOpen && userData !== null"
class="
absolute
mt-2
grid grid-cols-1
right-0
bg-white-base
min-w-max
rounded-lg
shadow-lg
border border-gray-200
divide-y divide-gray-300
"
>
<div class="p-4">
<h4 class="font-bold text-black">
{{ userName }}
</h4>
<p class="font-medium text-black text-2xl">
{{ userEmail }}
</p>
</div>
<div>
<div>
<router-link
v-show="userData !== null"
to="/profile"
role="presentation"
:class="{ active: $route.name === 'profile' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
text-black
flex
hover:text-pink-base
items-center
text-2xl
font-medium
"
>Profile</span>
</router-link>
</div>
<div>
<router-link
v-show="
userData !== null &&
(userRole === 'Contributor' || userRole === 'Maintainer')
"
to="/updateItems"
role="presentation"
:class="{ active: $route.name === 'updateItems' }"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
text-black
hover:text-pink-base
flex
items-center
text-2xl
font-medium
"
>
{{
userRole === "Maintainer"
? "All Submitted Changes"
: "My Submitted Changes"
}}
</span>
</router-link>
</div>
<div>
<router-link
v-if="userData !== null"
to="/newcondensate"
role="presentation"
class="rounded-lg"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
text-black
flex
hover:text-pink-base
items-center
text-2xl
font-medium
"
>All Submitted Condensates</span>
</router-link>
</div>
<div>
<router-link
v-if="userData !== null"
to="/login"
role="presentation"
class="rounded-lg"
@click.native="signOut"
@mouseover.native="openCondensateSubMenu = false"
>
<span
class="
px-4
py-4
text-black
flex
hover:text-pink-base
items-center
text-2xl
font-medium
"
>Logout</span>
</router-link>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
// userData: this.$store.getters['User/userData']
openCondensateSubMenu: false,
profileMenuOpen: false,
};
},
computed: {
userData: function () {
return this.$store.getters['User/userData'];
},
userName() {
const data = this.parsingUserData();
return data.full_name;
},
userEmail() {
const data = this.parsingUserData();
return data.email;
},
userInitials() {
const data = this.parsingUserData();
const initials = this.getInitials(data.full_name);
return initials;
},
userRole: function () {
return this.$store.getters['User/userRole'];
},
},
mounted: function () {
const vm = this;
// console.log(vm.userData)
// console.log(this.$route.name)
// if(vm.userData !== null) {
// vm.$router.push('/profile')
// }
},
methods: {
parsingUserData() {
const data = this.$store.getters['User/userData'];
let parsedData = JSON.parse(data);
return parsedData;
},
getInitials(string) {
var names = string.split(' '),
initials = names[0].substring(0, 1).toUpperCase();
if (names.length > 1) {
initials += names[names.length - 1].substring(0, 1).toUpperCase();
}
return initials;
},
openCondensateMenu() {
this.openCondensateSubMenu = true;
},
openProfileMenu() {
this.profileMenuOpen = !this.profileMenuOpen;
},
signOut() {
const vm = this;
window.localStorage.removeItem('jwt');
window.localStorage.removeItem('userData');
window.localStorage.removeItem('roleName');
vm.$store.dispatch('User/logOut');
vm.$router.push('/login');
},
},
};
</script>
<style scoped>
a {
color: black;
}
.active {
color: #ef0087 !important;
}
</style>