96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
/**
|
|
* Sidebar Controller
|
|
*
|
|
* Handles sidebar collapse/expand and tooltip functionality
|
|
*/
|
|
|
|
export class SidebarController {
|
|
private menuToggle: HTMLElement | null = null;
|
|
private appLayout: HTMLElement | null = null;
|
|
private menuTooltip: HTMLElement | null = null;
|
|
|
|
constructor() {
|
|
this.menuToggle = document.getElementById('menuToggle');
|
|
this.appLayout = document.querySelector('swp-app-layout');
|
|
this.menuTooltip = document.getElementById('menuTooltip');
|
|
|
|
this.setupListeners();
|
|
this.setupTooltips();
|
|
this.restoreState();
|
|
}
|
|
|
|
/**
|
|
* Check if sidebar is collapsed
|
|
*/
|
|
get isCollapsed(): boolean {
|
|
return this.appLayout?.classList.contains('menu-collapsed') ?? false;
|
|
}
|
|
|
|
/**
|
|
* Toggle sidebar collapsed state
|
|
*/
|
|
toggle(): void {
|
|
if (!this.appLayout) return;
|
|
|
|
this.appLayout.classList.toggle('menu-collapsed');
|
|
localStorage.setItem('sidebar-collapsed', String(this.isCollapsed));
|
|
}
|
|
|
|
/**
|
|
* Collapse the sidebar
|
|
*/
|
|
collapse(): void {
|
|
this.appLayout?.classList.add('menu-collapsed');
|
|
localStorage.setItem('sidebar-collapsed', 'true');
|
|
}
|
|
|
|
/**
|
|
* Expand the sidebar
|
|
*/
|
|
expand(): void {
|
|
this.appLayout?.classList.remove('menu-collapsed');
|
|
localStorage.setItem('sidebar-collapsed', 'false');
|
|
}
|
|
|
|
private setupListeners(): void {
|
|
this.menuToggle?.addEventListener('click', () => this.toggle());
|
|
}
|
|
|
|
private setupTooltips(): void {
|
|
if (!this.menuTooltip) return;
|
|
|
|
const menuItems = document.querySelectorAll<HTMLElement>('swp-side-menu-item[data-tooltip]');
|
|
|
|
menuItems.forEach(item => {
|
|
item.addEventListener('mouseenter', () => this.showTooltip(item));
|
|
item.addEventListener('mouseleave', () => this.hideTooltip());
|
|
});
|
|
}
|
|
|
|
private showTooltip(item: HTMLElement): void {
|
|
if (!this.isCollapsed || !this.menuTooltip) return;
|
|
|
|
const rect = item.getBoundingClientRect();
|
|
const tooltipText = item.dataset.tooltip;
|
|
|
|
if (!tooltipText) return;
|
|
|
|
this.menuTooltip.textContent = tooltipText;
|
|
this.menuTooltip.style.left = `${rect.right + 8}px`;
|
|
this.menuTooltip.style.top = `${rect.top + rect.height / 2}px`;
|
|
this.menuTooltip.style.transform = 'translateY(-50%)';
|
|
this.menuTooltip.showPopover();
|
|
}
|
|
|
|
private hideTooltip(): void {
|
|
this.menuTooltip?.hidePopover();
|
|
}
|
|
|
|
private restoreState(): void {
|
|
if (!this.appLayout) return;
|
|
|
|
if (localStorage.getItem('sidebar-collapsed') === 'true') {
|
|
this.appLayout.classList.add('menu-collapsed');
|
|
}
|
|
}
|
|
}
|