53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
// 侧边栏折叠功能
|
|
(function() {
|
|
const STORAGE_KEY = 'sidebar-collapsed';
|
|
|
|
// 初始化
|
|
function init() {
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const toggleBtn = document.querySelector('.sidebar-toggle');
|
|
const toggleWrapper = document.querySelector('.sidebar-toggle-wrapper');
|
|
|
|
if (!sidebar || !toggleBtn) return;
|
|
|
|
// 从 localStorage 恢复状态
|
|
const isCollapsed = localStorage.getItem(STORAGE_KEY) === 'true';
|
|
if (isCollapsed) {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
|
|
// 更新tooltip文字
|
|
updateTooltip(sidebar, toggleWrapper);
|
|
|
|
// 绑定点击事件
|
|
toggleBtn.addEventListener('click', function() {
|
|
sidebar.classList.toggle('collapsed');
|
|
const collapsed = sidebar.classList.contains('collapsed');
|
|
localStorage.setItem(STORAGE_KEY, collapsed);
|
|
|
|
// 更新tooltip
|
|
updateTooltip(sidebar, toggleWrapper);
|
|
|
|
// 触发自定义事件
|
|
const event = new CustomEvent('sidebarToggle', {
|
|
detail: { collapsed: collapsed }
|
|
});
|
|
document.dispatchEvent(event);
|
|
});
|
|
}
|
|
|
|
// 更新tooltip文字
|
|
function updateTooltip(sidebar, wrapper) {
|
|
if (!wrapper) return;
|
|
const isCollapsed = sidebar.classList.contains('collapsed');
|
|
wrapper.setAttribute('data-tooltip', isCollapsed ? '展开侧边栏' : '收起侧边栏');
|
|
}
|
|
|
|
// DOM 加载完成后初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|