Links.vue

<template>
  <ul class="nav nav-tabs">
    <li
      role="presentation"
      :class="{ active: $route.name === 'home' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link
        to="/"
        exact
      >
        <span class="text-2xl">Home</span>
      </router-link>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'about' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/about">
        <span class="text-2xl">About</span>
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensates' }">-->
    <!--<router-link to="/condensates">-->
    <!--Condensates-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
    <!--<router-link to="/browse">-->
    <!--Browse-->
    <!--</router-link>-->
    <!--</li>-->
    <li
      role="proteins"
      :class="{ active: $route.name === 'proteins' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/proteins">
        <span class="text-2xl">Proteins</span>
      </router-link>
    </li>

    <li
      role="presentation"
      :class="{
        active:
          $route.name === 'condensates' ||
          $route.name === 'biomolecular' ||
          $route.name === 'synthetic'  ||
          $route.name === 'addCondensate',
      }"
      class="nav-item dropdown relative"
      @mouseover="openCondensateMenu"
    >
      <router-link to="/condensates">
        <span class="text-2xl">Condensates</span>
      </router-link>
      <div
        v-if="openCondensateSubMenu"
        class="
          absolute
          z-50
          bg-white
          border
          rounded-b-lg
          border-gray-300
          divide-y
        "
        @mouseleave="openCondensateSubMenu = false"
      >
        <ul>
          <li role="presentation">
            <router-link
              to="/biomolecular"
              class="hover:no-underline dropdown-item h-16 pt-4"
            >
              <span class="text-2xl"> Biomolecular Condensates</span>
            </router-link>
          </li>
          <li role="presentation">
            <router-link
              to="/synthetic"
              class="dropdown-item hover:no-underline h-16 pt-4"
            >
              <span class="text-2xl">Synthetic Condensates</span>
            </router-link>
          </li>
          <li role="presentation" v-if="
                    userRole !== null &&
                      (userRole === 'Maintainer' ||
                      userRole === 'Contributor')
                  ">
            <router-link
              to="/addCondensate"
              class="dropdown-item hover:no-underline h-16 pt-4"
            >
              <span class="text-2xl">Add New Condensate</span>
            </router-link>
          </li>
        </ul>
      </div>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'statistics' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/statistics">
        <span class="text-2xl">Statistics</span>
      </router-link>
    </li>
    <li
      role="presentation"
      @mouseover="openCondensateSubMenu = false"
    >
      <a href="https://wiki.cd-code.org">
        <span class="text-2xl">Encyclopedia</span>
      </a>
    </li>
    <li
      v-show="
        userData !== null &&
          (userRole === 'Contributor' || userRole === 'Maintainer')
      "
      role="presentation"
      :class="{ active: $route.name === 'updateItems' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/updateItems">
        {{
          userRole === "Maintainer"
            ? "All Submitted Changes"
            : "My Submitted Changes"
        }}
      </router-link>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'help' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/help">
        <span class="text-2xl">Help</span>
      </router-link>
    </li>
    <!--    <li-->
    <!--      role="presentation"-->
    <!--      :class="{ active: $route.name === 'test' }"-->
    <!--      @mouseover="openCondensateSubMenu = false"-->
    <!--    >-->
    <!--      <router-link to="/test/P62750">-->
    <!--        <span class="text-2xl">Test</span>-->
    <!--      </router-link>-->
    <!--    </li>-->
    <li
      v-show="userData !== null"
      role="presentation"
      :class="{ active: $route.name === 'profile' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/profile">
        <span class="text-2xl">Profile</span>
      </router-link>
    </li>
    <li
      v-if="userData !== null"
      role="presentation"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link
        to="/login"
        @click.native="signOut"
      >
        <span class="fa fa-sign-out" />
      </router-link>
    </li>
    <li
      v-if="userData === null"
      role="presentation"
      :class="{ active: $route.name === 'login' }"
      @mouseover="openCondensateSubMenu = false"
    >
      <router-link to="/login">
        <span class="text-2xl">Login</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Links',
  data() {
    return {
      // userData: this.$store.getters['User/userData']
      openCondensateSubMenu: false,
    };
  },
  computed: {
    userData: function () {
      return this.$store.getters['User/userData'];
    },
    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: {
    openCondensateMenu() {
      this.openCondensateSubMenu = true;
    },
    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;
}

a:hover {
  color: #ef0087 !important;
}

.active {
  color: #ef0087 !important;
}
</style>