TheNavBar.vue

<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>