// TODO srcset / svg images
#app-menu.ui.top.fixed.menu
.header.item
img(src="~assets/header/png/logo@3x.png")
router-link.item(to="/", exact) {{ $t('tasks') }}
// .simple makes it possible to have a dropdown without JS
.ui.simple.dropdown
router-link.item(to="/inventory", :class="{'active': $route.path.startsWith('/inventory')}") {{ $t('inventory') }}
.menu
router-link.item(to="/inventory") {{ $t('inventory') }}
router-link.item(to="/inventory/stable") {{ $t('stable') }}
router-link.item(to="/inventory/equipment") {{ $t('equipment') }}
router-link.item(to="/market") {{ $t('market') }}
.ui.simple.dropdown
router-link.item(to="/social/tavern", :class="{'active': $route.path.startsWith('/social')}") {{ $t('social') }}
.menu
router-link.item(to="/social/tavern") {{ $t('tavern') }}
router-link.item(to="/social/inbox") {{ $t('inbox') }}
router-link.item(to="/social/challenges") {{ $t('challenges') }}
router-link.item(to="/social/party") {{ $t('party') }}
router-link.item(to="/social/guilds") {{ $t('guilds') }}
.ui.simple.dropdown
router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}") {{ $t('help') }}
.menu
router-link.item(to="/help/faq") {{ $t('faq') }}
router-link.item(to="/help/report-bug") {{ $t('reportBug') }}
router-link.item(to="/help/request-feature") {{ $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="/user/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 Edit avatar
.divider
router-link.item(to="/user/stats") Stats
router-link.item(to="/user/achievements") Achievements
.divider
router-link.item(to="/user/settings") Settings
.divider
router-link.item(to="/logout") Logout