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; overflow: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
transition: background var(--transition-normal), color var(--transition-normal); 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"> <link rel="stylesheet" href="/static/css/main.css">
</head> </head>
<body class="theme-dark"> <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"> <div id="app" class="app-layout">
<aside id="sidebar" class="sidebar expanded"> <aside id="sidebar" class="sidebar expanded">
<div class="sidebar-header"> <div class="sidebar-header">
@@ -72,10 +73,10 @@
<main class="main-content"> <main class="main-content">
<header id="topbar" class="topbar"> <header id="topbar" class="topbar">
<div class="topbar-left"> <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> <svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/></svg>
</button> </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"> <img src="/static/img/logo.svg" alt="TurboSu" width="28" height="28">
<span class="topbar-title-text">TurboSu</span> <span class="topbar-title-text">TurboSu</span>
</div> </div>
@@ -128,5 +129,13 @@
<script src="/static/js/pages/settings.js"></script> <script src="/static/js/pages/settings.js"></script>
<script src="/static/js/router.js"></script> <script src="/static/js/router.js"></script>
<script src="/static/js/app.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> </body>
</html> </html>