// TODO srcset / svg images
#app-menu.ui.top.fixed.menu
.header.item
img(src="~assets/header/png/logo@3x.png")
router-link.item(:to="{name: 'tasks'}", exact)
span(v-once) {{ $t('tasks') }}
// .simple makes it possible to have a dropdown without JS
.ui.simple.dropdown
router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
span(v-once) {{ $t('inventory') }}
.menu
router-link.item(:to="{name: 'inventory'}")
span(v-once) {{ $t('inventory') }}
router-link.item(:to="{name: 'equipment'}")
span(v-once) {{ $t('equipment') }}
router-link.item(:to="{name: 'stable'}")
span(v-once) {{ $t('stable') }}
router-link.item(:to="{name: 'market'}")
span(v-once) {{ $t('market') }}
.ui.simple.dropdown
router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
span(v-once) {{ $t('social') }}
.menu
router-link.item(:to="{name: 'tavern'}")
span(v-once) {{ $t('tavern') }}
router-link.item(:to="{name: 'inbox'}")
span(v-once) {{ $t('inbox') }}
router-link.item(:to="{name: 'challenges'}")
span(v-once) {{ $t('challenges') }}
router-link.item(:to="{name: 'party'}")
span(v-once) {{ $t('party') }}
router-link.item(:to="{name: 'guilds'}")
span(v-once) {{ $t('guilds') }}
.ui.simple.dropdown
router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}")
span(v-once) {{ $t('help') }}
.menu
router-link.item(to="/help/faq")
span(v-once) {{ $t('faq') }}
router-link.item(to="/help/report-bug")
span(v-once) {{ $t('reportBug') }}
router-link.item(to="/help/request-feature")
span(v-once) {{ $t('requestAF') }}
.right.menu
.item.with-img
img(src="~assets/header/png/gem@3x.png")
span {{userGems}}
.item.with-img.gp-icon
img(src="~assets/header/png/gold@3x.png")
span {{user.stats.gp | floor}}
a.item.with-img.notifications-dropdown
img(src="~assets/header/png/notifications@3x.png")
.ui.simple.dropdown.pointing
router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}")
// TODO icons should be white when active
img(src="~assets/header/png/user@3x.png")
.menu
.item.user-edit-avatar
strong {{user.profile.name}}
a(v-once) {{ $t('editAvatar') }}
.divider
router-link.item(:to="{name: 'stats'}")
span(v-once) {{ $t('stats') }}
router-link.item(:to="{name: 'achievements'}")
span(v-once) {{ $t('achievements') }}
.divider
router-link.item(:to="{name: 'settings'}")
span(v-once) {{ $t('settings') }}
.divider
router-link.item(to="/logout")
span(v-once) {{ $t('logout') }}