98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<aside class="neko-menu">
|
||
|
|
<div class="tabs-container">
|
||
|
|
<ul>
|
||
|
|
<li :class="{ active: tab === 'chat' }" @click.stop.prevent="change('chat')">
|
||
|
|
<i class="fas fa-comment-alt" />
|
||
|
|
<span>Chat</span>
|
||
|
|
</li>
|
||
|
|
<li :class="{ active: tab === 'settings' }" @click.stop.prevent="change('settings')">
|
||
|
|
<i class="fas fa-sliders-h" />
|
||
|
|
<span>Settings</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="page-container">
|
||
|
|
<neko-chat v-if="tab === 'chat'" />
|
||
|
|
<neko-settings v-if="tab === 'settings'" />
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.neko-menu {
|
||
|
|
width: $side-width;
|
||
|
|
background-color: $background-primary;
|
||
|
|
flex-shrink: 0;
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.tabs-container {
|
||
|
|
background: $background-tertiary;
|
||
|
|
height: $menu-height;
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 16px 0 0 0;
|
||
|
|
|
||
|
|
li {
|
||
|
|
background: $background-secondary;
|
||
|
|
border-radius: 3px 3px 0 0;
|
||
|
|
border-bottom: none;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 5px 10px;
|
||
|
|
margin-right: 4px;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
i {
|
||
|
|
margin-right: 4px;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
background: $background-primary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-container {
|
||
|
|
max-height: 100%;
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Vue, Component } from 'vue-property-decorator'
|
||
|
|
|
||
|
|
import Settings from '~/components/settings.vue'
|
||
|
|
import Chat from '~/components/chat.vue'
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
name: 'neko',
|
||
|
|
components: {
|
||
|
|
'neko-settings': Settings,
|
||
|
|
'neko-chat': Chat,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class extends Vue {
|
||
|
|
get tab() {
|
||
|
|
return this.$accessor.client.tab
|
||
|
|
}
|
||
|
|
|
||
|
|
change(tab: string) {
|
||
|
|
this.$accessor.client.setTab(tab)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|