freeleaps_frontend/frontend/src/headers/HeaderUser.vue

<template>
  <div class="header-container">
    <div class="header-content">
      <div class="information-bar" @click="gotoMessages">
        <img alt="freeleaps logo" src="@/assets/message.png" />
      </div>
      <div class="navigation-container" role="navigation">
        <button class="navigation-item active" @click="gotoWorkspace">
          <svg-icon icon="workspace" class-name="icon" />
          Workspace
        </button>
        <button class="navigation-item" @click="gotoRequests">
          <svg-icon icon="requests" class-name="icon" />
          Requests
        </button>
        <button class="navigation-item" @click="gotoProviders">
          <svg-icon icon="providers" class-name="icon" />
          Providers
        </button>
        <button class="navigation-item" @click="gotoIssueRequest">
          <svg-icon icon="post" class-name="icon" />
          Post
        </button>
      </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">Profile</button>
          </li>
          <li>
            <button class="account-menu-button" @click="gotoHistory">History</button>
          </li>
          <li>
            <hr class="dropdown-divider" />
          </li>
          <li>
            <button class="account-menu-button" @click="signout">
              Log out ({{ userIdentityNote }})
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { UserAuthApi } from '../utils/backend/index'

export default {
  name: 'HeaderGuest',
  components: {},
  computed: {},
  created() {
    if (this.userIdentityNote.length > 8) {
      this.userIdentityNote = this.userIdentityNote.slice(0, 5) + '...'
    }
  },
  data() {
    return {
      userIdentityNote: this.mnx_getUserIdentity()
    }
  },
  methods: {
    gotoMessages() {
      this.mnx_navToMessageHub()
    },
    gotoProviders() {
      this.mnx_navToProviderHub()
    },
    gotoRequests() {
      this.mnx_navToRequestHub()
    },
    gotoProfile() {
      this.mnx_navToUserProfile()
    },
    gotoFinance() {
      this.mnx_navToFinanceCenter()
    },
    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">
.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: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; right: 0; top: 0; background-color: #F44837;}
}

.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;}
  }
}

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