57 lines
2.5 KiB
JavaScript
Executable File
57 lines
2.5 KiB
JavaScript
Executable File
const STORAGE_KEY = 'helpdesk.sidebar.width';
|
|
const MIN_WIDTH = 220;
|
|
const MAX_WIDTH = 420;
|
|
|
|
function initialiseShell() {
|
|
const shell = document.querySelector('[data-hd-shell]');
|
|
const sidebar = document.querySelector('[data-hd-sidebar]');
|
|
const resizer = document.querySelector('[data-hd-sidebar-resizer]');
|
|
if (!shell || !sidebar) return;
|
|
|
|
const stored = Number(localStorage.getItem(STORAGE_KEY));
|
|
if (Number.isFinite(stored) && stored >= MIN_WIDTH && stored <= MAX_WIDTH) {
|
|
document.documentElement.style.setProperty('--hd-sidebar-width', `${stored}px`);
|
|
}
|
|
|
|
document.querySelectorAll('[data-hd-sidebar-toggle]').forEach((button) => {
|
|
if (button.dataset.hdBound === '1') return;
|
|
button.dataset.hdBound = '1';
|
|
button.addEventListener('click', () => document.body.classList.toggle('hd-sidebar-open'));
|
|
});
|
|
|
|
sidebar.querySelectorAll('a').forEach((link) => {
|
|
link.addEventListener('click', () => document.body.classList.remove('hd-sidebar-open'));
|
|
});
|
|
|
|
if (!resizer || resizer.dataset.hdBound === '1') return;
|
|
resizer.dataset.hdBound = '1';
|
|
|
|
resizer.addEventListener('pointerdown', (event) => {
|
|
if (window.matchMedia('(max-width: 1023px)').matches) return;
|
|
event.preventDefault();
|
|
resizer.setPointerCapture(event.pointerId);
|
|
document.body.classList.add('hd-sidebar-resizing');
|
|
|
|
const move = (moveEvent) => {
|
|
const width = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, moveEvent.clientX));
|
|
document.documentElement.style.setProperty('--hd-sidebar-width', `${width}px`);
|
|
};
|
|
const finish = (upEvent) => {
|
|
const value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--hd-sidebar-width'), 10);
|
|
if (Number.isFinite(value)) localStorage.setItem(STORAGE_KEY, String(value));
|
|
document.body.classList.remove('hd-sidebar-resizing');
|
|
resizer.releasePointerCapture?.(upEvent.pointerId);
|
|
resizer.removeEventListener('pointermove', move);
|
|
resizer.removeEventListener('pointerup', finish);
|
|
resizer.removeEventListener('pointercancel', finish);
|
|
};
|
|
resizer.addEventListener('pointermove', move);
|
|
resizer.addEventListener('pointerup', finish);
|
|
resizer.addEventListener('pointercancel', finish);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initialiseShell);
|
|
document.addEventListener('livewire:navigated', initialiseShell);
|
|
initialiseShell();
|