-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathsidebar.ts
More file actions
143 lines (119 loc) · 5.28 KB
/
sidebar.ts
File metadata and controls
143 lines (119 loc) · 5.28 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
export class SidebarManager {
private leftSidebar: HTMLElement;
private rightSidebar: HTMLElement;
private triggerButtons: NodeListOf<HTMLElement>;
private content: HTMLElement;
private readonly SMALL_SCREEN_BREAKPOINT = 64 * 16; // 64rem = 1024px
private resizeTimeout: NodeJS.Timeout | null = null;
constructor() {
const left = document.querySelector('#leftSidebar');
const right = document.querySelector('#rightSidebar');
const buttons = document.querySelectorAll('[data-trigger]');
const cont = document.querySelector('[data-content]');
if (!left || !right || !buttons || !cont) {
throw new Error('Required sidebar elements not found in DOM');
}
this.leftSidebar = left as HTMLElement;
this.rightSidebar = right as HTMLElement;
this.triggerButtons = buttons as NodeListOf<HTMLElement>;
this.content = cont as HTMLElement;
}
private updateContentWidth(): void {
const isSmallScreen = window.innerWidth < this.SMALL_SCREEN_BREAKPOINT;
if (isSmallScreen) {
// On small screens, sidebars use fixed positioning with transforms
// Content takes full width
this.content.style.width = '100%';
} else {
// On large screens, use width-based calculation
const leftCollapsed = this.leftSidebar.classList.contains('collapsed');
const rightCollapsed = this.rightSidebar.classList.contains('collapsed');
let widthCalc = '100%';
let subtractRem = 33;
// Default: 15rem left + 15rem right + 3rem gap
if (leftCollapsed) subtractRem -= 16.5;
if (rightCollapsed) subtractRem -= 16.5;
if (subtractRem > 0) {
widthCalc = `calc(100% - ${subtractRem}rem)`;
}
this.content.style.width = widthCalc;
}
}
private updateButtonPosition(target: string): void {
const isSmallScreen = window.innerWidth < this.SMALL_SCREEN_BREAKPOINT;
const button = document.querySelector(`[data-trigger="${target}"]`) as HTMLElement;
if (!button) return;
if (target === 'leftSidebar') {
const isCollapsed = this.leftSidebar.classList.contains('collapsed');
button.classList.remove('left-10', 'left-16', 'left-[12.55rem]');
if (isSmallScreen) {
button.classList.add('left-10');
} else {
button.classList.add(isCollapsed ? 'left-16' : 'left-[12.55rem]');
}
} else if (target === 'rightSidebar') {
const isCollapsed = this.rightSidebar.classList.contains('collapsed');
button.classList.remove('right-6', 'right-9', 'right-16');
if (isSmallScreen) {
button.classList.add('right-16');
} else {
button.classList.add(isCollapsed ? 'right-16' : 'right-9');
}
}
}
private toggleSidebar(target: string): void {
const isSmallScreen = window.innerWidth < this.SMALL_SCREEN_BREAKPOINT;
const sidebar = target === 'leftSidebar' ? this.leftSidebar : this.rightSidebar;
const isCollapsed = sidebar.classList.contains('collapsed');
if (isCollapsed) {
sidebar.classList.remove('collapsed');
setTimeout(() => {
sidebar.classList.remove('overflow-hidden');
}, 300);
} else {
sidebar.classList.add('overflow-hidden', 'collapsed');
}
if (!isSmallScreen) {
this.updateButtonPosition(target);
this.updateContentWidth();
}
}
private handleSmallScreen(): void {
const isSmallScreen = window.innerWidth < this.SMALL_SCREEN_BREAKPOINT;
if (isSmallScreen) {
// On small screens, collapse both sidebars by default
this.leftSidebar.classList.add('collapsed', 'overflow-hidden');
this.rightSidebar.classList.add('collapsed', 'overflow-hidden');
} else {
// On large screens, expand both sidebars
this.leftSidebar.classList.remove('collapsed', 'overflow-hidden');
this.rightSidebar.classList.remove('collapsed', 'overflow-hidden');
}
// Update button positions for current screen size
this.updateButtonPosition('leftSidebar');
this.updateButtonPosition('rightSidebar');
this.updateContentWidth();
}
private attachEventListeners(): void {
this.triggerButtons.forEach(button => {
button.addEventListener('click', (e) => {
const target = button.getAttribute('data-trigger');
if (target) {
this.toggleSidebar(target);
}
});
});
window.addEventListener('resize', () => {
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
this.resizeTimeout = setTimeout(() => {
this.handleSmallScreen();
}, 250);
});
}
public init(): void {
this.handleSmallScreen();
this.attachEventListeners();
}
}