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