fix: make sidebar state persistant

This commit is contained in:
kusowl 2026-01-20 19:09:29 +05:30
parent 985dd967e4
commit 4741c894e6
2 changed files with 43 additions and 24 deletions

View File

@ -1,12 +1,21 @@
import './bootstrap'; import './bootstrap';
import { setSidebarState } from '@/sidebar.js';
window.addEventListener('load', () => { window.addEventListener('load', () => {
const preloader = document.getElementById('preloader'); const preloader = document.getElementById('preloader');
const content = document.getElementById('content'); const content = document.getElementById('content');
preloader.style.opacity = '0'; preloader.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
preloader.style.display = 'none'; preloader.style.display = 'none';
}, 350) }, 350);
content.style.display = 'block'; content.style.display = 'block';
document.body.classList.remove('preload') document.body.classList.remove('preload');
})
const savedState = localStorage.getItem('sidebar');
if (savedState) {
setSidebarState(savedState);
}
});

View File

@ -1,23 +1,33 @@
const sidebarWrapper = document.getElementById('sidebarWrapper'); const elements = {
const closeBtn = document.getElementById('closeSidebarBtn'); closeBtn: document.getElementById('closeSidebarBtn'),
const openBtn = document.getElementById('openSidebarBtn'); openBtn: document.getElementById('openSidebarBtn'),
const sidebarTexts = document.querySelectorAll('.sidebar-text'); wrapper: document.getElementById('sidebarWrapper'),
closeBtn.addEventListener('click', () => { texts: document.querySelectorAll('.sidebar-text')
sidebarWrapper.classList.remove('w-64'); };
sidebarWrapper.classList.add('w-20');
closeBtn.classList.add('hidden'); const SIDEBAR_STATE_KEY = 'sidebar';
openBtn.classList.remove('hidden');
sidebarTexts.forEach(el => el.classList.add('opacity-0')); const saveState = (state) => {
}); try {
localStorage.setItem(SIDEBAR_STATE_KEY, state);
} catch (e) {
console.error(e);
}
};
openBtn.addEventListener('click', () => { export const setSidebarState = (state) => {
sidebarWrapper.classList.remove('w-20'); const isClosed = state === 'closed';
sidebarWrapper.classList.add('w-64');
openBtn.classList.add('hidden'); elements.wrapper.classList.toggle('w-64', !isClosed);
closeBtn.classList.remove('hidden'); elements.wrapper.classList.toggle('w-20', isClosed);
sidebarTexts.forEach(el => el.classList.remove('opacity-0')); elements.closeBtn.classList.toggle('hidden', isClosed);
}); elements.openBtn.classList.toggle('hidden', !isClosed);
elements.texts.forEach(el => el.classList.toggle('opacity-0', isClosed));
saveState(state);
};
elements.closeBtn.addEventListener('click', () => setSidebarState('closed'));
elements.openBtn.addEventListener('click', () => setSidebarState('opened'));