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',
      }"
      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>
        </ul>
      </div>
    </li>
    <!-- <div
        v-if="openCondensateSubMenu"
        @mouseleave="openCondensateSubMenu = false"
        class="
          absolute
          z-50
          w-full
          rounded-lg
          border border-gray-300
          rounded-b-lg
          shadow-lg
          bg-white
        "
      >
        <li
          role="presentation"
         :class="{ active: $route.name === 'biomolecular' }"
          class="
            py-4
            px-6
            text-2xl
            font-bold
            hover:bg-gray-300 hover:text-gray-500 hover:no-underline
          "
        >
          <router-link to="/biomolecular" class="hover:no-underline">
           Biomolecular Condensates
          </router-link>
        </li>
        <li
          role="presentation"
         :class="{ active: $route.name === 'synthetic' }"
          class="
            py-4
            px-6
            text-2xl
            font-bold
            hover:bg-gray-300 hover:text-gray-500 hover:no-underline
          "
        >
          <router-link to="/synthetic" class="hover:no-underline">
            Synthetic Condensates
          </router-link>
        </li>
      </div> -->

    <!-- <li
      role="presentation"
      class="flex relative"
      :class="{ active: $route.name === 'biomolecular' }"
      @mouseleave="openSubMenu = false"
    >
      <router-link
        to="/biomolecular"
        @mouseover="openSubMenu = true"
        class="
          inline-block
          hover:bg-gray-300 hover:text-gray-500 hover:no-underline
          py-4
          px-6
          text-2xl
          font-bold
          text-center
          flex
        "
      >
        Biomolecular Condensates
        <span>
          <svg
            class="
              fill-current
              h-4
              w-4
              transform
              group-hover:-rotate-180 group-hover:text-red-900
              transition
              duration-150
              ease-in-out
            "
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
          >
            <path
              d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
            />
          </svg>
        </span>
      </router-link>
    </li>

    <li role="presentation" :class="{ active: $route.name === 'synthetic' }">
      <router-link
        to="/synthetic"
        class="
          inline-block
          hover:bg-gray-300 hover:text-gray-500 hover:no-underline
          py-4
          px-6
          text-2xl
          font-bold
          text-center
        "
      >
        Synthetic Condensates
      </router-link>
    </li> -->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensate_example' }">-->
    <!--<router-link to="/condensate_example">-->
    <!--Condensate Example-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'protein_example' }">-->
    <!--<router-link to="/protein_example">-->
    <!--Protein Example-->
    <!--</router-link>-->
    <!--</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.ddcode.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
      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-show="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-show="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>