74 lines
1.6 KiB
Plaintext
74 lines
1.6 KiB
Plaintext
---
|
|
import ThemeToggle from './ThemeToggle.astro';
|
|
|
|
const currentPath = Astro.url.pathname;
|
|
---
|
|
|
|
<nav>
|
|
<div class="container">
|
|
<div class="nav-wrapper">
|
|
<a href="/" class="nav-brand">
|
|
<img src="/logo-dark.png" alt="CC24-Hub" class="nav-logo nav-logo-light" />
|
|
<img src="/logo-white.png" alt="CC24-Hub" class="nav-logo nav-logo-dark" />
|
|
<span style="font-weight: 600; font-size: 1.125rem;">CC24-Hub</span>
|
|
</a>
|
|
|
|
<ul class="nav-links">
|
|
<li>
|
|
<a href="/" class={`nav-link ${currentPath === '/' ? 'active' : ''}`}>
|
|
~/
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/knowledgebase" class={`nav-link ${currentPath === '/knowledgebase' ? 'active' : ''}`}>
|
|
~/knowledgebase
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/status" class={`nav-link ${currentPath === '/status' ? 'active' : ''}`}>
|
|
~/status
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/about" class={`nav-link ${currentPath === '/about' ? 'active' : ''}`}>
|
|
~/about
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<ThemeToggle />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
/* Logo theme switching */
|
|
.nav-logo-light {
|
|
display: block;
|
|
}
|
|
|
|
.nav-logo-dark {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-logo-light {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-logo-dark {
|
|
display: block;
|
|
}
|
|
|
|
/* Make brand clickable */
|
|
.nav-brand {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.nav-brand:hover {
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
}
|
|
</style> |