AskaEth/TurboSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile sidebar toggle with backdrop, miuix tap style

Browse Source
This commit is contained in:
AskaEth
2026-07-27 11:56:10 +08:00
parent 877e6c1a8c
commit 91c4ed7dab
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/miuix.css
+2
View File
@@ -126,6 +126,8 @@ html, body {
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
transition: background var(--transition-normal), color var(--transition-normal);
}
templates/index.html
+11 -2
View File
@@ -10,6 +10,7 @@
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body class="theme-dark">
<div id="sidebar-backdrop" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:199" onclick="toggleMobileMenu()"></div>
<div id="app" class="app-layout">
<aside id="sidebar" class="sidebar expanded">
<div class="sidebar-header">
@@ -72,10 +73,10 @@
<main class="main-content">
<header id="topbar" class="topbar">
<div class="topbar-left">
<button id="mobile-menu-btn" class="icon-btn" style="display:none" onclick="document.getElementById('sidebar').classList.toggle('mobile-open')">
<button id="mobile-menu-btn" class="icon-btn" style="display:none" onclick="toggleMobileMenu()">
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/></svg>
</button>
<div id="topbar-logo-title" class="topbar-logo-title hidden" style="cursor:pointer" onclick="document.getElementById('sidebar').classList.toggle('mobile-open')">
<div id="topbar-logo-title" class="topbar-logo-title hidden" style="cursor:pointer" onclick="toggleMobileMenu()">
<img src="/static/img/logo.svg" alt="TurboSu" width="28" height="28">
<span class="topbar-title-text">TurboSu</span>
</div>
@@ -128,5 +129,13 @@
<script src="/static/js/pages/settings.js"></script>
<script src="/static/js/router.js"></script>
<script src="/static/js/app.js"></script>
<script>
function toggleMobileMenu() {
var sb = document.getElementById('sidebar');
var bd = document.getElementById('sidebar-backdrop');
var open = sb.classList.toggle('mobile-open');
bd.style.display = open ? 'block' : 'none';
}
</script>
</body>
</html>