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>
          <!-- should uncomment later -->
          <!-- <li
            v-if="
              userRole !== null &&
                (userRole === 'Maintainer' ||
                userRole === 'Contributor')
            "
            role="presentation"
          >
            <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>