Sharkey/src/client/app/desktop/views/components/ui.header.nav.vue

142 lines
2.7 KiB
Vue
Raw Normal View History

2018-02-12 14:10:16 +02:00
<template>
2018-02-20 15:53:34 +02:00
<div class="nav">
2018-02-12 14:10:16 +02:00
<ul>
2019-02-15 23:50:58 +02:00
<li class="home active" @click="goToTop">
<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
</li>
2019-02-14 23:31:03 +02:00
<li class="featured">
<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
</li>
2019-02-15 23:50:58 +02:00
<li class="explore">
<router-link to="/explore"><fa :icon="faHashtag"/><p>{{ $t('@.explore') }}</p></router-link>
</li>
2019-02-14 23:31:03 +02:00
<li class="game">
<a @click="game">
<fa icon="gamepad"/>
<p>{{ $t('game') }}</p>
<template v-if="hasGameInvitations"><fa icon="circle"/></template>
</a>
</li>
2018-02-12 14:10:16 +02:00
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-03-07 10:48:32 +02:00
import MkGameWindow from './game-window.vue';
2019-02-15 23:50:58 +02:00
import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
2018-02-12 14:10:16 +02:00
export default Vue.extend({
i18n: i18n('desktop/views/components/ui.header.nav.vue'),
2018-02-12 14:10:16 +02:00
data() {
return {
2018-03-07 10:48:32 +02:00
hasGameInvitations: false,
2019-02-14 23:31:03 +02:00
connection: null,
2019-02-15 23:50:58 +02:00
faNewspaper, faHashtag
2018-02-12 14:10:16 +02:00
};
},
mounted() {
2018-05-27 07:49:09 +03:00
if (this.$store.getters.isSignedIn) {
2018-11-09 01:13:34 +02:00
this.connection = this.$root.stream.useSharedConnection('main');
2018-02-12 14:10:16 +02:00
this.connection.on('reversiInvited', this.onReversiInvited);
2018-12-09 16:10:02 +02:00
this.connection.on('reversiNoInvites', this.onReversiNoInvites);
2018-02-12 14:10:16 +02:00
}
},
beforeDestroy() {
2018-05-27 07:49:09 +03:00
if (this.$store.getters.isSignedIn) {
this.connection.dispose();
2018-02-12 14:10:16 +02:00
}
},
methods: {
2018-06-17 02:10:54 +03:00
onReversiInvited() {
2018-03-11 11:08:26 +02:00
this.hasGameInvitations = true;
},
2018-06-17 02:10:54 +03:00
onReversiNoInvites() {
2018-03-11 11:08:26 +02:00
this.hasGameInvitations = false;
2018-02-12 14:10:16 +02:00
},
2018-03-07 10:48:32 +02:00
game() {
2018-11-09 01:13:34 +02:00
this.$root.new(MkGameWindow);
2018-07-23 08:35:00 +03:00
},
2018-07-25 22:29:09 +03:00
goToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
2018-02-12 14:10:16 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-27 09:19:11 +03:00
.nav
2018-02-12 14:10:16 +02:00
display inline-block
margin 0
padding 0
line-height 3rem
vertical-align top
> ul
display inline-block
margin 0
padding 0
vertical-align top
line-height 3rem
list-style none
> li
display inline-block
vertical-align top
height 48px
line-height 48px
&.active
> a
2018-09-26 14:19:35 +03:00
border-bottom solid 3px var(--primary)
2018-02-12 14:10:16 +02:00
> a
display inline-block
z-index 1
height 100%
2019-02-15 08:00:20 +02:00
padding 0 20px
2018-02-12 14:10:16 +02:00
font-size 13px
font-variant small-caps
2018-09-27 09:19:11 +03:00
color var(--desktopHeaderFg)
2018-02-12 14:10:16 +02:00
text-decoration none
transition none
cursor pointer
*
pointer-events none
&:hover
2018-09-27 09:19:11 +03:00
color var(--desktopHeaderHoverFg)
2018-02-12 14:10:16 +02:00
text-decoration none
> [data-icon]:first-child
2018-02-12 14:10:16 +02:00
margin-right 8px
> [data-icon]:last-child
2018-02-12 14:10:16 +02:00
margin-left 5px
font-size 10px
2018-12-30 18:15:32 +02:00
color var(--notificationIndicator)
2018-02-12 14:10:16 +02:00
@media (max-width 1100px)
margin-left -5px
> p
display inline
margin 0
@media (max-width 1100px)
display none
@media (max-width 700px)
padding 0 12px
</style>