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-01-20 22:48:01 +00:00
:class="{ 'bg-dark text-white': nightMode, 'border': !nightMode && isBoard }"
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-20 22:44:04 +00:00
<board-switcher />
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';
2020-10-21 17:33:22 +00:00
import BoardSwitcher from '@/components/Board/BoardSwitcher';
2018-10-19 05:15:28 +00:00
export default {
components: {
2020-10-21 17:33:22 +00:00
BoardSwitcher,
},
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>