377 lines
13 KiB
JavaScript
377 lines
13 KiB
JavaScript
// // resources/js/components/sidebar.js
|
|
//
|
|
// var pathName = window.location.href;
|
|
// pathName = pathName.replace(/\/+$/, ''); // Remove last slash from string
|
|
//
|
|
// var url = window.location.href;
|
|
// var a = url.indexOf('?');
|
|
// var b = url.substring(a);
|
|
// var c = url.replace(b, '');
|
|
// url = c;
|
|
//
|
|
// $(document).ready(function () {
|
|
// const sidebar = $('#main'); // Hier solltest du die Sidebar per ID oder Klasse auswählen
|
|
// // Zustandsvariablen für die jeweiligen Modi:
|
|
// let desktopCollapsed = false; // false = Sidebar ist ausgeklappt, true = eingeklappt
|
|
// let tabletExpanded = false; // false = Sidebar ist standardmäßig geschlossen, true = geöffnet
|
|
// let mobileExpanded = false; // false = Sidebar ist ausgeblendet, true = vollständig ausgefahren
|
|
//
|
|
//
|
|
// // Funktion, die anhand der Fensterbreite den aktuellen Modus zurückgibt
|
|
// function getMode() {
|
|
// const w = $(window).width();
|
|
// if (w < 640) {
|
|
// return 'mobile';
|
|
// } else if (w < 1024) {
|
|
// return 'tablet';
|
|
// } else {
|
|
// return 'desktop';
|
|
// }
|
|
// }
|
|
//
|
|
// function closeAllMenus() {
|
|
// document.querySelectorAll('#sidebar [x-data]').forEach(el => {
|
|
// if (el.__x) {
|
|
// el.__x.$data.open = false;
|
|
// }
|
|
// });
|
|
// }
|
|
//
|
|
// function applyMode() {
|
|
// sidebar.removeClass('u-collapsed ut-expanded m-expanded expanded');
|
|
// const mode = getMode();
|
|
// if (mode === 'desktop') {
|
|
// if (desktopCollapsed) {
|
|
// sidebar.addClass('u-collapsed');
|
|
// closeAllMenus(); // <<< HIER
|
|
// } else {
|
|
// sidebar.addClass('expanded');
|
|
// }
|
|
// } else if (mode === 'tablet') {
|
|
// if (tabletExpanded) {
|
|
// sidebar.addClass('ut-expanded expanded');
|
|
// } else {
|
|
// closeAllMenus(); // <<< HIER
|
|
// }
|
|
// } else if (mode === 'mobile') {
|
|
// if (mobileExpanded) {
|
|
// sidebar.addClass('m-expanded expanded');
|
|
// } else {
|
|
// closeAllMenus(); // <<< HIER
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
// // Funktion, die alle toggle-Klassen entfernt und anhand des aktuellen Modus den Zustand anwendet
|
|
// // function applyMode() {
|
|
// // // Entferne alle Klassen, die du zur Steuerung verwendest
|
|
// // sidebar.removeClass('u-collapsed ut-expanded m-expanded expanded');
|
|
// // const mode = getMode();
|
|
// // if (mode === 'desktop') {
|
|
// // if (desktopCollapsed) {
|
|
// // sidebar.addClass('u-collapsed');
|
|
// // } else {
|
|
// // sidebar.addClass('expanded');
|
|
// // }
|
|
// // } else if (mode === 'tablet') {
|
|
// // if (tabletExpanded) {
|
|
// // sidebar.addClass('ut-expanded expanded');
|
|
// // }
|
|
// // } else if (mode === 'mobile') {
|
|
// // if (mobileExpanded) {
|
|
// // sidebar.addClass('m-expanded expanded');
|
|
// // }
|
|
// // }
|
|
// // }
|
|
//
|
|
// // Beim Klick auf den Toggle-Button wird je nach aktuellem Modus der entsprechende Zustand umgeschaltet
|
|
// $('.sidebar-toggle').on('click', function () {
|
|
// const mode = getMode();
|
|
// if (mode === 'desktop') {
|
|
// desktopCollapsed = !desktopCollapsed;
|
|
// } else if (mode === 'tablet') {
|
|
// tabletExpanded = !tabletExpanded;
|
|
// } else if (mode === 'mobile') {
|
|
// mobileExpanded = !mobileExpanded;
|
|
// }
|
|
// applyMode();
|
|
// });
|
|
//
|
|
// applyMode();
|
|
//
|
|
// $(window).resize(function () {
|
|
// applyMode();
|
|
// desktopCollapsed = false
|
|
// tabletExpanded = false
|
|
// mobileExpanded = false
|
|
// })
|
|
// });
|
|
|
|
|
|
// document.addEventListener('DOMContentLoaded', () => {
|
|
// const sidebar = document.getElementById('sidebar');
|
|
// const shell = document.getElementById('main');
|
|
// if (!sidebar || !shell) return;
|
|
//
|
|
// const toggles = sidebar.querySelectorAll('.sidebar-toggle');
|
|
// const secBtns = sidebar.querySelectorAll('.js-sec-toggle');
|
|
//
|
|
// // state
|
|
// let desktopCollapsed = false; // >=1024
|
|
// let tabletExpanded = false; // 640-1023
|
|
// let mobileExpanded = false; // <640 offcanvas
|
|
//
|
|
// const getMode = () => {
|
|
// const w = window.innerWidth;
|
|
// if (w < 640) return 'mobile';
|
|
// if (w < 1024) return 'tablet';
|
|
// return 'desktop';
|
|
// };
|
|
//
|
|
// const closeAllMenus = () => {
|
|
// sidebar.querySelectorAll('[x-data]').forEach(el => {
|
|
// if (el.__x) el.__x.$data.open = false;
|
|
// });
|
|
// };
|
|
//
|
|
// const applyMobileTranslate = () => {
|
|
// if (getMode() === 'mobile') {
|
|
// if (mobileExpanded) {
|
|
// sidebar.classList.add('translate-x-0');
|
|
// sidebar.classList.remove('-translate-x-full');
|
|
// } else {
|
|
// sidebar.classList.add('-translate-x-full');
|
|
// sidebar.classList.remove('translate-x-0');
|
|
// }
|
|
// } else {
|
|
// sidebar.classList.remove('-translate-x-full');
|
|
// sidebar.classList.add('translate-x-0');
|
|
// }
|
|
// };
|
|
//
|
|
// const applyMode = () => {
|
|
// // clean classes
|
|
// sidebar.classList.remove('u-collapsed','ut-expanded','m-expanded','expanded');
|
|
// shell.classList.remove('rail','ut-expanded');
|
|
//
|
|
// applyMobileTranslate();
|
|
//
|
|
// const mode = getMode();
|
|
// if (mode === 'desktop') {
|
|
// if (desktopCollapsed) {
|
|
// sidebar.classList.add('u-collapsed'); // rail visuals
|
|
// shell.classList.add('rail'); // narrow padding
|
|
// closeAllMenus();
|
|
// } else {
|
|
// sidebar.classList.add('expanded');
|
|
// // shell default (16rem) via :root --sb-w
|
|
// }
|
|
// } else if (mode === 'tablet') {
|
|
// if (tabletExpanded) {
|
|
// sidebar.classList.add('ut-expanded','expanded');
|
|
// shell.classList.add('ut-expanded'); // 16rem padding
|
|
// } else {
|
|
// sidebar.classList.add('u-collapsed'); // rail visuals
|
|
// shell.classList.add('rail'); // 5.2rem padding
|
|
// closeAllMenus();
|
|
// }
|
|
// } else {
|
|
// // mobile
|
|
// if (mobileExpanded) {
|
|
// sidebar.classList.add('m-expanded','expanded');
|
|
// } else {
|
|
// closeAllMenus();
|
|
// }
|
|
// // shell has no padding on mobile (CSS)
|
|
// }
|
|
// };
|
|
//
|
|
// // Toggle buttons (footer + mobile top)
|
|
// toggles.forEach(btn => {
|
|
// btn.addEventListener('click', () => {
|
|
// const mode = getMode();
|
|
// if (mode === 'desktop') {
|
|
// desktopCollapsed = !desktopCollapsed;
|
|
// } else if (mode === 'tablet') {
|
|
// tabletExpanded = !tabletExpanded;
|
|
// } else {
|
|
// mobileExpanded = !mobileExpanded;
|
|
// }
|
|
// applyMode();
|
|
// });
|
|
// });
|
|
//
|
|
// // In RAIL: clicking a section expands sidebar first and opens submenu
|
|
// secBtns.forEach(btn => {
|
|
// btn.addEventListener('click', (e) => {
|
|
// const isRail = sidebar.classList.contains('u-collapsed');
|
|
// if (!isRail) return; // Alpine handles toggle (open=!open) already
|
|
//
|
|
// // prevent Alpine's inline handler from running
|
|
// e.preventDefault();
|
|
// e.stopPropagation();
|
|
//
|
|
// const mode = getMode();
|
|
// if (mode === 'desktop') {
|
|
// desktopCollapsed = false; // expand
|
|
// } else if (mode === 'tablet') {
|
|
// tabletExpanded = true; // expand
|
|
// } else {
|
|
// mobileExpanded = true; // show offcanvas
|
|
// }
|
|
// applyMode();
|
|
//
|
|
// // open the correct submenu after expansion
|
|
// const xroot = btn.closest('[x-data]');
|
|
// if (xroot && xroot.__x) {
|
|
// xroot.__x.$data.open = true;
|
|
// }
|
|
// });
|
|
// });
|
|
//
|
|
// // Resize: reset and re-apply
|
|
// window.addEventListener('resize', () => {
|
|
// desktopCollapsed = false;
|
|
// tabletExpanded = false;
|
|
// mobileExpanded = false;
|
|
// applyMode();
|
|
// });
|
|
//
|
|
// applyMode();
|
|
// });
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
requestAnimationFrame(() => {
|
|
document.documentElement.setAttribute('data-ui', 'ready');
|
|
});
|
|
|
|
// optional Anti-FOUC
|
|
document.body.classList.remove('no-animate');
|
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
const shell = document.getElementById('main');
|
|
if (!sidebar || !shell) return;
|
|
|
|
// WICHTIG: sowohl Footer-Toggle (in Sidebar) als auch Button im Header
|
|
const toggles = document.querySelectorAll('.sidebar-toggle');
|
|
const secBtns = sidebar.querySelectorAll('.js-sec-toggle');
|
|
|
|
// state
|
|
let desktopCollapsed = false; // >=1024
|
|
let tabletExpanded = false; // 640-1023
|
|
let mobileExpanded = false; // <640 offcanvas
|
|
|
|
const getMode = () => {
|
|
const w = window.innerWidth;
|
|
if (w < 640) return 'mobile';
|
|
if (w < 1024) return 'tablet';
|
|
return 'desktop';
|
|
};
|
|
|
|
const closeAllMenus = () => {
|
|
sidebar.querySelectorAll('[x-data]').forEach(el => {
|
|
if (el.__x) el.__x.$data.open = false;
|
|
});
|
|
};
|
|
|
|
const applyMobileTranslate = () => {
|
|
if (getMode() === 'mobile') {
|
|
if (mobileExpanded) {
|
|
sidebar.classList.add('translate-x-0');
|
|
sidebar.classList.remove('-translate-x-full');
|
|
} else {
|
|
// sidebar.classList.add('-translate-x-full');
|
|
sidebar.classList.remove('translate-x-0');
|
|
}
|
|
} else {
|
|
sidebar.classList.remove('-translate-x-full');
|
|
sidebar.classList.add('translate-x-0');
|
|
}
|
|
};
|
|
|
|
const applyMode = () => {
|
|
// reset Klassen
|
|
sidebar.classList.remove('u-collapsed','ut-expanded','m-expanded','expanded');
|
|
shell.classList.remove('rail','ut-expanded');
|
|
|
|
applyMobileTranslate();
|
|
|
|
const mode = getMode();
|
|
if (mode === 'desktop') {
|
|
if (desktopCollapsed) {
|
|
sidebar.classList.add('u-collapsed');
|
|
shell.classList.add('rail'); // -> CSS setzt --sb-w: 5.2rem
|
|
closeAllMenus();
|
|
} else {
|
|
sidebar.classList.add('expanded');
|
|
// shell bleibt default --sb-w:16rem
|
|
}
|
|
} else if (mode === 'tablet') {
|
|
if (tabletExpanded) {
|
|
sidebar.classList.add('ut-expanded','expanded');
|
|
shell.classList.add('ut-expanded'); // -> --sb-w:16rem
|
|
} else {
|
|
sidebar.classList.add('u-collapsed');
|
|
shell.classList.add('rail'); // -> --sb-w:5.2rem
|
|
closeAllMenus();
|
|
}
|
|
} else { // mobile
|
|
if (mobileExpanded) {
|
|
sidebar.classList.add('m-expanded','expanded');
|
|
} else {
|
|
closeAllMenus();
|
|
}
|
|
// shell hat auf Mobile kein Padding (CSS)
|
|
}
|
|
};
|
|
|
|
// Toggle-Klick (Header + Sidebar)
|
|
toggles.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const mode = getMode();
|
|
if (mode === 'desktop') {
|
|
desktopCollapsed = !desktopCollapsed;
|
|
} else if (mode === 'tablet') {
|
|
tabletExpanded = !tabletExpanded;
|
|
} else {
|
|
mobileExpanded = !mobileExpanded;
|
|
}
|
|
applyMode();
|
|
});
|
|
});
|
|
|
|
// Wenn im Rail auf einen Abschnitt geklickt wird ⇒ erst expanden, dann Submenü öffnen
|
|
secBtns.forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const isRail = sidebar.classList.contains('u-collapsed');
|
|
if (!isRail) return; // Alpine macht open = !open
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const mode = getMode();
|
|
if (mode === 'desktop') {
|
|
desktopCollapsed = false;
|
|
} else if (mode === 'tablet') {
|
|
tabletExpanded = true;
|
|
} else {
|
|
mobileExpanded = true;
|
|
}
|
|
applyMode();
|
|
|
|
const xroot = btn.closest('[x-data]');
|
|
if (xroot && xroot.__x) xroot.__x.$data.open = true;
|
|
});
|
|
});
|
|
|
|
// Resize → Zustand zurücksetzen, sauber neu anwenden
|
|
window.addEventListener('resize', () => {
|
|
desktopCollapsed = false;
|
|
tabletExpanded = false;
|
|
mobileExpanded = false;
|
|
applyMode();
|
|
});
|
|
|
|
applyMode();
|
|
});
|