---
import ArticleSearchWrapper from "../components/ArticleSearchWrapper.astro";
import ThemeToggle from "../components/ThemeToggle.svelte";
---

<nav>
  <div class="container">
    <a href="/"> Logo</a>
    <slot />
    <ArticleSearchWrapper />
    <ThemeToggle client:only="svelte" />
  </div>
</nav>

<style>
  nav {
    position: sticky;
    inset-block-start: 0;
    background-color: var(--secondary-background-color);
    border-block-end: var(--standard-border);
  }

  .container {
    display: flex;
    align-items: center;
    block-size: var(--nav-height);
    position: relative;
  }

  .container > *:first-child {
    margin-inline-end: auto;
  }
</style>