f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-21 07:03:44 +00:00
Code Issues Packages Releases Activity

refactor: simplify sidebar animation

Browse Source
This commit is contained in:
Cotes Chung
2024-10-22 10:42:07 +08:00
parent c1bd9eb9ee
commit d4f7f39ece
3 changed files with 10 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
_javascript/modules/components/sidebar.js
View File

@@ -2,26 +2,21 @@
* Expand or close the sidebar in mobile screens.
*/
const ATTR_DISPLAY = 'sidebar-display';
const $sidebar = document.getElementById('sidebar');
const $trigger = document.getElementById('sidebar-trigger');
const $mask = document.getElementById('mask');
class SidebarUtil {
static isExpanded = false;
static #isExpanded = false;
static toggle() {
if (SidebarUtil.isExpanded === false) {
document.body.setAttribute(ATTR_DISPLAY, '');
} else {
document.body.removeAttribute(ATTR_DISPLAY);
}
SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
this.#isExpanded = !this.#isExpanded;
document.body.toggleAttribute('sidebar-display', this.#isExpanded);
$sidebar.classList.toggle('z-2', this.#isExpanded);
$mask.classList.toggle('d-none', !this.#isExpanded);
}
}
export function sidebarExpand() {
document
.getElementById('sidebar-trigger')
.addEventListener('click', SidebarUtil.toggle);
document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
$trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
}