asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
3 changed files with 10 additions and 25 deletions
Show stats 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. * 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 { class SidebarUtil {
static isExpanded = false; static #isExpanded = false;
static toggle() { static toggle() {
if (SidebarUtil.isExpanded === false) { this.#isExpanded = !this.#isExpanded;
document.body.setAttribute(ATTR_DISPLAY, ''); document.body.toggleAttribute('sidebar-display', this.#isExpanded);
} else { $sidebar.classList.toggle('z-2', this.#isExpanded);
document.body.removeAttribute(ATTR_DISPLAY); $mask.classList.toggle('d-none', !this.#isExpanded);
}
SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
} }
} }
export function sidebarExpand() { export function sidebarExpand() {
document $trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
.getElementById('sidebar-trigger')
.addEventListener('click', SidebarUtil.toggle);
document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
} }

2
_layouts/default.html
View file

@ -68,7 +68,7 @@ layout: compress
</aside> </aside>
</div> </div>
<div id="mask"></div> <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
{% if site.pwa.enabled %} {% if site.pwa.enabled %}
{% include_cached notification.html lang=lang %} {% include_cached notification.html lang=lang %}

10
_sass/addon/commons.scss
View file

@ -688,7 +688,6 @@ $btn-mb: 0.5rem;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
width: $sidebar-width; width: $sidebar-width;
z-index: 99;
background: var(--sidebar-bg); background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border-color); border-right: 1px solid var(--sidebar-border-color);
@ -1091,16 +1090,7 @@ search {
} }
#mask { #mask {
display: none;
position: fixed;
inset: 0 0 0 0; inset: 0 0 0 0;
height: 100%;
width: 100%;
z-index: 1;
@at-root [#{$sidebar-display}] & {
display: block !important;
}
} }
/* --- basic wrappers --- */ /* --- basic wrappers --- */