1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<script>
import Cookies from 'js-cookie';
import { GlIcon } from '@gitlab/ui';
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import { parseBoolean } from '~/lib/utils/common_utils';
export default {
components: {
GlIcon,
},
data() {
const userExpanded = !parseBoolean(Cookies.get('collapsed_gutter'));
// We're deliberately keeping two different props for sidebar status;
// 1. userExpanded reflects value based on cookie `collapsed_gutter`.
// 2. isExpanded reflect actual sidebar state.
return {
userExpanded,
isExpanded: userExpanded ? bp.isDesktop() : userExpanded,
};
},
watch: {
isExpanded(expanded) {
this.$emit('sidebar-toggle', {
expanded,
});
},
},
mounted() {
window.addEventListener('resize', this.handleWindowResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
updatePageContainerClass() {
const layoutPageEl = document.querySelector('.layout-page');
if (layoutPageEl) {
layoutPageEl.classList.toggle('right-sidebar-expanded', this.isExpanded);
layoutPageEl.classList.toggle('right-sidebar-collapsed', !this.isExpanded);
}
},
handleWindowResize() {
if (this.userExpanded) {
this.isExpanded = bp.isDesktop();
this.updatePageContainerClass();
}
},
handleToggleSidebarClick() {
this.isExpanded = !this.isExpanded;
this.userExpanded = this.isExpanded;
Cookies.set('collapsed_gutter', !this.userExpanded);
this.updatePageContainerClass();
},
},
};
</script>
<template>
<aside
:class="{ 'right-sidebar-expanded': isExpanded, 'right-sidebar-collapsed': !isExpanded }"
class="right-sidebar"
aria-live="polite"
>
<button
class="toggle-right-sidebar-button js-toggle-right-sidebar-button w-100 gl-text-decoration-none! gl-display-flex gl-outline-0!"
:title="__('Toggle sidebar')"
@click="handleToggleSidebarClick"
>
<span v-if="isExpanded" class="collapse-text gl-flex-grow-1 gl-text-left">{{
__('Collapse sidebar')
}}</span>
<gl-icon v-show="isExpanded" data-testid="icon-collapse" name="chevron-double-lg-right" />
<gl-icon
v-show="!isExpanded"
data-testid="icon-expand"
name="chevron-double-lg-left"
class="gl-ml-2"
/>
</button>
<div data-testid="sidebar-items" class="issuable-sidebar">
<slot name="right-sidebar-items" v-bind="{ sidebarExpanded: isExpanded }"></slot>
</div>
</aside>
</template>
|
