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 { setSidebarState } from '@/sidebar.js';
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
const content = document.getElementById('content');
preloader.style.opacity='0';
preloader.style.opacity = '0';
setTimeout(() => {
preloader.style.display='none';
}, 350)
preloader.style.display = 'none';
}, 350);
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 closeBtn = document.getElementById('closeSidebarBtn');
const openBtn = document.getElementById('openSidebarBtn');
const sidebarTexts = document.querySelectorAll('.sidebar-text');
closeBtn.addEventListener('click', () => {
sidebarWrapper.classList.remove('w-64');
sidebarWrapper.classList.add('w-20');
const elements = {
closeBtn: document.getElementById('closeSidebarBtn'),
openBtn: document.getElementById('openSidebarBtn'),
wrapper: document.getElementById('sidebarWrapper'),
texts: document.querySelectorAll('.sidebar-text')
};
closeBtn.classList.add('hidden');
openBtn.classList.remove('hidden');
const SIDEBAR_STATE_KEY = 'sidebar';
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', () => {
sidebarWrapper.classList.remove('w-20');
sidebarWrapper.classList.add('w-64');
export const setSidebarState = (state) => {
const isClosed = state === 'closed';
openBtn.classList.add('hidden');
closeBtn.classList.remove('hidden');
elements.wrapper.classList.toggle('w-64', !isClosed);
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'));