---
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>