gamebrary/src/components/PageHeader.vue

149 lines
3.4 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
2020-10-14 00:37:42 +00:00
<nav
class="position-fixed d-flex flex-column p-0 vh-100 text-center"
:class="{ 'bg-dark text-white': nightMode }"
>
2020-09-28 23:26:19 +00:00
<router-link :to="{ name: 'dashboard' }" class="mt-2 mb-3">
2020-10-14 00:37:42 +00:00
<img
:src="`/static/gamebrary-logo${nightMode ? '' : '-dark'}.png`"
width="32"
/>
2020-09-26 00:09:20 +00:00
</router-link>
2020-09-30 23:57:05 +00:00
<template v-if="hasMultipleBoards">
2020-09-30 02:36:27 +00:00
<b-dropdown
dropright
right
no-caret
boundary="viewport"
2020-10-08 18:11:28 +00:00
v-b-tooltip.hover.right
:title="$t('navMenu.changeBoard')"
2020-10-08 17:55:26 +00:00
variant="transparent"
2020-09-30 02:36:27 +00:00
>
<template v-slot:button-content>
2020-10-08 17:55:26 +00:00
<icon name="arrow-switch" />
2020-09-30 02:36:27 +00:00
</template>
<b-dropdown-item
:to="`/board/${id}`"
:key="id"
v-for="{ name, id } in sortedBoards"
:active="board.id === id"
>
2020-09-30 02:36:27 +00:00
{{ name }}
</b-dropdown-item>
</b-dropdown>
</template>
2020-09-26 00:41:18 +00:00
<div class="mt-auto">
2020-10-08 18:11:28 +00:00
<b-button
variant="link"
:title="$t('navMenu.tags')"
:to="{ name: 'tags' }"
v-b-tooltip.hover.right
>
2020-10-08 18:11:28 +00:00
<icon name="tag" />
</b-button>
<b-button
variant="link"
:title="$t('navMenu.wallpapers')"
:to="{ name: 'wallpapers' }"
v-b-tooltip.hover.right
>
<icon name="image" />
</b-button>
<b-button
variant="link"
:title="$t('navMenu.language')"
:to="{ name: 'language' }"
v-b-tooltip.hover.right
>
<icon name="globe" />
</b-button>
<b-button
variant="link"
:title="$t('navMenu.releases')"
:to="{ name: 'releases' }"
v-b-tooltip.hover.right
>
<icon name="megaphone" />
</b-button>
<b-button
variant="link"
:title="$t('navMenu.about')"
:to="{ name: 'about' }"
v-b-tooltip.hover.right
>
<icon name="info" />
</b-button>
2020-09-30 02:36:27 +00:00
2020-10-14 00:37:42 +00:00
<!-- <b-button
variant="link"
:title="$t('navMenu.about')"
v-b-tooltip.hover.right
@click="toggleTheme"
>
<icon :name="nightMode ? 'moon' : 'sun'" />
</b-button> -->
2020-10-05 18:42:04 +00:00
<router-link
:title="$t('settings.account')"
class="mb-2 mt-3 d-block"
:to="{ name: 'account' }"
>
<b-avatar
v-if="user && user.photoURL"
variant="info"
small
2020-10-08 18:11:28 +00:00
:title="$t('navMenu.account')"
v-b-tooltip.hover.right
:badge="notification"
badge-variant="danger"
:src="user.photoURL"
/>
</router-link>
</div>
2020-09-26 00:09:20 +00:00
</nav>
2018-10-19 05:15:28 +00:00
</template>
<script>
2020-09-01 17:47:56 +00:00
import { mapState, mapGetters } from 'vuex';
2018-10-19 05:15:28 +00:00
export default {
2019-11-08 19:56:03 +00:00
computed: {
2020-09-26 00:09:20 +00:00
...mapState(['board', 'user', 'notification', 'settings']),
2020-10-14 00:37:42 +00:00
...mapGetters(['sortedBoards', 'nightMode']),
2020-08-25 04:23:34 +00:00
2020-09-26 00:09:20 +00:00
routeName() {
return this.$route.name;
},
2020-09-30 23:57:05 +00:00
hasMultipleBoards() {
return this.$route.name === 'board' && this.board.name && this.sortedBoards.length > 1;
2020-09-06 14:53:04 +00:00
},
2019-11-08 19:56:03 +00:00
},
2020-10-14 00:37:42 +00:00
methods: {
toggleTheme() {
this.$store.commit('UPDATE_SETTING', { key: 'nightMode', value: !this.nightMode });
this.$store.dispatch('SAVE_SETTINGS', this.settings)
.catch(() => {
this.$bvToast.toast('There was an error saving your settings', { title: 'Error', variant: 'danger' });
});
},
},
2018-10-19 05:15:28 +00:00
};
</script>
2020-09-26 00:09:20 +00:00
<style lang="scss" rel="stylesheet/scss" scoped>
nav {
width: 50px;
2020-09-30 02:36:27 +00:00
z-index: 1;
2020-09-26 00:09:20 +00:00
}
</style>