---
import ThemeSwitch from './ThemeSwitch.astro';
---

<header>
  <nav class="nav" aria-label="Main menu">
    <div class="nav-left">
      <a id="logo" class="brand text-primary" href="/">Cats Of Tech</a>
    </div>
    <div class="nav-right">
      <ThemeSwitch />
      <a class="button outline" href="/submit">Submit a cat</a>
    </div>
  </nav>
</header>

<style>
  header {
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-primary);
  }

  a {
    color: var(--text-grey);
  }
</style>
