fix: make sidebar state persistant
This commit is contained in:
parent
985dd967e4
commit
4741c894e6
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@ -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'));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user