diff --git a/public/index.html b/public/index.html
index c3401fd..c044181 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
         <nav id="sidebar-nav"></nav>
         <div class="sidebar-footer">
           <div id="user-info"></div>
-          <button class="btn btn-sm btn-outline w-full" onclick="App.logout()"><i class="fas fa-sign-out-alt"></i> 退出</button>
+          <button class="btn btn-sm btn-outline w-full" id="sidebar-logout"><i class="fas fa-sign-out-alt"></i> 退出</button>
         </div>
       </aside>
       <main id="main-content">
diff --git a/public/js/app.js b/public/js/app.js
index 2259e25..b597fdc 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -118,14 +118,19 @@ const App = {
     document.getElementById('main-layout').classList.remove('hidden');
     const u = Auth.user();
     document.getElementById('user-info').innerHTML = `<div class="av">${U.esc(u.game_name||u.username).charAt(0).toUpperCase()}</div><div class="dt"><div class="nm">${U.esc(u.game_name||u.username)}</div><div class="rl">${U.ROLE[u.role]}</div></div>`;
+    document.getElementById('sidebar-logout').onclick = () => App.logout();
     this.loadFooter();
   },
 
   renderSidebar(current) {
     const u = Auth.user();
-    document.getElementById('sidebar-nav').innerHTML = this.navItems
+    const nav = document.getElementById('sidebar-nav');
+    nav.innerHTML = this.navItems
       .filter(i => i.roles.includes(u.role))
-      .map(i => `<div class="nav-item ${current===i.id?'active':''}" onclick="App.navigate('${i.id}')"><i class="fas ${i.icon}"></i><span>${i.label}</span></div>`).join('');
+      .map(i => `<div class="nav-item ${current===i.id?'active':''}" data-nav="${i.id}"><i class="fas ${i.icon}"></i><span>${i.label}</span></div>`).join('');
+    nav.querySelectorAll('.nav-item').forEach(el => {
+      el.addEventListener('click', () => App.navigate(el.dataset.nav));
+    });
   },
 
   async renderMain(title, page, param) {