TheNavBar.vue

<template>
  <nav
    class="
      relative
      shadow-md
      bg-secondary
      flex flex-wrap
      items-center
      justify-between
      px-2
      py-3
      mb-3
    "
  >
    <div class="px-4 flex flex-wrap w-full items-center justify-between">
      <div>
        <a href="/">
          <img
            alt="logo"
            class="w-64 rounded-lg"
            src="@/assets/dd-code-logo.png"
          />
        </a>
      </div>
      <div class="flex items-center space-x-4">
        <router-link
          to="/"
          exact
          :class="{ active: $route.name === 'home' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span
            class="
              px-4
              py-4
              flex
              items-center
              text-3xl
              font-medium
              hover:opacity-75
            "
            >Home</span
          >
        </router-link>

        <router-link
          to="/about"
          :class="{ active: $route.name === 'about' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span
            class="
              px-4
              py-4
              flex
              items-center
              text-3xl
              font-medium
              hover:opacity-75
            "
            >About</span
          >
        </router-link>

        <router-link
          to="/proteins"
          :class="{ active: $route.name === 'proteins' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span
            class="
              px-4
              py-4
              flex
              items-center
              text-3xl
              font-medium
              leading-snug
            "
            >Proteins</span
          >
        </router-link>
        <div class="submenu relative rounded-lg">
          <router-link
            to="/condensates"
            :class="{
              active:
                $route.name === 'condensates' ||
                $route.name === 'biomolecular' ||
                $route.name === 'synthetic' ||
                $route.name === 'addCondensate',
            }"
            @mouseover.native="openCondensateMenu"
            class="rounded-lg"
          >
            <span
              class="
                px-4
                py-4
                submenu
                flex
                items-center
                text-3xl
                font-medium
                leading-snug
              "
              >Condensates</span
            >
          </router-link>
          <div
            v-if="openCondensateSubMenu"
            class="
              absolute
              z-50
              grid grid-cols-1
              left-0
              min-w-max
              rounded-lg
              shadow-lg
              border border-gray-200
              divide-y divide-pink-500
              bg-white
            "
            @mouseleave="openCondensateSubMenu = false"
          >
            <div class="submenu">
              <router-link to="/biomolecular" class="rounded-lg">
                <span class="px-4 py-4 flex items-center text-3xl font-medium">
                  Biomolecular Condensates</span
                >
              </router-link>
            </div>
            <div class="submenu">
              <router-link to="/synthetic" class="rounded-lg">
                <span class="px-4 py-4 flex items-center text-3xl font-medium"
                  >Synthetic Condensates</span
                >
              </router-link>
            </div>

            <!-- 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> -->
          </div>
        </div>

        <router-link
          to="/statistics"
          :class="{ active: $route.name === 'statistics' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span class="px-4 py-4 flex items-center text-3xl font-medium"
            >Statistics</span
          >
        </router-link>

        <a
          href="https://wiki.cd-code.org"
          @mouseover="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span class="px-4 py-4 flex items-center text-3xl font-medium"
            >Encyclopedia</span
          >
        </a>

        <router-link
          to="/updateItems"
          v-show="
            userData !== null &&
            (userRole === 'Contributor' || userRole === 'Maintainer')
          "
          role="presentation"
          :class="{ active: $route.name === 'updateItems' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span class="px-4 py-4 flex items-center text-3xl font-medium">
            {{
              userRole === "Maintainer"
                ? "All Submitted Changes"
                : "My Submitted Changes"
            }}
          </span>
        </router-link>

        <router-link
          to="/help"
          :class="{ active: $route.name === 'help' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span class="px-4 py-4 flex items-center text-3xl font-medium"
            >Help</span
          >
        </router-link>
      </div>

      <div class="relative mr-4">
        <router-link
          to="/login"
          v-if="userData === null"
          role="presentation"
          :class="{ active: $route.name === 'login' }"
          @mouseover.native="openCondensateSubMenu = false"
          class="rounded-lg"
        >
          <span class="px-4 py-4 submenu flex items-center text-3xl font-medium"
            >Login</span
          >
        </router-link>
        <button
          v-if="userData !== null"
          type="button"
          class="
            relative
            z-10
            rounded-full
            text-gray-400
            ring-2 ring-gray-400
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray
          "
          @click="openProfileMenu"
        >
          <div
            class="w-20 h-20 p-1 flex 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="
                avatar
                w-full
                h-full
                flex
                place-content-center
                align-center
                text-center
                items-center
                visible
                bg-blue-300
                text-gray-700 text-center
                rounded-full
                font-bold
                align-middle
              "
            >
              <span>{{ userInitials }}</span>
            </div>
          </div>
        </button>
        <button
          v-if="profileMenuOpen"
          tabindex="-1"
          @click="profileMenuOpen = false"
          class="fixed inset-0 cursor-default h-full w-full"
        ></button>
        <div
          v-if="profileMenuOpen && userData !== null"
          class="
            absolute
            mt-2
            z-50
            grid grid-cols-1
            right-0
            bg-gray-800
            w-80
            rounded-lg
            shadow-lg
            border border-gray-200
            divide-y divide-white-500
            bg-white
          "
        >
          <div class="p-4">
            <h4 class="font-bold text-white">{{ userName }}</h4>
            <p class="font-medium text-white text-2xl">{{ userEmail }}</p>
          </div>
          <div>
            <div class="submenu">
              <router-link
                to="/profile"
                v-show="userData !== null"
                role="presentation"
                :class="{ active: $route.name === 'profile' }"
                @mouseover.native="openCondensateSubMenu = false"
                class="rounded-lg"
              >
                <span
                  class="
                    px-4
                    py-4
                    text-white
                    flex
                    items-center
                    text-3xl
                    font-medium
                  "
                  >Profile</span
                >
              </router-link>
            </div>
            <div class="submenu">
              <router-link
                to="/login"
                @click.native="signOut"
                v-if="userData !== null"
                role="presentation"
                @mouseover.native="openCondensateSubMenu = false"
                class="rounded-lg"
              >
                <span
                  class="
                    px-4
                    py-4
                    text-white
                    flex
                    items-center
                    text-3xl
                    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() {
      console.log("hover working");
      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;
}

a:hover {
  color: #ef0087 !important;
  background-color: #a7ebfb;
}
.avatar {
  background-color: #a7ebfb;
}

.submenu span:hover {
  color: #ef0087 !important;
}
.submenu:hover {
  background-color: #a7ebfb;
  border-radius: 5px;
}
.submenu a:hover {
  color: #ef0087 !important;
  border-radius: 5px;
}

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