Skip to content

Instantly share code, notes, and snippets.

@whizkydee
Last active May 4, 2019 12:53
Show Gist options
  • Save whizkydee/ccae404d5382c1abf652b20cb3638e37 to your computer and use it in GitHub Desktop.
Save whizkydee/ccae404d5382c1abf652b20cb3638e37 to your computer and use it in GitHub Desktop.
Super React-y component in Vue
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment