gamebrary/src/components/Dock.vue

105 lines
2.5 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'" />
2021-02-01 19:38:17 +00:00
<b-dropdown
id="dropdown-1"
text="Dropdown Button"
dropright
right
no-caret
boundary="viewport"
:variant="nightMode ? 'dark' : 'transparent'"
:menu-class="nightMode ? 'bg-dark' : ''"
>
<template v-slot:button-content>
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
</template>
<b-dropdown-item :to="{ name: 'boards' }">
<i class="fas fa-columns fa-fw" aria-hidden />
Boards
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'tags' }">
<i class="fas fa-tags fa-fw" aria-hidden />
Tags
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'notes' }">
<i class="fas fa-sticky-note fa-fw" aria-hidden />
Notes
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'wallpapers' }">
<i class="fas fa-images fa-fw" aria-hidden />
Wallpapers
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'account' }">
<i class="fas fa-user fa-fw" aria-hidden />
Account
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'settings' }">
<i class="fas fa-cog fa-fw" aria-hidden />
Settings
</b-dropdown-item>
<b-dd-divider />
<b-dropdown-item v-b-modal:create-board>
<i class="fas fa-cog fa-fw" aria-hidden />
Create board
</b-dropdown-item>
</b-dropdown>
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>