mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-10 07:37:30 +00:00
101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<template>
|
|
<div :class="{ 'layout-collapsed': isCollapsed }" class="layout">
|
|
<div class="layout-col-1 menu">
|
|
<ul class="menu-items">
|
|
<li class="menu-item">
|
|
<nuxt-link :to="{ name: 'app' }" class="menu-link">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
<span class="menu-link-text">Dashboard</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a
|
|
ref="groupSelectToggle"
|
|
class="menu-link"
|
|
@click="$refs.groupSelect.toggle($refs.groupSelectToggle)"
|
|
>
|
|
<i class="fas fa-layer-group"></i>
|
|
<span class="menu-link-text">Groups</span>
|
|
</a>
|
|
<GroupsContext ref="groupSelect"></GroupsContext>
|
|
</li>
|
|
</ul>
|
|
<ul class="menu-items">
|
|
<li class="menu-item layout-uncollapse">
|
|
<a class="menu-link" @click="toggleCollapsed()">
|
|
<i class="menu-item-icon fas fa-angle-double-right"></i>
|
|
<span class="menu-link-text">Uncollapse</span>
|
|
</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a
|
|
class="menu-link menu-user-item"
|
|
@click="$refs.userContext.toggle($event.target)"
|
|
>
|
|
{{ nameAbbreviation }}
|
|
<span class="menu-link-text">{{ name }}</span>
|
|
</a>
|
|
<Context ref="userContext">
|
|
<div class="context-menu-title">{{ name }}</div>
|
|
<ul class="context-menu">
|
|
<li>
|
|
<a @click="logoff()">
|
|
<i class="context-menu-icon fas fa-fw fa-sign-out-alt"></i>
|
|
Logoff
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</Context>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="layout-col-2 sidebar">
|
|
<div class="sidebar-content-wrapper">
|
|
<nav class="sidebar-content">
|
|
<div class="sidebar-title">
|
|
<img src="@/static/img/logo.svg" alt="" />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="sidebar-footer">
|
|
<a class="sidebar-collapse" @click="toggleCollapsed()">
|
|
<i class="fas fa-angle-double-left"></i>
|
|
Collapse sidebar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="layout-col-3">
|
|
<nuxt />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
|
|
import GroupsContext from '@/components/group/GroupsContext'
|
|
|
|
export default {
|
|
layout: 'default',
|
|
middleware: 'authenticated',
|
|
components: {
|
|
GroupsContext
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
isCollapsed: 'sidebar/isCollapsed',
|
|
name: 'auth/getName',
|
|
nameAbbreviation: 'auth/getNameAbbreviation'
|
|
})
|
|
},
|
|
methods: {
|
|
logoff() {
|
|
this.$store.dispatch('auth/logoff')
|
|
this.$nuxt.$router.replace({ name: 'login' })
|
|
},
|
|
...mapActions({
|
|
toggleCollapsed: 'sidebar/toggleCollapsed'
|
|
})
|
|
}
|
|
}
|
|
</script>
|