56 lines
1.4 KiB
Plaintext
56 lines
1.4 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
window.utils.aside = function(el) {
|
|
var asideEl = el;
|
|
var collapsed = false;
|
|
var collClass = 'main__aside--collapsed';
|
|
var animClass = 'main__aside--transitioning';
|
|
|
|
init();
|
|
function init() {
|
|
var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
|
|
if (document.body.getBoundingClientRect().width < 999 || collLS) {
|
|
asideEl.classList.add(collClass);
|
|
collapsed = true;
|
|
}
|
|
}
|
|
|
|
function check() {
|
|
if (collapsed && !hasClass() || !collapsed && hasClass()) {
|
|
asideEl.classList.add(animClass);
|
|
asideEl.classList.toggle(collClass, collapsed);
|
|
window.localStorage.setItem('asidenavCollapsed', collapsed);
|
|
}
|
|
}
|
|
|
|
function hasClass() {
|
|
return asideEl.classList.contains(collClass);
|
|
}
|
|
|
|
asideEl.addEventListener('click', function(event) {
|
|
if (event.target === asideEl) {
|
|
collapsed = !collapsed;
|
|
check();
|
|
}
|
|
});
|
|
asideEl.addEventListener('transitionend', function(event) {
|
|
if (event.propertyName === 'opacity') {
|
|
asideEl.classList.remove(animClass);
|
|
}
|
|
});
|
|
window.addEventListener('resize', function() {
|
|
collapsed = document.body.getBoundingClientRect().width < 999;
|
|
check();
|
|
});
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
utils.aside(document.querySelector('.main__aside'));
|
|
|
|
});
|