gamebrary/src/components/Dock.vue

53 lines
1.1 KiB
Vue
Raw Normal View History

2020-11-21 06:32:26 +00:00
<!-- TODO: only make transparent when x-scrolled -->
2018-10-19 05:15:28 +00:00
<template lang="html">
2020-10-14 00:37:42 +00:00
<nav
2020-11-18 06:06:18 +00:00
class="rounded position-fixed d-flex flex-column p-0 m-2 text-center"
2021-02-01 19:37:40 +00:00
:class="{ 'bg-dark text-white': nightMode, 'border': !nightMode }"
2020-10-14 00:37:42 +00:00
>
2020-11-23 23:36:03 +00:00
<router-link
:to="{ name: 'dashboard' }"
2021-01-20 22:44:04 +00:00
title="Dashboard"
2020-11-23 23:36:03 +00:00
class="my-2"
>
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>
2021-01-25 21:05:35 +00:00
<pinned-boards v-if="$route.name === 'board'" />
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';
2021-01-25 21:05:35 +00:00
import PinnedBoards from '@/components/Board/PinnedBoards';
2018-10-19 05:15:28 +00:00
export default {
components: {
2021-01-25 21:05:35 +00:00
PinnedBoards,
},
2019-11-08 19:56:03 +00:00
computed: {
2020-11-23 23:15:56 +00:00
...mapState(['board', 'notification', 'settings']),
2020-10-21 17:33:22 +00:00
...mapGetters(['nightMode']),
2021-01-20 22:48:01 +00:00
isBoard() {
return ['public-board', 'board'].includes(this.$route.name);
},
2019-11-08 19:56:03 +00:00
},
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-11-18 05:55:35 +00:00
background: rgba(255, 255, 255, 0.9);
&:hover {
background: white;
}
2020-09-26 00:09:20 +00:00
}
</style>