Super React-y component in Vue

TopBar.js

import Vue from 'vue'
import { mapState } from 'vuex'
import StyledTopBar from './styles'
import { Button } from '@/HelloTaxUI'
import { NavItem } from '../Navigation'
import { UserService } from '@/services'
import 'flag-icon-css/css/flag-icon.min.css'
import Notifications from '@/components/Notifications'
import { BellIcon, Cog, LogoutIcon } from '@/assets/icons'

const TopBar = Vue.component('TopBar', {
  mounted() {
    document.addEventListener('mousedown', this.closeDropdownsOnBlur, true)
  },

  destroyed() {
    document.removeEventListener('mousedown', this.closeDropdownsOnBlur, true)
  },

  render() {
    const { user, dropdowns } = this

    const { profileOpen, notificationsOpen } = dropdowns

    const profileAvatar = (
      <Button
        nativeOnmousedown={() => this.toggleDropdown('profile')}
        class={'profile-avatar' + (!user.avatar ? ' no-img' : '')}
      >
        {user.avatar ? (
          <img src={user.avatar} />
        ) : (
          user.first_name && user.first_name[0]
        )}
      </Button>
    )

    return (
      <StyledTopBar>
        <span class="indicator">{this.$t('TopBar.all-integrations-live')}</span>

        <div class="topbar-right">
          <Button
            class="notifications-btn"
            nativeOnmousedown={() => this.toggleDropdown('notifications')}
          >
            <BellIcon />
          </Button>

          {profileAvatar}

          {Object.keys(user).length !== 0 && (
            <ul class="profile-dropdown" data-open={profileOpen}>
              <NavItem href="/my-account">
                {profileAvatar}
                <div class="info">
                  <h4>{user.first_name + ' ' + user.last_name}</h4>
                  <span>
                    {this.$t('TopBar.client-id')}: {user.client_id}
                  </span>
                </div>
              </NavItem>

              <NavItem
                icon={Cog}
                name={this.$t('TopBar.manage-account')}
                href="/my-account/manage"
              />

              <NavItem
                icon="GB"
                name={this.$t('TopBar.switch-english')}
                href="/my-account/manage"
              />

              <NavItem
                icon="DE"
                name={this.$t('TopBar.switch-german')}
                href="/my-account/manage"
              />

              <li onClick={() => UserService.unauthenticate()}>
                <a title={this.$t('TopBar.log-out')}>
                  <span class="item-icon">
                    <LogoutIcon />
                  </span>
                  {this.$t('TopBar.log-out')}
                </a>
              </li>
            </ul>
          )}

          <Notifications
            type="highlights"
            data-open={notificationsOpen}
            class="notifications-dropdown"
          />
        </div>
      </StyledTopBar>
    )
  },

  data: () => ({
    dropdowns: {
      profileOpen: false,
      notificationsOpen: false,
    },
  }),

  computed: {
    ...mapState(['user']),
  },

  methods: {
    toggleDropdown(id) {
      const name = id + 'Open'

      // close all the other dropdowns first
      this.dropdowns[
        Object.keys(this.dropdowns).filter(d => d !== name)[0]
      ] = false

      this.dropdowns[name] = !this.dropdowns[name]
    },

    closeDropdown(id) {
      const name = id + 'Open'
      this.dropdowns[name] = false
    },

    closeDropdownsOnBlur(event) {
      if (this.dropdowns.profileOpen || this.dropdowns.notificationsOpen) {
        if (
          event.target.closest(
            '[class*="dropdown"], .notifications-btn, .profile-avatar'
          )
        )
          return

        this.closeDropdown('profile')
        this.closeDropdown('notifications')
      }
    },
  },
})

export default TopBar