51 lines
2.3 KiB
HTML
51 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>功能列</title>
|
|
<style>
|
|
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } /* Allow vertical scroll in sidebar */
|
|
.sidebar { /* height: 100%; removed as body handles height */ }
|
|
.sidebar img { display: block; margin: 20px auto; width: 60px; height: 60px; border-radius: 50%; }
|
|
.sidebar ul { list-style: none; padding-left: 0; margin-top:0; }
|
|
.sidebar ul li { padding: 12px 20px; color: #333; cursor: pointer; }
|
|
.sidebar ul li:hover, .sidebar ul li.active { background-color: #e6f0f8; color: #007bff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<img src="https://cdn-icons-png.freepik.com/512/4873/4873262.png" alt="Logo" />
|
|
<ul>
|
|
<li class="active" onclick="requestNavigation('dashboard.html', this)">首頁</li>
|
|
<li onclick="requestNavigation('Activation.html', this)">居民開通</li>
|
|
<li onclick="requestNavigation('some_page1.html', this)">出入管理</li>
|
|
<li onclick="requestNavigation('some_page2.html', this)">緊急通報</li>
|
|
<li onclick="requestNavigation('some_page3.html', this)">訊息通知</li>
|
|
<li onclick="requestNavigation('some_page4.html', this)">水電服務</li>
|
|
<li onclick="requestNavigation('some_page5.html', this)">佈告欄</li>
|
|
<li onclick="requestNavigation('some_page6.html', this)">報表匯出</li>
|
|
<li onclick="requestNavigation('some_page7.html', this)">設定</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
function requestNavigation(url, clickedElement) {
|
|
console.log('Sidebar: 發送導航請求 ->', url);
|
|
// 向父視窗 (main.html) 發送訊息
|
|
// 對於 file:/// 環境, targetOrigin 必須是 '*'
|
|
// 在正式伺服器環境，應指定父視窗的確切來源 (e.g., 'http://yourdomain.com')
|
|
parent.postMessage({ type: 'navigate', url: url }, '*');
|
|
|
|
// 更新側邊欄本地的 active class
|
|
const listItems = document.querySelectorAll('.sidebar ul li');
|
|
listItems.forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
if (clickedElement) {
|
|
clickedElement.classList.add('active');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |