freeleaps_frontend/frontend/src/headers/HeaderUser.vue

<template>
  <div class="header-container">
    <div class="header-content">
      <div
        class="information-bar"
        @click="gotoMessages"
        :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
      >
        <img alt="freeleaps logo" src="@/assets/message.png" />
      </div>
      <div class="navigation-container" role="navigation">
        <button
          class="navigation-item"
          @click="gotoWorkspace"
          :class="activePath == 'Workspace' ? 'active' : ''"
        >
          <svg-icon icon="workspace" class-name="icon" />
          {{ $t('Workspace') }}
        </button>
        <button
          class="navigation-item"
          @click="gotoRequests"
          :class="activePath == 'Requests' ? 'active' : ''"
        >
          <svg-icon icon="requests" class-name="icon" />
          {{ $t('Requests') }}
        </button>
        <button
          class="navigation-item"
          @click="gotoProviders"
          :class="activePath == 'Providers' ? 'active' : ''"
        >
          <svg-icon icon="providers" class-name="icon" />
          {{ $t('Providers') }}
        </button>
        <button
          class="navigation-item"
          @click="gotoIssueRequest"
          :class="activePath == 'Post' ? 'active' : ''"
        >
          <svg-icon icon="post" class-name="icon" />
          {{ $t('Post') }}
        </button>
        <div class="form-check form-switch header-switch-container">
          <input
            class="form-check-input"
            type="checkbox"
            role="switch"
            id="personal-earning-now-checkbox"
            disabled
          />
          <label class="form-check-label" for="personal-earning-now-checkbox">
            <span>{{ $t('Providing service') }}</span>
          </label>
          <div class="header-switch-desc">
            {{ $t('Please go to profile page to add money receiving method') }}
          </div>
        </div>
        <laguage-switch class="laguage-switch" />
      </div>
      <div class="profile-container">
        <img
          alt="freeleaps logo"
          data-bs-toggle="dropdown"
          aria-expanded="false"
          id="accountButton"
          src="@/assets/profile.png"
        />
        <ul class="dropdown-menu" aria-labelledby="accountButton">
          <li>
            <button class="account-menu-button" @click="gotoProfile">{{ $t('Profile') }}</button>
          </li>
          <li>
            <button class="account-menu-button" @click="gotoHistory">{{ $t('History') }}</button>
          </li>
          <li>
            <hr class="dropdown-divider" />
          </li>
          <li>
            <button class="account-menu-button" @click="signout">
              {{ $t('Log out') }} ({{ userIdentityNote }})
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { UserAuthApi } from '@/utils/backend/index'
import LaguageSwitch from '@/components/LaguageSwitch.vue'

export default {
  name: 'HeaderGuest',
  components: { LaguageSwitch },
  computed: {
    unreadConversationCount() {
      return this.$store.getters['basic/unreadConversationCount']
    }
  },
  created() {
    if (this.userIdentityNote.length > 8) {
      this.userIdentityNote = this.userIdentityNote.slice(0, 5) + '...'
    }
    this.$store.dispatch('basic/initWebsocket', this.mnx_getUserAuthToken())
  },
  data() {
    return {
      userIdentityNote: this.mnx_getUserIdentity(),
      activePath: this.$route.meta.activePath
    }
  },
  watch: {
    $route(to) {
      this.activePath = to.meta.activePath
    }
  },
  methods: {
    gotoMessages() {
      this.mnx_navToMessageHub()
    },
    gotoProviders() {
      this.mnx_navToProviderHub()
    },
    gotoRequests() {
      this.mnx_navToRequestHub()
    },
    gotoProfile() {
      this.mnx_navToUserProfile()
    },
    gotoHistory() {
      this.mnx_navToHistoryHub()
    },
    gotoWorkspace() {
      this.mnx_navToWorkspace()
    },
    gotoIssueRequest() {
      this.mnx_navToRequestIssue(1)
    },

    logout(response, error) {
      response
      error
      this.mnx_unauthenticatedUser()
      this.mnx_logoutRole()
      this.mnx_navToFrontDoor()
    },

    signout() {
      UserAuthApi.signout(this.mnx_getUserIdentity(), this.mnx_getUserAuthToken())
        .then((response) => {
          this.logout(response, null)
        })
        .catch((error) => {
          // continue to logout with errors
          this.logout(null, error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.laguage-switch {
  margin-left: 30px;
}
.header-container {
  width: 100%;
  height: 100%;
  background: #f8fafc;
  max-width: 100%;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: $body-width;
    width: 100%;
    @extend .flex-row-container;
  }
}

.information-bar {
  width: 52px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: white;

  img {
    width: 24px;
    height: 24px;
  }

  &::after {
    content: '';
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f44837;
  }

  &.unread::after {
    display: block;
  }

  &.active {
    border: 1px solid $primary;
  }
}

.profile-container {
  position: relative;

  img {
    width: 56px;
  }
}

.navigation-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .navigation-item {
    @extend .btn;
    @extend .btn-link;
    color: #6e7387;
    text-decoration: none;
    margin: 0 30px;

    &:hover {
      color: $primary;
    }

    &.active {
      color: $primary;
      font-weight: 500;
    }
  }
}

.header-switch-container {
  position: relative;

  .header-switch-desc {
    position: absolute;
    background-color: white;
    left: 0;
    bottom: -24px;
    font-size: 12px;
    color: #3d455f;
    white-space: nowrap;
    padding: 2px 5px;
  }
}

.company-logo {
  max-width: 100%;
  max-height: 100%;
  float: left;
}

.company-slogan {
  @extend .text-center;
  width: 100%;
  color: #fae4ab;
}

.menu-conainer {
  @extend .flex-row-container;
  @extend .px-5;
  @extend .py-5;
  height: 60%;
}

.account-logo {
  max-width: 100%;
  max-height: 100%;
}

.account-container {
  @extend .flex-row-container;
  @extend .col-2;
}

.account-button {
  @extend .btn;
  @extend .btn-outline-success;
  @extend .dropdown-toggle;
  color: #fae4ab;
}

.account-menu-button {
  @extend .btn;
  @extend .btn-link;
  @extend .dropdown-item;
}

.nav-bar-container {
  @extend .flex-row-container;
  @extend .mx-5;
  @extend .my-5;
  @extend .col-8;
}

.nav-bar-item {
  @extend .nav-link;
  @extend .btn;
  @extend .btn-outline-info;
  color: #fae4ab;
}

.nav-bar-button {
  @extend .nav-bar-item;
  @extend .nav-link;
  @extend .btn;
  @extend .btn-outline-info;
  @extend .w-20;
  color: #fae4ab;
}

.nav-bar-dropdown {
  @extend .dropdown;
  @extend .nav-bar-item;
}

.nav-bar-dropdown-menu-button {
  @extend .btn;
  @extend .btn-link;
  @extend .dropdown-item;
}

.message-area {
  @extend .flex-row-container;
  @extend .col-2;
}

.message-button {
  @extend .btn;
  @extend .btn-outline-success;
  color: #fae4ab;
}
</style>