webui: navigation bar improve
This commit is contained in:
+3
-2
@@ -183,7 +183,8 @@
|
|||||||
left: 100%;
|
left: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover,
|
||||||
|
.nav-link.active {
|
||||||
color: var(--accent-cyan);
|
color: var(--accent-cyan);
|
||||||
border-color: var(--accent-cyan);
|
border-color: var(--accent-cyan);
|
||||||
box-shadow: var(--glow-cyan);
|
box-shadow: var(--glow-cyan);
|
||||||
@@ -613,7 +614,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<span class="logo">GO2RTC</span>
|
<span class="logo">GO2RTC</span>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="index.html" class="nav-link">Streams</a>
|
<a href="index.html" class="nav-link active">Streams</a>
|
||||||
<a href="add.html" class="nav-link">Add Stream</a>
|
<a href="add.html" class="nav-link">Add Stream</a>
|
||||||
<a href="config.html" class="nav-link">Config</a>
|
<a href="config.html" class="nav-link">Config</a>
|
||||||
<a href="log.html" class="nav-link">Logs</a>
|
<a href="log.html" class="nav-link">Logs</a>
|
||||||
|
|||||||
+10
-1
@@ -182,7 +182,8 @@ if (!document.querySelector('.logo')) {
|
|||||||
left: 100%;
|
left: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover,
|
||||||
|
.nav-link.active {
|
||||||
color: var(--accent-cyan);
|
color: var(--accent-cyan);
|
||||||
border-color: var(--accent-cyan);
|
border-color: var(--accent-cyan);
|
||||||
box-shadow: var(--glow-cyan);
|
box-shadow: var(--glow-cyan);
|
||||||
@@ -427,6 +428,14 @@ if (!document.querySelector('.logo')) {
|
|||||||
</header>
|
</header>
|
||||||
` + document.body.innerHTML;
|
` + document.body.innerHTML;
|
||||||
|
|
||||||
|
// Mark active nav link
|
||||||
|
const currentPage = location.pathname.split('/').pop() || 'index.html';
|
||||||
|
document.querySelectorAll('.nav-links .nav-link').forEach(link => {
|
||||||
|
if (link.getAttribute('href') === currentPage) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Theme management functions
|
// Theme management functions
|
||||||
function initTheme() {
|
function initTheme() {
|
||||||
const savedTheme = localStorage.getItem('theme');
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
|||||||
Reference in New Issue
Block a user