mrholek
56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<CSidebar
|
|
class="border-end"
|
|
colorScheme="dark"
|
|
position="fixed"
|
|
:unfoldable="sidebarUnfoldable"
|
|
:visible="sidebarVisible"
|
|
@visible-change="
|
|
(event) =>
|
|
$store.commit({
|
|
type: 'updateSidebarVisible',
|
|
value: event,
|
|
})
|
|
"
|
|
>
|
|
<CSidebarHeader class="border-bottom">
|
|
<RouterLink custom to="/" v-slot="{ href, navigate }">
|
|
<CSidebarBrand v-bind="$attrs" as="a" :href="href" @click="navigate">
|
|
<CIcon custom-class-name="sidebar-brand-full" :icon="logo" :height="32" />
|
|
<CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
|
|
</CSidebarBrand>
|
|
</RouterLink>
|
|
<CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
|
|
</CSidebarHeader>
|
|
<AppSidebarNav />
|
|
<CSidebarFooter class="border-top">
|
|
<CSidebarToggler class="d-none d-lg-flex" @click="$store.commit('toggleUnfoldable')" />
|
|
</CSidebarFooter>
|
|
</CSidebar>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
import { AppSidebarNav } from './AppSidebarNav'
|
|
import { logo } from '@/assets/brand/logo'
|
|
import { sygnet } from '@/assets/brand/sygnet'
|
|
export default {
|
|
name: 'AppSidebar',
|
|
components: {
|
|
AppSidebarNav,
|
|
RouterLink,
|
|
},
|
|
setup() {
|
|
const store = useStore()
|
|
return {
|
|
logo,
|
|
sygnet,
|
|
sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
|
|
sidebarVisible: computed(() => store.state.sidebarVisible),
|
|
}
|
|
},
|
|
}
|
|
</script>
|