代碼片段
<div class="main-left">
<h1 class="logo"></h1>
<div id="sidebar-nav" class="sidebar-nav"></div>
</div>
結構含義
.main-left：頁面左側主容器，通常固定寬度、高度 100vh，承載 Logo 與側邊導航。h1.logo：網站/系統 Logo 區塊，常用 background-image 或 text-indent:-9999px 隱藏文字顯示圖標。#sidebar-nav.sidebar-nav：側邊導航菜單容器，內部通常包含 <ul><li><a>... 層級結構，配合 CSS/JS 實現摺疊、高亮、權限控制等交互。
常見變體
| 框架 | 典型類名 | 特點 |
|---|
| Bootstrap | .sidebar, .nav-sidebar | 響應式摺疊，配合 data-bs-toggle |
| AdminLTE | .main-sidebar, .sidebar-menu | 樹狀菜單，支持 ControlSidebar |
| Element UI | .el-aside, .el-menu | Vue 組件化，router 綁定自動高亮 |
最佳實踐
- 語義化：使用
<nav> 包裹側邊欄，<ul role="list"> 承載菜單項。
- 無障礙：
aria-expanded 標識摺疊狀態，aria-current="page" 標識當前頁。
- 響應式：移動端用
position:fixed; left:-100%; transition 實現抽屉式側邊欄。
