---
import Navigation from '../components/Navigation.astro'
import { SkipLinks } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
---

<header class="sticky top-0 z-50 backdrop-blur-md">
  <SkipLinks />
  <Navigation>
    <li class="menu-item">
      <a href="/">Home</a>
    </li>
    <li class="menu-item">
      <a href="/blog/">Blog</a>
    </li>
    <li class="menu-item has-dropdown">
      <button aria-haspopup="true" aria-expanded="false">Mods</button>
      <ul class="dropdown-menu">
        <li class="submenu-item">
          <a href="/midnightlib/">MidnightLib</a>
        </li>
        <li class="submenu-item">
          <a href="/midnightcontrols/">MidnightControls</a>
        </li>
      </ul>
    </li>
    <li class="menu-item has-dropdown">
      <button aria-haspopup="true" aria-expanded="false">Wiki</button>
      <ul class="dropdown-menu">
        <li class="submenu-item">
          <a href="/wiki/betterleaves/">Better Leaves</a>
        </li>
        <li class="submenu-item">
          <a href="/wiki/midnightlib/">MidnightLib</a>
        </li>
        <li class="submenu-item">
          <a href="/wiki/midnightcontrols/">MidnightControls</a>
        </li>
        <li class="submenu-item">
          <a href="/wiki/picturesign/">PictureSign</a>
        </li>
        <li class="submenu-item">
          <a href="/wiki/puzzle/">Puzzle</a>
        </li>
      </ul>
    </li>
    <li class="menu-item type-icon">
      <a href="http://discord.midnightdust.eu/" title="Join my Discord server">
        <Icon name="simple-icons:discord" />
      </a>
    </li>
    <li class="menu-item type-icon">
      <a href="https://github.com/Motschen" title="View my GitHub profile">
        <Icon name="simple-icons:github" />
      </a>
    </li>
  </Navigation>
</header>

<style lang="scss" is:global>
  @use '../assets/scss/base/outline' as *;

  header {
    background-color: rgb(255, 255, 255, 0.75);

    .type-icon a {
      display: block;

      [data-icon] {
        height: auto;
        margin-top: -2px;
        width: 28px;

        path {
          fill: var(--action-color);
        }
      }

      &:hover {
        [data-icon] path {
          fill: var(--action-color-state);
        }
      }
    }
  }
  header:is(.darkmode *) {
    background-color: rgba(24, 24, 37, 0.75);
  }
</style>