yueqian/wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add mobile sidebar menu and drawer overlay
Deploy Wiki to Production / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
zdh
2026-06-04 15:54:41 +08:00
parent 2ad02cd810
commit a681ae60ef
1 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
抖音主题/报告/ai-usage-levels-for-software-company.html
+29 -1
View File
@@ -29,6 +29,10 @@
.header .back-link{margin-right:16px;font-size:13px;color:var(--color-primary);text-decoration:none;flex-shrink:0;}
.header .back-link:hover{text-decoration:underline;}
.header .version{margin-left:auto;font-size:12px;color:var(--text-tertiary);font-family:'SF Mono',Monaco,monospace;}
.menu-btn{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);font-size:20px;margin-right:12px;flex-shrink:0;}
.menu-btn:hover{background:var(--bg-elevated);}
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;opacity:0;transition:opacity .25s;}
.drawer-overlay.show{display:block;opacity:1;}
.sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-container);border-right:1px solid var(--border);overflow-y:auto;padding:1.25rem 0;z-index:90;}
.sidebar .toc-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);padding:0 1.25rem;margin-bottom:.75rem;font-weight:600;}
@@ -118,7 +122,9 @@
@media(max-width:992px){:root{--sidebar-w:220px;}.main{padding:24px 20px 48px;}}
@media(max-width:768px){
.sidebar{display:none;}
.menu-btn{display:flex;align-items:center;justify-content:center;}
.sidebar{display:block;position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;transform:translateX(-100%);transition:transform .25s ease;z-index:201;padding-top:60px;}
.sidebar.show{transform:translateX(0);}
.main{margin-left:0;padding:20px 16px 40px;}
.header h1{font-size:15px;}
.flow-chart{flex-direction:column;align-items:stretch;}
@@ -129,11 +135,14 @@
<body>
<div class="header">
<button class="menu-btn" id="menuBtn" aria-label="菜单">☰</button>
<a href="../../index.html" class="back-link">← 首页</a>
<h1>AI 使用程度四级模型 · 软件公司角色协同全景</h1>
<span class="version">V1.0 · 2026-06</span>
</div>
<div class="drawer-overlay" id="drawerOverlay"></div>
<nav class="sidebar" id="sidebar">
<div class="toc-label">目录导航</div>
<ol>
@@ -583,6 +592,24 @@
<script>
(function(){
var drawer = document.getElementById('drawerOverlay');
var sidebar = document.getElementById('sidebar');
var menuBtn = document.getElementById('menuBtn');
function openSidebar(){
drawer.classList.add('show'); sidebar.classList.add('show');
document.body.style.overflow = 'hidden';
}
function closeSidebar(){
drawer.classList.remove('show'); sidebar.classList.remove('show');
document.body.style.overflow = '';
}
menuBtn.addEventListener('click', function(e){
e.stopPropagation();
sidebar.classList.contains('show') ? closeSidebar() : openSidebar();
});
drawer.addEventListener('click', closeSidebar);
var bt = document.getElementById('backToTop');
window.addEventListener('scroll',function(){
bt.classList.toggle('show', window.scrollY > 500);
@@ -598,6 +625,7 @@
if(el) el.scrollIntoView({behavior:'smooth',block:'start'});
links.forEach(function(l){l.classList.remove('active');});
this.classList.add('active');
if(window.innerWidth <= 768) closeSidebar();
});
});