studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

panel/btn mobile & scripts
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 19:40:55 +01:00
parent bd97c1c33e
commit f28680f77e
26 changed files with 506 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

63
assets/js/panel.js
View file

@ -1,19 +1,60 @@
export function panelToggle() {
export function panelToggle(responsiveSmall) {
const toggleBtn = document.querySelector('#toggle-panel');
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
function openPanel() {
main.classList.add('panel-open');
const screenWidth = window.innerWidth;
if (screenWidth <= responsiveSmall) {
console.log("small screen");
document.body.style.overflowY = 'hidden';
}
}
function closePanel() {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
if (toggleBtn) {
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
toggleBtn.addEventListener('click', () => {
main.classList.add('panel-open');
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', () => {
if (toggleBtnMobile) {
toggleBtnMobile.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closePanel);
}
}
export function tocMobile(responsiveSmall) {
const toc = document.querySelector('#toc');
const main = document.querySelector('main');
if (!toc) return;
const tocLinks = toc.querySelectorAll('a');
tocLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= responsiveSmall) {
main.classList.remove('panel-open');
main.classList.add('panel-close');
});
}
}
document.body.style.overflowY = '';
}
});
});
}