114 lines
2.0 KiB
Plaintext
114 lines
2.0 KiB
Plaintext
---
|
|
import {metadata} from "../consts";
|
|
import ThemeIcon from './ThemeIcon.astro'
|
|
import GitHubIcon from '@/assets/icon/github.svg?url'
|
|
---
|
|
|
|
<header>
|
|
<nav class="main-nav">
|
|
<h1>
|
|
<a href="/">{metadata.siteTitle}</a>
|
|
</h1>
|
|
|
|
<div class="main-nav-right">
|
|
<ul class="menu">
|
|
<li class="menu-item"><a href="/">首页</a></li>
|
|
<li class="menu-item"><a href="/archive">归档</a></li>
|
|
<li class="menu-item"><a target="_blank" href="https://git.ua42.com">
|
|
<img class="github-icon" src={GitHubIcon} alt="GitHub"/>
|
|
</a></li>
|
|
<!--<li class="menu-item"><a href="/">关于</a></li>-->
|
|
</ul>
|
|
|
|
<ThemeIcon/>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
height: 60px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99999;
|
|
box-shadow: var(--shadow);
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.main-nav {
|
|
max-width: var(--layout-width);
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
padding: 0 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.main-nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-nav {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
.main-nav h1 {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
color: #000000;
|
|
}
|
|
|
|
.main-nav .menu {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 20px;
|
|
height: 100%;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.github-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
}
|
|
|
|
.main-nav .menu-item a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.main-nav .menu-item a:hover {
|
|
color: #64748b;
|
|
}
|
|
|
|
:global(.dark) header {
|
|
background: var(--background);
|
|
box-shadow: none;
|
|
}
|
|
|
|
:global(.dark) .main-nav h1 {
|
|
color: #ffffff;
|
|
}
|
|
|
|
:global(.dark) .main-nav .menu-item a:hover {
|
|
color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
:global(.dark) .github-icon {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|