cartodb-4.42/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue

<template>
  <div class="navbar-dropdown" :class="{ 'is-open': open }">
    <ul class="navbar-dropdown-container">
      <li class="navbar-dropdown-profile">
        <div class="avatar-container">
          <img :src="userModel.avatar_url">
        </div>
        <div class="navbar-dropdown-userInfo">
          <p class="text is-semibold is-caption">{{userModel.username}}</p>
          <p class="text is-small">{{userModel.email}}</p>
        </div>
      </li>
      <li class="navbar-dropdown-iconLink">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/settings.svg"/>
        </div>
        <a :href="`${ baseUrl }/profile`" class="text is-semibold is-caption is-txtGrey" @click="linkClicked">{{ $t('UserDropdown.settings') }}</a>
      </li>
      <li class="navbar-dropdown-iconLink" v-if="isOrganizationAdmin">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/organization.svg"/>
        </div>
        <a :href="`${ baseUrl }/organization`" class="text is-semibold is-caption is-txtGrey" @click="linkClicked">{{ $t('UserDropdown.organizationSettings') }}</a>
      </li>
      <li @click="linkClicked" class="navbar-dropdown-iconLink">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/api-keys.svg"/>
        </div>
        <a :href="`${ baseUrl }/your_apps`" class="text is-semibold is-caption is-txtGrey" @click="linkClicked">{{ $t('UserDropdown.apiKeys') }}</a>
      </li>
      <li class="navbar-dropdown-iconLink">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/profile.svg"/>
        </div>
        <a :href="`${ baseUrl }/me`" class="text is-semibold is-caption is-txtGrey" target="_blank" @click="linkClicked">{{ $t('UserDropdown.publicProfile') }}</a>
      </li>
      <li class="navbar-dropdown-iconLink">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/notifications.svg"/>
        </div>
        <router-link :to="{ name: 'notifications' }" class="text is-semibold is-caption is-txtGrey" @click.native="linkClicked" :staticRoute="'/dashboard/notifications'">
          {{ $t('UserDropdown.notifications') }}
        </router-link>
        <span v-if="notificationsCount > 0" class="notification-number text is-semibold is-small is-txtGrey">{{notificationsCount}}</span>
      </li>
      <li class="navbar-dropdown-iconLink">
        <div class="icon-container">
          <img svg-inline src="../../assets/icons/navbar/dropdown/feedback.svg"/>
        </div>
        <a href="https://docs.google.com/forms/d/e/1FAIpQLScBQUWd-TP3Qy514DOCNg-KoLrViHijUR5giLAMS-3jmDnrPg/viewform" class="text is-semibold is-caption is-txtGrey" target="_blank" rel="noopener noreferrer" @click="linkClicked">
          {{ $t('UserDropdown.feedback') }}
        </a>
      </li>
    </ul>
    <a :href="`${ baseUrl }/logout`" class="navbar-dropdown-bottom" @click="linkClicked">
      <div class="arrow"><img src="../../assets/icons/navbar/dropdown/arrow-right.svg" /></div>
      <div class="title is-small is-txtAlert">{{ $t('UserDropdown.logout') }}</div>
    </a>
  </div>
</template>

<script>
export default {
  name: 'UserDropdown',
  props: {
    baseUrl: { type: String, default: '' },
    open: { type: Boolean, default: false },
    userModel: Object,
    notificationsCount: Number
  },
  computed: {
    isOrganizationAdmin () {
      return this.userModel.org_admin;
    }
  },
  methods: {
    linkClicked () {
      this.$emit('linkClick');
    }
  }
};
</script>
<style scoped lang="scss">
@import 'new-dashboard/styles/variables';

.navbar-dropdown {
  visibility: hidden;
  position: absolute;
  right: 0;
  width: 360px;
  margin-top: 18px;
  transition: all 0.25s linear;
  border-radius: 4px;
  opacity: 0;
  box-shadow: $dropdown__shadow;
  pointer-events: none;

  &::before {
    content: "";
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    transform: rotate(45deg) translateX(-50%);
    transform-origin: center center;
    border-radius: 4px;
    background-color: $white;
    box-shadow: $dropdown__shadow;
  }

  &.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: initial;
  }
}

.navbar-dropdown-profile {
  display: flex;
  align-items: center;
  margin-bottom: 36px;

  .avatar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    overflow: hidden;
    border-radius: 50%;

    img {
      width: 100%;
      object-fit: cover;
    }
  }
}

.navbar-dropdown-container {
  position: relative;
  padding: 28px 24px 36px;
  border-radius: 4px 4px 0 0;
  background-color: $white;
}

.navbar-dropdown-iconLink {
  display: flex;
  margin-bottom: 20px;

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

.navbar-dropdown-bottom {
  display: flex;
  align-items: baseline;
  padding: 24px 30px;
  border-radius: 0 0 4px 4px;
  background-color: $softblue;

  &:hover {
    text-decoration: none;
  }

  & .arrow {
    margin-right: 8px;

    img {
      vertical-align: middle;
    }
  }

  .title {
    letter-spacing: 1px;
  }
}

.notification-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-left: 24px;
  border-radius: 50%;
  background-color: $notification__bg-color;
}
</style>